vue-property-decoratorをsetup()を用いたcomposition apiに置き換える

この記事は完全に自分用のメモ記事なのできっと助けになりません。
vue-property-decoratorからsetup()を用いたcomposition apiへの移行表を以下につらつらと残
しています。

さらに、この記事は以下の記事の例をchatGPTにお願いして、setup()に書き換えているだけなので信憑性はとても怪しいです。
https://qiita.com/simochee/items/e5b77af4aa36bd0f32e5

コンポーネントの定義

• vue-property-decorator

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

@Component
export default class SampleComponent extends Vue {}
</script>

• setup()

<script lang="ts">
import { defineComponent } from '@nuxtjs/composition-api';

export default defineComponent({
  name: 'SampleComponent',
  setup() {
    // setup code here
  }
});
</script>

Data

• vue-property-decorator

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

@Component
export default class SampleComponent extends Vue {
  name = 'simochee';
  age = 21;
}
</script>

• setup()

<script lang="ts">
import { defineComponent, ref } from '@nuxtjs/composition-api';

export default defineComponent({
  name: 'SampleComponent',
  setup() {
    const name = ref('simochee');
    const age = ref(21);

    return {
      name,
      age
    }
  }
});
</script>

Computed

• vue-property-decorator

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

@Component
export default class SampleComponent extends Vue {
  score = 55;

  get triple() {
    return this.score * 3;
  }
}
</script>

• setup()

<script lang="ts">
import { defineComponent, computed, ref } from '@nuxtjs/composition-api';

export default defineComponent({
  name: 'SampleComponent',
  setup() {
    const score = ref(55);

    const triple = computed(() => {
      return score.value * 3;
    });

    return {
      score,
      triple
    }
  }
});
</script>

Method

• vue-property-decorator

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

@Component
export default class SampleComponent extends Vue {
  onClickButton() {
    // ボタンが押されたときの処理
  }
}
</script>

• setup()

<script lang="ts">
import { defineComponent } from '@nuxtjs/composition-api';

export default defineComponent({
  name: 'SampleComponent',
  setup() {
    const onClickButton = () => {
      // ボタンが押されたときの処理
    };

    return {
      onClickButton
    }
  }
});
</script>

ライフサイクルフック

• vue-property-decorator

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

@Component
export default class SampleComponent extends Vue {
  mounted() {
    // コンポーネントがマウントされたときの処理
  }

  beforeDestroy() {
    // コンポーネントが破棄される直前の処理
  }
}
</script>

• setup()

<script lang="ts">
import { defineComponent, onMounted, onBeforeUnmount } from '@nuxtjs/composition-api';

export default defineComponent({
  name: 'SampleComponent',
  setup() {
    const mounted = () => {
      // コンポーネントがマウントされたときの処理
    };

    const beforeUnmount = () => {
      // コンポーネントが破棄される直前の処理
    };

    onMounted(mounted);
    onBeforeUnmount(beforeUnmount);
  }
});
</script>

@component

• vue-property-decorator

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

@Component({
  components: {
    AppButton,
    ProductList
  },
  directives: {
    resize
  },
  filters: {
    dateFormat
  },
  mixins: [
    PageMixin
  ]
})
export default class SampleComponent extends Vue {
}
</script>

• setup()

<script lang="ts">
import { defineComponent } from '@nuxtjs/composition-api';
import AppButton from '@/components/AppButton.vue';
import ProductList from '@/components/ProductList.vue';
import resize from '@/directives/resize';
import { dateFormat } from '@/filters';
import PageMixin from '@/mixins/PageMixin';

export default defineComponent({
  name: 'SampleComponent',
  components: {
    AppButton,
    ProductList
  },
  directives: {
    resize
  },
  filters: {
    dateFormat
  },
  mixins: [
    PageMixin
  ],
  setup() {
    // ここにsetup()関数の処理を記述します
  }
});
</script>

@Props

• vue-property-decorator

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

@Component
export default class SampleComponent extends Vue {
  @Prop({ type: String, required: true })
  userName: string;

  @Prop({ type: Boolean, defualt: false })
  isVisible: boolean;
}
</script>

• setup()

<script lang="ts">
import { defineComponent, defineProps } from '@nuxtjs/composition-api';

export default defineComponent({
  name: 'SampleComponent',
  props: defineProps({
    userName: {
      type: String,
      required: true
    },
    isVisible: {
      type: Boolean,
      default: false
    }
  }),
  setup(props) {
    // props.userName と props.isVisible を使用した処理を記述します
  }
});
</script>

@Watch

• vue-property-decorator

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

@Component
export default class SampleComponent extends Vue {
  isLoading = false;
  profile = {
    name: 'simochee',
    age: 21
  };

  @Watch('isLoading')
  onChangeLoadingStatus() {
    // ローディング状態が切り替わったときの処理
  }

  @Watch('profile.age', { immediate: true })
  onChangeProfileAge() {
    // プロフィールの年齢が変更されたときの処理
  }
}
</script>

• setup()

<script lang="ts">
import { defineComponent, defineProps, ref, watch } from '@nuxtjs/composition-api';

export default defineComponent({
  props: {
    userName: {
      type: String,
      required: true,
    },
    isVisible: {
      type: Boolean,
      default: false,
    },
  },
  setup(props) {
    const isLoading = ref(false);
    const profile = ref({ name: 'simochee', age: 21 });

    watch(isLoading, (newVal) => {
      // ローディング状態が切り替わったときの処理
    });

    watch(profile.value.age, (newVal) => {
      // プロフィールの年齢が変更されたときの処理
    }, { immediate: true });

    return {
      isLoading,
      profile,
    };
  },
});
</script>

• vue-property-decorator

• setup()