Vue 3 の Composition API で reactive を分割代入してリアクティビティが失われる

要約

reactive() が返すのは Vue が生成した Proxy オブジェクトで、リアクティビティは Proxy 経由のプロパティアクセスに依存している。const { count } = state のように分割代入すると Proxy を経由しない素の値が取り出され、以降の変更が UI に反映されない。toRefs() で個別の Ref に変換するか、最初から ref() を使うのが正解。

実行例

分割代入したほうは watchEffect が最初の 1 回しか動かず、state.count が 1 になっても取り出した変数は 0 のままだが、toRefs を通すと同じ更新で watchEffect が 2 回目も走り、値も 1 に追随した。
プリミティブを reactive に渡した実行では value cannot be made reactive の警告が出て、戻り値が素の number のまま返っている。

$ node bad.mjs
watchEffect が見ている count: 0
state.count       = 1
分割代入した count = 0

$ node solve_torefs.mjs
watchEffect が見ている count: 0
watchEffect が見ている count: 1
state.count       = 1
toRefs した count  = 1

$ node solve_ref.mjs
[Vue warn] value cannot be made reactive: 0
reactive(0) の戻り値 = 0 / typeof = number

— 2026-09-08 時点の出力

よくある原因

1. reactive({ count: 0 }) の戻り値を const { count } = state で分割代入し、テンプレートに count を直接渡している
2. reactive(0) のようにプリミティブを直接渡している（公式 API リファレンス（新しいタブで開く）↗ は reactive がオブジェクトのみを受け付けると明記）
3. コンポーザブルが返した reactive オブジェクトを受け取り側で const value = state.count のようにスナップショットしている
4. watch(() => state.x, ...) の代わりに watch(state.x, ...) を書いており、依存追跡が効いていない

解決策

1. toRefs で分割代入する

import { reactive, toRefs } from 'vue'
 
const state = reactive({ count: 0, name: 'foo' })
const { count, name } = toRefs(state)
// count.value で読み書き。テンプレートでは {{ count }} で自動アンラップ

toRefs は各プロパティを Ref に変換するため、Proxy を経由したアクセスが維持される。

2. プリミティブには ref を使う

import { ref } from 'vue'
 
const count = ref(0)
function inc() {
  count.value++
}

ref はオブジェクトでラップして .value 経由でアクセスさせる仕組み。
プリミティブはこちらを基本とする。

3. watch / computed の依存はゲッタで渡す

import { reactive, watch, computed } from 'vue'
 
const state = reactive({ count: 0 })
 
watch(() => state.count, (n) => console.log(n))
const doubled = computed(() => state.count * 2)

第一引数を関数（ゲッタ）にすると、Vue が依存追跡を行える。watch(state.count, ...) は値そのものを渡しており追跡できない。

4. 受け渡しの境界では Ref に変換する

import { reactive, toRef } from 'vue'
 
const state = reactive({ user: { name: 'foo' } })
useLogger(toRef(state, 'user'))
// useLogger 側は Ref<User> として受け取れる

コンポーザブルや関数の境界でリアクティビティを保ちたいときは toRef / toRefs で個別の Ref に変換してから渡す。