En php, estoy acostumbrado a iterar los botones de arranque que hacen eco de las variables dentro de los identificadores de los elementos, algo así como
<button id="btn<? echo $i; ?>"/>
lo hago para la identificación del elemento, data-bs-target, aria-controls y aria-labelledby cuando uso los botones de acordeón, sin embargo, no sé cómo pasar el accesorio dentro de los atributos de esos elementos.
Esto es lo que tenía en mente para el componente.
<script setup>
defineProps(['id','company','dates','position','desc'])
</script>
<template>
<div class="experience">
<div class="accordion-item">
<h2 class="accordion-header" id="heading{{id}}">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse{{id}}" aria-expanded="false" aria-controls="collapse{{id}}">
<div class="col-3"> {{company}} </div>
<div class="col-5"> {{dates}} </div>
<div class="col-3"> {{position}} </div>
</button>
</h2>
<div id="collapse{{id}}" class="accordion-collapse collapse" aria-labelledby="heading{{id}}" data-bs-parent="#accordionExample" style="">
<div class="accordion-body">
<p> {{desc}} </p>
</div>
</div>
</div>
</div>
</template>
<style scoped>
</style>
Puede usar el atributo dinámico agregando dos puntos antes : o v-bind: y use la cadena de plantilla para concatenar la cadena estática con la id dinámica
Por ejemplo
:id="`heading-${id}`"
<script setup>
defineProps(['id','company','dates','position','desc'])
</script>
<template>
<div class="experience">
<div class="accordion-item">
<h2 class="accordion-header" :id="`heading-${id}`">
<button class="accordion-button" type="button" data-bs-toggle="collapse" :data-bs-target="`#collapse-${id}`" aria-expanded="false" :aria-controls="`collapse-${id}`">
<div class="col-3"> {{company}} </div>
<div class="col-5"> {{dates}} </div>
<div class="col-3"> {{position}} </div>
</button>
</h2>
<div :id="`collapse-${id}`" class="accordion-collapse collapse" :aria-labelledby="`heading-${id}`" data-bs-parent="#accordionExample" style="">
<div class="accordion-body">
<p> {{desc}} </p>
</div>
</div>
</div>
</div>
</template>
<style scoped>
</style>
Para obtener más detalles, puede echar un vuezo a la vinculación de atributos en los documentos de Vue