了解しました！

それでは教科書スタイルで

「3.3 実際のコード比較（簡単な例）」

を丁寧に書きます。

第3章：クラスコンポーネントとComposition APIの考え方の違い

3.3 実際のコード比較（簡単な例）

この節では、クラスコンポーネントスタイルとComposition APIスタイルで同じ機能を実装したコードを比較し、

移行後のイメージをつかみやすくします。

■ 比較する機能

• propsを受け取る
• ボタンをクリックしたらイベントをemitする
• カウンター（count）をインクリメントする
• countの変更をwatchする

■ クラスコンポーネント版（変換前）

// ファイル名: ExampleComponent.vue (クラスコンポーネント版)
<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increment">増やす</button>
  </div>
</template>

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

@Component
export default class ExampleComponent extends Vue {
  @Prop({ default: 0 }) readonly initialCount!: number;

  count: number = this.initialCount;

  @Emit('incremented')
  increment() {
    this.count++;
    return this.count;
  }

  @Watch('count')
  onCountChanged(newVal: number, oldVal: number) {
    console.log(`カウントが${oldVal}から${newVal}に変わりました`);
  }
}
</script>

■ Composition API版（変換後）