Nuxt3でコンポーネントを動的に変更する

<script setup>
const MyButton = resolveComponent('MyButton')
</script>

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

<script setup>
const MyButtonTxt = 'MyButton'
const MyButton = resolveComponent(MyButtonTxt)
</script>

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

[Vue warn]: Failed to resolve component: MyButton
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.

import { defineNuxtConfig } from 'nuxt3'

export default defineNuxtConfig({
  components: {
    global: true,
    dirs: ['~/components']
  },
})

<script setup>
const MyButtonTxt = 'MyButton'
</script>

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