Vue.js 狀況：onMount 更新變數後，畫面沒有進行變動

狀況

以下是我的 Vue code

<script setup>
let menuTabs = ref([
	{name: "會員", checked: false},
	{name: "客戶", checked: false},
	{name: "站點", checked: false},
])



let selectedMember = ref({name: null, id: null})
let selectedCustomer = ref({name: null, id: null})
let selectedStation = ref({name: null, id: null})

/** 根據當前選擇的 tab 來決定顯示的內容 */
let selectedData = computed(function(){
	if(menuTabs.value[0].checked){
		return selectedMember.value
	}
	if(menuTabs.value[1].checked){
		return selectedCustomer.value
	}
	if(menuTabs.value[2].checked){
		return selectedStation.value
	}
	return {name: null, id: null}
})

/** 切換 menu tab */
function changeMenuTab(index){
	for(let i = 0; i < menuTabs.value.length; i++){
		menuTabs.value[i].checked = i == index
	}
}

</script>
<template>
	<div class="tabs">
  		<div role="tablist" aria-label="Sample Tabs">
			<button v-for = "(tab, index) in menuTabs"
				role="tab"
				:aria-selected="tab.checked"
				:aria-controls="`panel-${index}`"
				:id="`tab-${index}`"
				:tabindex="tab.checked ? 0 : -1" 
				@click="changeMenuTab(index)"
				v-text="tab.name"/>
		</div>
	</div>


	<div class="tab-content">
		<div>
			{{selectedData.name}}
			<template v-if="!!selectedData.id">
				（{{selectedData.id}}）
			</template>
		</div>


		<div v-for = "(tab, index) in menuTabs"
			role="tabpanel"
			:aria-labelledby="`tab-${index}`"
			:id="`panel-${index}`"
			:aria-hidden="!tab.checked"
			:tabindex="0"
			:hidden="!tab.checked">
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus, congue vel laoreet ac, dictum vitae odio.
		</div>
	</div>
</template>