Why does destructuring sometimes lose reactivity in Vue, and how do you avoid it?

Summary

Reactivity is tracked through property access on a proxy or .value on a ref. Destructuring a reactive() object, a store, or (before Vue 3.5) props copies the current values into plain variables, which no longer update.

Longer Answer

Fixes: keep the object and access properties (state.count), use toRefs() / toRef() to get refs per property, storeToRefs() for Pinia stores, and in Vue 3.5+ props destructuring in <script setup> is compiled to keep reactivity. When passing a reactive value into a composable, pass a ref or getter (() => props.id) rather than the raw value, and read it with toValue().

Key Points

• Destructuring copies values.
• toRefs / toRef / storeToRefs.
• Props destructure reactive in 3.5+.
• Pass refs or getters to composables.