Tab not automatically activated in SFC

[cgrisar]

Environment: vue3, composition API

Using Tabs, Tab in a SFC component, declared locally, same issue if Tabs, Tab are declared globally

       <Tabs   nav-item-link-class="font-medium rounded-full" 
                nav-item-class="flex items-center justify-center w-8 h-8"
                nav-item-link-active-class="p-1 text-red-900 bg-red-900 bg-opacity-10 ring-2 ring-red-900">
                <Tab v-for="vintage in activeVintages" v-bind:key="vintage.id" :name="vintage.vintage.slice(-2)" 
                        panel-class="flex flex-col pt-2 space-x-4 leading-relaxed border-0 font-sm xl:flex-row">
                        <div class="prose xl:w-1/2">
                            <p>
                                {{ vintage.tasting_note }}
                            </p>
                        </div>
                        <div class="w-1/2">

                        </div>
                </Tab>
        </Tabs>

Tab is created but not automatically active. I have to click on the tab to make it active

Remark: a tab is automatically activated when I use it directly in a .html file iso .vue file

First image: page shown when refreshed

Second image: tab is activated when clicked upon

[cgrisar]

I just found out that if "activeVintages" is a static array, that the component works as supposed.

The tab is not activated when activeVintages is loaded in Githubissues.

Githubissues is a development platform for aggregating issues.