了解しました！

✅ 7.2 v-modelを使った親子間同期の再設計

■ 要点まとめ

• クラスコンポーネント版では
  • 親：v-model="childValue"
  • 子：@Prop('value') + @Emit('input') で同期していた。
• Composition API版では
  • 親：v-model="childValue"（これはそのまま使える）
  • 子：modelValueをpropsで受け取り、update:modelValueでemitする。
• 同期方向をより明確にコントロールできる。

■ Before（クラスコンポーネント版）

// ファイル名: ParentComponent.vue
<template>
  <ChildComponent v-model="childValue" />
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';
import ChildComponent from './ChildComponent.vue';

@Component({
  components: { ChildComponent },
})
export default class ParentComponent extends Vue {
  private childValue: string = '親から渡す値';
}
</script>

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

<script lang="ts">
import { Vue, Component, Prop, Emit } from 'vue-property-decorator';

@Component
export default class ChildComponent extends Vue {
  @Prop({ type: String, default: '' }) private value!: string;

  @Emit('input')
  onInput(event: Event) {
    return (event.target as HTMLInputElement).value;
  }
}
</script>

■ After（Composition API版）

// ファイル名: ParentComponent.vue
<template>
  <ChildComponent v-model="childValue" />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

// 親側でchildValueを定義
const childValue = ref('親から渡す値');
</script>

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

<script setup lang="ts">
// modelValueをpropsで受け取り
const props = defineProps<{
  modelValue: string;
}>();

// update:modelValueイベントをemitで親に通知
const emit = defineEmits<{
  (e: 'update:modelValue', value: string): void;
}>();

// inputイベントハンドラー
function onInput(event: Event) {
  emit('update:modelValue', (event.target as HTMLInputElement).value);
}
</script>

✅ 再設計まとめ