Problem Statement
Name two common gotchas when mixing ref() and reactive().
Explanation
1) A ref unwrapped inside reactive becomes a plain value—updates to the original ref won’t propagate unless you keep it as a ref property (e.g., state.count = ref(0)). 2) Destructuring reactive objects breaks reactivity; use toRefs() to preserve it.
Code Solution
SolutionRead Only
import { reactive, toRefs, ref } from 'vue'
const inner = ref(1)
const state = reactive({ a: inner }) // inner unwrapped here
const { a } = toRefs(state) // keep reactivity when destructuring