How to fix it when use v-for?

[jackchoumine]

Hi I watched your video on youtube, it help a lot. But i have some issues.

TabContainer work well like this.

<TabContainer v-model="activeTab">
    <TabHeader tab-id="1"> tab1 </TabHeader>
    <TabHeader tab-id="2"> tab2 </TabHeader>
    <TabHeader tab-id="3"> tab3 </TabHeader>

    <TabContent tab-id="1"> content 1 </TabContent>
    <TabContent tab-id="2"> content 2 </TabContent>
    <TabContent tab-id="3"> content 3 </TabContent>
  </TabContainer>

if i have many tabs i want to use v-for like this:

<TabContainer v-model="activeTab">
    <TabHeader :tab-id="item" v-for="(item, index) in ['1', '2', '3']" :key="index">
      tab{{ item }}
    </TabHeader>
    <TabContent tab-id="1"> content 1 </TabContent>
    <TabContent tab-id="2"> content 2 </TabContent>
    <TabContent tab-id="3"> content 3 </TabContent>
  </TabContainer>

console.log slots:

this first ele is Symbol(Fragment),the slots I actually need is in Symbol(Fragment) children. It does not work as except.
How can i fix it in a nice way?