Vue · Junior · Question 15 of 75
Why does destructuring a reactive object break reactivity?
const state = reactive({ count: 0 });
let { count } = state;
count++; // the UI doesn't update- ✓Correct answer: Destructuring copies the primitive value out of the Proxy, so changes aren't tracked
- 2Destructuring is forbidden in
<script setup> - 3It works; the UI updates on the next tick
Explanation
Reactivity works through property access on the Proxy. Use toRefs(state) to destructure into refs that stay connected, or use ref from the start.