Declaring reactive state with data and ref()

With the Options API, declare reactive state with the data option, whose value should be a function returning an object; Vue wraps the returned object in its reactivity system and proxies its top-level properties on the component instance, so this in methods and lifecycle hooks reaches them. Those instance properties are only added when the instance is first created, so declare every key upfront, using null or undefined as a placeholder when a value is not yet available — properties added to this later will not trigger reactive updates. Vue 3 makes data reactive with JavaScript Proxies, so after assignment this.someObject is a reactive proxy of the original object, and you should always access reactive state as a property of this. In the Composition API, the recommended way to declare reactive state is ref(), which wraps its argument in a ref object with a .value property for reads and writes in JavaScript; refs are automatically unwrapped inside templates, with a few caveats, and can be mutated directly in event handlers. Avoid top-level data property names starting with $ or _, which Vue reserves. Scope: Vue 3. Reviewed October 4, 2026.