Does destructuring a Vue 3 reactive() object in setup() break template reactivity?

Direct answer

Yes. Destructuring a reactive() object inside setup() extracts plain JavaScript values at that moment, severing the Proxy linkage. Template bindings to those local variables will not update when the source reactive state mutates.

Why it happens

reactive() wraps an object in a Vue Proxy that intercepts property access. Destructuring (const { count } = state) reads the property once and assigns the raw value to a new variable. That variable is no longer connected to the Proxy, so subsequent mutations to state.count never reach the template.

Confirmed patterns that preserve reactivity

1. toRefs() — Converts each property of a reactive object into a ref that still proxies the original object. const { count } = toRefs(state) gives you a reactive count ref. In templates, refs unwrap automatically; in script, use count.value.
2. Direct property access — state.count in the template remains fully reactive without any wrapping. This is the simplest approach when you don't need destructured locals.
3. ref() for individual values — Wrap scalars explicitly: const count = ref(0). Requires .value in script but works reliably.

Critical caveat: replacing the source object

If you ever reassign the entire reactive object (state = reactive(newObject)), any refs created by toRefs(state) become stale — they still point to the old object. After a full replacement, you must call toRefs() again on the new object.

Recommendation

• Need destructured locals that stay reactive? Use toRefs() — provided the reactive object is never replaced.
• Object may be replaced? Keep the reactive object reference stable and mutate its properties in place, or re-apply toRefs() after each replacement.
• Simple case? Skip destructuring entirely and use state.prop directly in the template.

One diagnostic detail

Does your component ever replace the entire reactive object (e.g., state = reactive({...})) after initial setup, or does it only mutate properties in place? This determines whether toRefs() is safe to use without re-application.