Vue 3 ref vs reactive — when to use which

Vue 3 offers ref() and reactive(). Confusion leads to reactivity bugs — destructuring reactive loses reactivity, ref requires .value.

Use ref() by default — works for primitives AND objects, explicit with .value. Key rules: (1) Never destructure reactive — use toRefs(). (2) ref() auto-unwraps in templates. (3) Composables: always return refs. (4) reactive() cannot be reassigned. (5) Prefer ref() for consistency.

reactive() uses Proxy on the object. Destructuring extracts the value, breaking the Proxy reference. ref() wraps in { value }, so the ref itself is stable.