✅ 6.2 Composition APIにおける watch の使い方

■ 要点（結論）

• Composition APIでは、関数 watch() を使ってデータの変更を監視します。
• クラスコンポーネントの @Watch デコレーターと同じ役割を果たします。

■ 基本構文

watch(
  監視対象,
  (newValue, oldValue) => {
    // 変更時の処理
  },
  { immediate: true, deep: true } // オプション（必要に応じて）
);

• immediate: true → 初期化時にもコールバック実行
• deep: true → オブジェクトや配列の深い変更も検知

■ 使用例：childValue の変更を監視

// ファイル名: ParentComponent.vue
<script setup lang="ts">
//変数のリアクティブ管理のためrefをインポート
import { ref, watch } from 'vue';

//子コンポーネントをインポート
import ChildComponent from './ChildComponent.vue';

// v-model対象の値
const childValue = ref<string>('初期値');

// childValueが変わったらログ出力
watch(childValue, (newVal, oldVal) => {
  console.log('childValue changed from', oldVal, 'to', newVal);
});
</script>

<template>
  <div>
    <p>子の値: {{ childValue }}</p>
    <ChildComponent v-model="childValue" />
  </div>
</template>

✅ 解説

🎯 一言まとめ

Composition APIでは、watch(対象, コールバック) で柔軟にリアクティブなデータ変更を検知できる！