`ref()`

Creates a reactive, mutable reference holding any value.

Since Vue 3.0 Spec ↗

Syntax

ref<T>(value: T): Ref<T>

Parameters

Name	Type	Required	Description
`value`	`T`	No	The initial inner value.

Returns

Ref<T> — An object with a reactive .value property.

Examples

<script setup lang="ts">
import { ref } from 'vue';

const count = ref(0);
function inc() {
  count.value++;
}
</script>

<template>
  <button @click="inc">{{ count }}</button>
</template>

<script setup>
import { ref } from 'vue';
const user = ref({ name: 'Ada' });
user.value.name = 'Grace';
</script>

Notes

Access and mutate the value via `.value` in script; templates unwrap refs automatically so you write `{{ count }}`. Objects assigned to a ref are made deeply reactive. ref works with any type, including primitives, unlike reactive().