老师，通过努力，我们已经把tabs的数据显示出来了，但是出现了一个现象，我理解不了，因为您的另外一门课也是通过setup语法糖来实现的，我在您的这个课程里面也使用setup语法糖，但是出现了一个怪现象，麻烦您看看如何理解呢？

子组件代码

<template>
	<view class="tab">
		<view class="tab__box">
			<scroll-view scroll-x="true" class="tab__box__scrollview" scroll-with-animation="true">
				<view class="tab__box__scrollview__content">
					<view class="tab__box__scrollview__content__box">
						<block v-for="(item,index) in tabData" :key="index">
							<view class="tab__box__scrollview__content__box__item">
								{{ item.label || item }}
							</view>
						</block>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script setup>
	import { toRefs } from 'vue'
	const props = defineProps({
		// 1.可以在父组件中定制样式
		// 配置对象
		config: {
			type: Object,
			// default 如果是复制数据类型，那么需要指定 value 为一个函数，通过 返回值的形式执行默认值
			default: () => {
				return {}
			}
		},
		// 2. 可以在父组件中指定数据
		tabData: {
			type: Array,
			default: () => {
				return []
			}
		},
		// 3. 在父组件中指定一个选中项
		defaultIndex: {
			type: Number,
			default: 0
		}
	})
</script>

<style lang="scss">

</style>

父组件代码

<template>
	<view class="container">
		<image class="container__logo" mode="aspectFit" src="@/static/images/logo.png"></image>
		<view class="container__searchbox">
			<my-search placeholderText="uni-app自定义组件"></my-search>
		</view>
		<view class="">
			<my-tabs :tabData="tabData"></my-tabs>
			<!-- 没有下行，导航条的数据就显示不出来，我认为是bug -->
			<view style="display: none;">{{myNumber}}</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue'
	import { getHotTabs } from '@/api/hot.js'

	const myNumber = ref(0)
	let tabData = reactive([])
	const defaultIndex = ref(0)
	let getHotTabsContent = async () => {
		const { data: res } = await getHotTabs()
		tabData = reactive(res.list)
		myNumber.value = 1 //仅仅是为了让tabs显示出来
	}
	getHotTabsContent()
</script>

<style lang="scss" scoped>
	.container {
		background-color: $uni-bg-color;

		&__logo {
			/* 此行可以删除吗？*/
			width: 100%;
			height: 80px;
		}

		&__searchbox {
			padding: 0 16px;
			margin-bottom: $uni-spacing-col-base;
		}
	}
</style>

问题是：如果在父组件中，把一下代码删除掉，那么子组件中的属性tabData就接收不了getHotTabsContent 方法中代码“tabData = reactive(res.list)”代码执行后的数据，老师，请问这个是啥原因啊？如何正确的写代码解决这个问题呢，谢谢！

 ......
 <view style="display: none;">{{myNumber}}</view>
 ......
 myNumber.value = 1 //仅仅是为了让tabs显示出来
  ......