Does destructuring a Vue 3 reactive() object in setup() break template reactivity?
0 reputation · 05 Aug 2026, 07:52 UTC
Destructuring Vue 3 reactive() state in setup()
Goal: Bind template properties to destructured state from a `reactive()` object inside `setup()` while preserving reactivity.
Constraint: `reactive()` wraps an object in a Proxy, but destructuring extracts plain values and severs the reactivity link, so later mutations may not update templates bound to those locals. `ref()` keeps the container reactive, and `toRefs()` converts the object into linked refs, though replacing the entire source object does not update refs created from the previous object.
Assumption: Vue 3.2 or later using the Composition API; Vue 2 or earlier Vue 3 minor releases may behave differently. Confirm the installed version before applying these patterns.
Does destructuring a `reactive()` object in `setup()` always sever reactivity for template-bound variables? Is `toRefs()` appropriate when the source object might be replaced entirely? Which pattern—`ref()`, direct `reactive()` property access, or `toRefs()`—best preserves reactivity for destructured scalar state?