Vue3.2 setup script で動的にコンポーネントを読み込む方法

Question

Vue 3.2 から提供されている setup script を使って動的にコンポーネントを読み込みたいのですが、文字列指定ではいけず、オブジェクト自体を渡す必要があるようです。この場合、Ajax などで Web API から JSON データを受け取り、それを元に動的にコンポーネントを表示させる時に、面倒です。何かいい方法はありますか？

<script setup lang="ts">
import ItemA from './ItemA.vue';

// Web API から受け取った JSON 的なもの
const items = [
  {
    id: 1,
    type: ItemA // OK
  },
  {
    id: 2,
    type: 'ItemA' // NG
  }
];
</script>

<template>
  <component
    :is="item.type"
    v-for="item in items"
    :key="item.id"
  />
</template>

v-if などで分岐する方法も検討しましたが、コンポーネントの種類が増えると template が煩雑になることを懸念しています。

従来の Options API 表記ですと Component 利用を明示するため文字列でも問題なく表示できます。

<script lang="ts">
import ItemA from './ItemA.vue';

export default {
  components: {
    'ItemA': ItemA
  },
  data() {
    return {
      items: [
        {
          id: 1,
          type: 'ItemA' // OK
        },
        {
          id: 2,
          type: 'ItemA'
        }
      ]
    }
  }
}
</script>

<template>
  <div>
    <component
      :is="item.type"
      v-for="item in items"
      :key="item.id"
    />
  </div>
</template>