How to dynamically generate and change components in Nuxt.js?

Vue Transition needs <component is="" />, so I want to generate components dynamically because that's impossible to prepare a bunch of components which composed of the same layout with different contents (make it possible by passing props).

⚠︎ just my imagination:

components/
  [word].vue

<script setup>
const words = ['hello', 'thanks', 'happy', 'sorry']

const currentIndex = ref(0)
const currentWord = computed(() => words[currentIndex.value])

---- process to generate dynamic components ?? and resolve component -----

const nextWord = () => {
 currentIndex.value ++
}

</script>

<template>
 <div>

  <button @click="nextWord"></button>

  <transition name="slide">
   <component :is="resolvedCurrentWordComponent" />
  </transition>

 </div>
</template>

Anyone can help? thanks.