フレームワーク
Vue.js
プログレッシブに導入できるリアクティブな JavaScript / TypeScript フロントエンドフレームワーク。SFC（.vue）と Composition API が中心。
問題一覧（8）
Vue 3 の Composition API で reactive を分割代入してリアクティビティが失われる
reactive() で作ったオブジェクトを分割代入や引数渡しすると Proxy 経由のアクセスが切れてリアクティブでなくなる。toRefs() で個別の Ref に展開するか、プリミティブは ref() を使う。
更新: 2026-09-24、実行例あり、タグ: vue3、composition-api、reactive
Vue.js の computed が更新されない
computed はリアクティブな依存関係だけを追跡してキャッシュするため、リアクティブでない値を参照していると再計算されない。依存する値をすべて ref / reactive にするのが解決の軸。getter 内の副作用も誤動作のもとになる。
更新: 2026-09-09、実行例あり、タグ: vue、computed、reactivity
Vue で子コンポーネントの emit したイベントが親で受け取れない
子の $emit / defineEmits したイベントが親に届かないのは、イベント名の綴り不一致や emits 未宣言が主因。emit 名と親の @ ハンドラの綴りを揃え、defineEmits で宣言する。
更新: 2026-09-18、実行例あり、タグ: vue、emit、events
Vue で「Failed to resolve component」が解決できない
[Vue warn]: Failed to resolve component は、テンプレートで使ったコンポーネントが登録されていないときに出る。<script setup> では import するだけでローカル登録され、Options API では components への登録、全体で使うならグローバル登録が必要。
更新: 2026-09-18、実行例あり、タグ: vue、component、registration
Vue 3 で props を分割代入するとリアクティブが効かない
Vue 3.4 以前では defineProps の戻り値を分割代入するとリアクティブ性が失われ、親の更新が子に反映されません。Vue 3.5 以降は Reactive Props Destructure が標準で有効になり、分割代入してもリアクティブが保たれます。
更新: 2026-09-24、タグ: props、reactivity、composition-api
Vue 3 の <script setup> で this が使えない
<script setup> はモジュールスコープで実行されるため Options API の this が存在しない。テンプレート参照は ref、props は defineProps、ライフサイクルは onMounted などの import 関数で置き換える。
更新: 2026-09-17、タグ: vue3、script-setup、composition-api
Vue 3 のカスタムコンポーネントで v-model が同期しない
Vue 3 のカスタムコンポーネントの v-model は親が :modelValue / @update:modelValue を経由して受け渡しする糖衣構文。子側で defineProps/defineEmits の宣言が抜ける、defineModel を 3.4 未満で使う、v-model:foo の名前と prop 名がずれる、で同期しない。
更新: 2026-09-19、タグ: v-model、defineModel、props
Vue で watch が発火しない
watch が反応しないのは、監視対象に値を直接渡しているか、ネストの変更を浅い監視で見逃しているのが主因。ref はそのまま、reactive のプロパティはゲッター関数で渡し、深い変更は deep オプションを付ける。
更新: 2026-09-08、実行例あり、タグ: vue、watch、composition-api