So while building a tab system I'm taking advantage of useSlots and props in order to create an array of titles (these are the titles of every tab that I open in my tab system), then I create a ref property called selectedTitle in order to bind that title to a class and add css to highlight the tab selected by the user:

This is my component:

<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>

This is the scenario: Whenever I close a tab (for the sake of this example that is working and not part of the problem) I want to close the tab and then what I expect is for the selectedTitle ref property of my component to be reactive, meaning to change it's value accordingly depending on the tabTitles array. When I inspect the component I see that every time I close a tab the tabTitles array change but not the selectedTitle value, is always the same value not matter what.