Problem Statement
What are toRefs() and toRef(), and why are they used with reactive objects?
Explanation
toRefs() converts each property of a reactive object into a ref, preserving reactivity when destructuring. toRef(obj, key) creates a single ref pointing to a specific property. Without these, destructuring a reactive object breaks reactivity.
Code Solution
SolutionRead Only
const state = reactive({ first: 'Ada', last: 'Lovelace' })
const { first, last } = toRefs(state)
// first.value stays in sync with state.first