Vue3 and foundation : how to make vertical tabs from an array of object?

Question

I am starting with Foundation and rather new to vuejs also. I try to make a tabbed view based on an array of objects namely events (nothing to do with event in the computer science acception but event in common life)

I managed to have the ul on the left and the panel on the right but in the panel all the tab contents are displayed. I think it is due to the fact that I don't know how to create the href of the a link properly.

Here is my code

<div class="grid-container fluid">
    <div class="grid-x">
        <div class="cell medium-3">
            <ul class="vertical tabs" data-tabs id="example-tabs">
                <li v-for="(event, index) in props.events" key="index" class="tabs-title " :class="index==0? 'is-active': ''"><a
                        href="`#panel_${index}`" aria-selected="true">{{ event.label }}</a></li>
            </ul>
        </div>
        <div class="cell medium-9">
            <div class="tabs-content vertical" data-tabs-content="example-tabs">
                <div v-for="(event, index) in props.events" key="index" class="tabs-panel" :class="index==0? 'is-active': ''"
                    id="`panel_${index}`">

                    <p>Check me out! I'm a super cool Tab panel with text content!</p>
                </div>

            </div>
        </div>
    </div>
</div>

Hereafter a picture of what is displayed in the browser

With this code, when inspecting the document in the browser, all the href are the same exactly as writen in the code. In fact I don't know how to convert e.g for index=4 index into href="#panel_4" . Thank in advance for help