Vì sao destructure một object `reactive` (hoặc `props`) lại mất reactivity? Cách giữ lại?

Vì reactive() trả về một Proxy — reactivity nằm ở thao tác truy cập thuộc tính qua proxy, không nằm trong giá trị.

Destructure lấy ra giá trị nguyên thuỷ tại thời điểm đó, cắt đứt liên kết với proxy:

const state = reactive({ count: 0 })
let { count } = state   // count is just the number 0 now
state.count++           // count is still 0, template does not update

Cách giữ liên kết:

const { count } = toRefs(state)   // count is a ref linked back to state.count
const count2 = toRef(state, 'count')
console.log(count.value)          // 1 after state.count++

Với props cũng vậy: const { title } = defineProps() sẽ đóng băng giá trị. Dùng props.title trực tiếp, hoặc toRefs(props) khi cần truyền vào composable/watch.

Hai điểm hay bị hỏi thêm:
- Truyền một giá trị đã destructure vào hàm cũng mất reactivity → truyền cả object, hoặc truyền ref rồi đọc bằng toValue().
- Từ Vue 3.5, reactive props destructure đã ổn định: compiler tự biến biến destructure từ defineProps thành truy cập props.x, nên riêng trường hợp props thì vẫn giữ được reactivity.