I'm having trouble updating a ref within a watch function. My goal is to monitor changes in the length of an array, and if the new length is less than the old one, I want to update a specific ref called selectedTitle.
setup() {
const slots = useSlots();
const tabTitles = computed(() =>
slots.default()[0].children.map((tab) => tab.props.title)
);
const tabTitlesLength = computed(() => tabTitles.value.length);
let selectedTitle = ref(tabTitles.value[0]);
provide("selectedTitle", selectedTitle);
provide("tabTitles", tabTitles);
watch(tabTitlesLength, (currentValue, oldValue) => {
if (currentValue < oldValue) {
selectedTitle = tabTitles.value[0];
} else {
console.log("outside if statement");
}
});
return {
tabTitles,
selectedTitle,
tabTitlesLength,
};
},
Unfortunately, the selectedTitle ref does not seem to update as expected. It always retains the last value it received when the computed property (tabTitles) changes. I'm puzzled by this behavior since everything else appears to be functioning correctly.