How to fix it when use v-for?

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?

lmiller1990 / design-patterns-for-vuejs-source-code

How to fix it when use v-for? #10