vue component detect own index among siblings - vue.js

Question

Suppose that I have some Vue components with this relationship. CompA uses a slot.
<CompA>
<CompB />
<CompB />
<CompC />
</CompA>
If I wanted to know which numbered sibling each of these are I could hard code it like:
<CompA>
<CompB i="0" />
<CompB i="1" />
<CompC i="2" />
</CompA>
...while defining an i prop on the definitions of both CompB and CompC.
Is there any method for these components to automatically detect what its own index is in the list of siblings which belong to its parent so that I do not need to hard code these indexes as props? Something that perhaps uses the computed option?
Answers specific to Vue 3 are okay.
Edit
The use case here is for building reusable widgets which conform to ARIA specifications where ARIA attributes need to reference unique IDs.
Example:
<TabContainer tabsWidgetUnique="Tabswidget-1">
<template v-slot:buttons="{ slotProps }">
<TabButton :index="0" :slotProps="slotProps">Button A</TabButton>
<TabButton :index="1" :slotProps="slotProps">Button B </TabButton>
<TabButton :index="2" :slotProps="slotProps">Button C </TabButton>
</template>
<template v-slot:panels="{ slotProps }">
<TabPanel :index="0" :slotProps="slotProps"> Panel A </TabPanel>
<TabPanel :index="1" :slotProps="slotProps"> Panel B </TabPanel>
<TabPanel :index="2" :slotProps="slotProps"> Panel C </TabPanel>
</template>
</TabContainer>
In this case I am manually setting the index of each so that in the components I can say:
<template>
<div
class="tab-panel"
v-show="index === activeTab"
tabindex="0"
:id="tabsWidgetUnique + '-panel-' + index"
:aria-labelledby="tabsWidgetUnique + '-button-' + index"
>
<slot />
</div>
</template>

Answer 1

I don't have any direct answer to your question, but I can offer you a different, and more practical approach.
<template>
<TabContaier :data="tabData" :widget="1" />
</template>
<script>
data() {
return {
tabData: {
buttons: [
{ id: 1, label: Button A},
{ id: 2, label: Button B},
],
panels: [
{ id: 1, content: "<h1>Title 1</h1><p>your content...</p>"},
{ id: 2, content: "<h1>Title 2</h1><p>your content...</p>"},
]
}
}
}
</script>
Tab.vue
<template>
<div class="tab-container">
<div class="buttons">
<TabButton
v-for="button in tabData.buttons"
:key="button.id"
#click="activeTab = button.id"
>{{ button.label }}</TabButton>
</div>
<div class="pabels">
<TabPanel
v-for="panel in tabData.panels"
:key="panel.id"
:class="{'is-visible': activeTab == pabel.id}"
:content="panel.content"
>
</div>
</div>
</template>
<script>
data() {
props: {
tabData: {
type: Object,
default: {}
},
widget: {
type: Number,
default: null
}
},
return {
avtiveTab: 1
}
}
</script>
TabPabel.vue
<div class="panel" v-html="content"></div>
Let me know, if you have any question.

Answer 2

If you don't declare a passed attribute as prop in child component it will be included in the $attrs property like :
this.$attrs.i
in option API or in composition one like:
setup(props,{attrs}){
//then here you could use attrs.i
}