Unable to change tabs programmatically on Vue3

[JameszLau]

I am using Vue3 and I would like to change the tab value programmatically so I bound the Tab value to a reactive variable which changes successfully and is aligned with the TabsTrigger values.

for example:

<script setup> const currentTab = ref('pomodoro'); < some watcher function to update the currentTab var which works to update it just fine, request if needed!> </script> Pomodoro Short Break Long Break

1. using this makes the tab completed unselected on the first render and i have to click on one of the tabs to show its content
2. when the currentTab value is updated programatically, the tabs remain as it was (eg. currentTab changed to 'shortbreak', but the actual tab is still on 'pomodoro')

How can i go about resolving this? I truly appreciate any help!