✅ 6.4 Before/Afterコード例（watchの書き換え）

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

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

const SampleModule = namespace('sampleModule');

@Component({
  components: {
    ChildComponent,
  },
})
export default class ParentComponent extends Vue {
  // v-modelで使うデータ
  private childValue: string = '初期値';

  // Vuexのgetter
  @SampleModule.Getter('textLength') private textLength!: number;
  @SampleModule.Getter('currentRouteName') private currentRouteName!: string;

  // v-modelで受け取った値の変化をwatch
  @Watch('childValue')
  onChildValueChanged(newVal: string, oldVal: string) {
    console.log('Child value changed:', newVal, oldVal);
  }
}
</script>

■ After（Composition API版 <script setup lang="ts">）

// ファイル名: ParentComponent.vue
<script setup lang="ts">
// 必要な関数をインポート
import { ref, watch } from 'vue';
import ChildComponent from './ChildComponent.vue';

// v-modelに使うreactiveな値
const childValue = ref<string>('初期値');

// Getter相当のダミー（本来はinjectや別モジュールで取得想定）
const textLength = ref<number>(0);
const currentRouteName = ref<string>('');

// childValueをwatchで監視して、変更時にログ出力
watch(
  childValue,
  (newVal: string, oldVal: string) => {
    console.log('Child value changed:', newVal, oldVal);
  }
);
</script>

<template>
  <div>
    <p>現在のテキスト長: {{ textLength }}</p>
    <p>現在のルート名: {{ currentRouteName }}</p>
    <ChildComponent v-model="childValue" />
    <button>テキスト更新</button>
  </div>
</template>

✅ Before/Afterまとめ

🎯 ポイントまとめ

• ref<string>型で宣言すると、watchの型推論が素直に効く！
• コールバックのnewVal, oldValにも明示的な型付けをして安全性を高める！
• @Watchデコレータに頼る書き方は完全に廃止、すべてwatch関数ベースに統一！

🎁 例え（t）

クラスコンポーネントは「家の設計図」。

Composition APIは「自由にブロックを組み立てるレゴブロック」。