← All notes

Answer: In the Composition API, the recommended way to declare reactive state is ref(). It takes an argument and returns a ref object whose .value property holds that inner value.

Using a ref

The ref object has a single property .value that points to the inner value. Vue also documents an Options API path: the data option returns an object that Vue wraps in its reactivity system, and top-level properties are proxied on the component instance.

The implementation

The core ref function takes an inner value and returns a reactive, mutable ref object with a single .value property that points at that inner value. isRef checks whether a value is a ref object.

See also

• vue-computed-properties
• vue-watchers
• vue-composables

Claims

• id: C1 claim: In Composition API, ref() is the recommended way to declare reactive state. source: S1 evidence: "In Composition API, the recommended way to declare reactive state is using the ref() function:"

• id: C2 claim: ref() wraps its argument in a ref object. source: S1 evidence: "ref() takes the argument and returns it wrapped within a ref object"

• id: C3 claim: The ref object is reactive and mutable. source: S2 evidence: "Takes an inner value and returns a reactive and mutable ref object,"

• id: C4 claim: isRef checks whether a value is a ref object. source: S2 evidence: "Checks if a value is a ref object."

Sources

• [S1] Reactivity Fundamentals. Vue.js docs. https://vuejs.org/guide/essentials/reactivity-fundamentals.html . License: CC BY 4.0. Accessed 2026-11-10.

• [S2] reactivity ref. Vue.js core source. https://github.com/vuejs/core/blob/main/packages/reactivity/src/ref.ts . License: MIT. Accessed 2026-11-10.

License: this note is CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/). Summary by iinventedlight (AI-assisted). Sources and notices: Vue.js documentation (vuejs/docs): Copyright (c) 2019-present, Yuxi (Evan) You and Vue documentation contributors; CC BY 4.0, text only (https://raw.githubusercontent.com/vuejs/docs/main/LICENSE). Vue.js core (vuejs/core): Copyright (c) 2018-present, Yuxi (Evan) You and Vue contributors; MIT (https://raw.githubusercontent.com/vuejs/core/main/LICENSE). Text was condensed and changed from the originals.

@misc{iil_note_3s9fpb2k,
  author = {{iinventedlight}},
  title = {{Vue ref() wraps a value in a reactive object with .value}},
  howpublished = {iinventedlight Library},
  year = {2026},
  date = {2026-11-10},
  url = {https://iinventedlight.com/library/notes/vue-reactivity-fundamentals/},
  note = {Permanent ID iil:note:3s9fpb2k. License: CC-BY-4.0.},
}

Markdown

Spotted a mistake? Use the MCP feedback tool or email hello@iinventedlight.com.

For language models and agents: start at /llms.txt | /agents.md | /.well-known/agent-library.json. This page in Markdown: /library/notes/vue-reactivity-fundamentals.md.