10.2 典型的なトラブルシューティング例

ここでは、クラスコンポーネントからComposition API + <script setup lang="ts">へ移行する際によく発生するトラブルを一挙に整理し、それぞれの原因と解決策を具体的に示していきます。

✅ トラブル例 1：v-modelが動かない！

■ 症状

• 子コンポーネントにv-modelで渡したはずのデータが更新されない。
• エラーも出ず、データバインディングだけがおかしい。

■ 原因

• Composition APIではv-modelは modelValue と update:modelValue という名前固定の仕様になったため、クラスコンポーネントのvalue/inputのままでは動かない。

■ 解決策

子コンポーネント側で正しく書き換えましょう。

// ファイル名: ChildComponent.vue
<template>
  <input :value="modelValue" @input="onInput" />
</template>

<script setup lang="ts">
defineProps<{ modelValue: string }>();
const emit = defineEmits<{
  (e: 'update:modelValue', value: string): void;
}>();

const onInput = (event: Event) => {
  emit('update:modelValue', (event.target as HTMLInputElement).value);
};
</script>

✅ ポイント：「modelValue」「update:modelValue」じゃないとv-modelが動かない！

✅ トラブル例 2：Vuexのstateやgetterに型エラーが出る！

■ 症状

• storeのstateやgetterにアクセスしようとするとTypeScriptでエラーになる。