Vue.jsにおける動的コンポーネントの書き方がわかりません。どう書いても思い通りに動作しないのですがどう書いたらいいですか？

Question

実現したいこと

Vue.jsの動的コンポーネントをちゃんと動くようにする。

現在のコード

現在は以下のコードの状態になっているのですが、動的コンポーネントとしてちゃんと切り替えることができていない点を解決したいです。
chromeのデベロッパーツールで見ると、
<button @click="toSecondComponent">SecondComponentにする</button>の部分を押せばちゃんと<component :is="curerntComponent">の部分が<secondcomponnet></secondcomponnet>に変わってくれるのですが、SecondComponnet.vueの中に書いた<template><p>SecondComponentの中身です</p></template>という文字列がページに出てきてくれません。
いろいろ調べても、どう修正したらいいのかわからなかったのでこちらで質問させていただきます。

<!--==================== template ====================-->
<template>
  <button @click="toFirstComponent">FirstComponentにする</button>
  <button @click="toSecondComponent">SecondComponentにする</button>

  <component :is="currentComponent" />
</template>

<!--==================== script ====================-->
<script setup>
import { ref } from 'vue';
import FirstComponent from '../../components/FirstComponent.vue';
import SecondComponent from '../../components/SecondComponent.vue';

const currentComponent = ref('FirstComponent');
const toFirstComponent = () => {
  currentComponent.value = 'FirstComponent';
};
const toSecondComponent = () => {
  currentComponent.value = 'SecondComponent';
};
</script>

<!--==================== style ====================-->
<style scoped lang="scss">

</style>

Answer 1

動的コンポーネントの切り替えがうまくいかない問題を解決するには、<script setup>内でコンポーネントを登録する必要があります。defineComponent と components オプションを使って、FirstComponent と SecondComponent を登録してみましょう。

以下のように修正してみてください：

<!--==================== template ====================-->
<template>
  <button @click="toFirstComponent">FirstComponentにする</button>
  <button @click="toSecondComponent">SecondComponentにする</button>

  <component :is="currentComponent" />
</template>

<!--==================== script ====================-->
<script setup>
import { ref } from 'vue';
import FirstComponent from '../../components/FirstComponent.vue';
import SecondComponent from '../../components/SecondComponent.vue';
import { defineComponent } from 'vue';

const currentComponent = ref('FirstComponent');
const toFirstComponent = () => {
  currentComponent.value = 'FirstComponent';
};
const toSecondComponent = () => {
  currentComponent.value = 'SecondComponent';
};

// コンポーネントの登録
export default defineComponent({
  components: {
    FirstComponent,
    SecondComponent,
  },
});
</script>

<!--==================== style ====================-->
<style scoped lang="scss">

</style>

上記の修正により、FirstComponent と SecondComponent が正しく登録され、動的コンポーネントとして切り替えが正常に機能するはずです。問題が解決されることを願っています。