Entonces, mientras construyo un sistema de pestañas, aprovecho useSlots y accesorios para crear una variedad de títulos (estos son los títulos de cada pestaña que abro en mi sistema de pestañas), luego creo una propiedad ref llamada selectedTitle en orden para vincular ese título a una clase y agregar css para resaltar la pestaña seleccionada por el usuario:

Este es mi componente:

 <template> <div> <ul class="tag-menu flex space-x-2" :class="defaultTagMenu ? 'default' : 'historic'" role="tablist" aria-label="Tabs Menu" v-if="tabTitles && tabTitles.length" > <li @click.stop.prevent="selectedTitle = title" v-for="title in tabTitles" :key="title" :title="title" role="presentation" :class="{ selected: title === selectedTitle }" > <a href="#" role="tab"> {{ title }} </a> </li> </ul> <slot /> </div> </template> <script> import { ref, onMounted, computed, useSlots, provide } from "vue"; export default { props: { defaultTagMenu: { type: Boolean, default: true, }, }, setup() { const slots = useSlots(); const tabTitles = computed(() => slots.default()[0].children.map((tab) => tab.props.title) ); const selectedTitle = ref(tabTitles.value[0]); provide("selectedTitle", selectedTitle); provide("tabTitles", tabTitles); onMounted(() => { console.log("V3 mounted!"); }); return { tabTitles, selectedTitle, }; }, }; </script>

Este es el escenario: cada vez que cierro una pestaña (por el bien de este ejemplo que funciona y no es parte del problema) quiero cerrar la pestaña y luego lo que espero es que la propiedad de referencia de título seleccionado de mi componente sea reactiva , lo que significa cambiar su valor en consecuencia dependiendo de la matriz tabTitles . Cuando inspecciono el componente, veo que cada vez que cierro una pestaña, la matriz tabTitles cambia, pero no el valor del título seleccionado , siempre tiene el mismo valor sin importar qué.