Vue3でループ中にコンポーネント出力してやんよ!!!

# CompA.vue
<template lang="pug">
h1
    Comp A
</template>

# CompB.vue
<template lang="pug">
h1
    Comp B
</template>

# App.vue
<script setup lang="ts">

import CompA from './CompA.vue'
import CompB from './CompB.vue'
import { ref } from 'vue'

const infoTabs = ref(null)

// 出力コンポーネント
const lookup:object = {
    CompA,
    CompB
  }

// タブ出力情報（タブキー, アイコン, タイトル, コンポーネントタグ）
const tab_menu:object =
    [
        {name: 'a', icon: 'fa-solid fa-user', title: 'タブA', lookup : CompA },
        {name: 'b', icon: 'fa-solid fa-location-pin', title: 'タブB', lookup : CompB },
    ];
</script>

<template lang="pug">
div
    v-tabs(v-model="infoTabs" bg-color="indigo" show-arrows)
        v-tab(v-for="list in tab_menu" :value="list.name" :key="list")
            font-awesome-icon(:icon="list.icon" :title="list.title")
        v-card-text
            v-window(v-model="infoTabs" v-for="tab in tab_menu" :key="tab")
                v-window-item( :value="tab.name")
                    component(:is="tab.lookup")
</template>