✅ 6.1 クラスコンポーネントでの watch の書き方（@Watchデコレーター）

■ 要点（結論）

• クラスコンポーネントでは、@Watch デコレーターを使ってリアクティブな変数の変更を監視します。
• Composition API の watch() 関数の代わりになります。

■ 基本構文（@vue/composition-api ではなく class-style）

@Watch('監視対象のプロパティ名', { immediate: true, deep: true })
onXXXChanged(newVal: 型, oldVal: 型) {
  // 変更時の処理
}

• immediate: true → 初期化時にも呼ばれる
• deep: true → ネストオブジェクトの変更も検出する（Vue2では必要）

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

// ファイル名: ParentComponent.vue
<script lang="ts">
import { Vue, Component, Watch } from 'vue-property-decorator';

@Component
export default class ParentComponent extends Vue {
  // 子コンポーネントとバインドされるデータ
  private childValue: string = '初期値';

  // childValueの変更を監視する
  @Watch('childValue')
  onChildValueChanged(newVal: string, oldVal: string) {
    console.log('childValue changed from', oldVal, 'to', newVal);
  }
}
</script>

✅ 解説

🎯 一言まとめ

クラスコンポーネントでは、@Watch('プロパティ名') を使えば、Composition API の watch() と同じ効果を得られる！