component does not update upon prop change - vue.js

Question

I am new to vue and a bit unaware of concepts.
I am trying to implement a reusable tab that I found on the internet and also using CDN instead of CLI for certain reasons. My vue version is v3.2.36
I am mostly using react but also curious about vuejs and wanted to learn more however instead of reading documents I like to dive into code and try to implement things myself by reading online, but mostly I saw people writing solutions on v2 instead of v3
Also would you please guide me if any of my code have better practices?
my tabs component:
export default {
data() {
return { tabs: [] };
},
mounted() {
this.tabs = this.$slots.default();
},
methods: {
selectTab(selectedTab) {
this.tabs.forEach(tab => {
console.log(tab)
tab.isActive = (tab.props.name == selectedTab.props.name);
tab.test = "test aktif"
});
}
},
template: `
<div>
<div class="tabs">
<ul>
<li v-for="tab in tabs" :class="{ 'is-active': tab.isActive }">
<a :href="tab.href" #click="selectTab(tab)">{{ tab.props.name }}</a>
</li>
</ul>
</div>
<div class="tabs-details">
<slot></slot>
</div>
</div>
`
}
my tab component
export default {
props: {
name: { required: true },
selected: { default: false },
test: ""
},
data() {
return {
isActive: false
};
},
computed: {
href() {
return '#' + this.name.toLowerCase().replace(/ /g, '-');
}
},
mounted() {
console.log("test")
this.isActive = this.selected;
},
updated() {
console.log("updated")
},
template: `
<div>{{isActive}}
<div v-show="isActive"><slot></slot></div>
</div>
`
}
my html :
<tabs>
<tab name="Services" :selected="true">
<h1>What we do</h1>
</tab>
<tab name="Pricing">
<h1>How much we do it for</h1>
</tab>
<tab name="About Us">
<h1>Why we do it</h1>
</tab>
</tabs>

Answer 1

the props initialization had some issues
use
test: { default: "" },
instead of test: ""
you can find the fixed version here: https://codesandbox.io/s/old-pond-opqg4v?file=/src/components/Tab.vue