我的问题：初始化编译时，热榜对应的列表数据发送了请求，也正常更新listData中了，但子组件却没办法渲染，但是点击前端tab后，再点击热榜tab看，其下的列表就正常渲染了，我觉得好像是传给子组件的数据为更新前的空对象，这个怎么解决？
运行到小程序的效果：

初始化时控制台的打印结果：

代码：

<template>
	<view class="hot-list-item">
		<hot-list-item v-for="(item,index) in listData[currentIndex]" 			 :key="index"
				:data="item" :ranking="index+1" />
	</view>
</template>

<script>
import { getTabsListApi,getHotArticleListApi } from "@/api/hot"
	export default {
		data() {
			return {
				//顶部tab栏
				tabsList:[],
				//文章列表
				listData:{},
				//当前tab索引
				currentIndex:0
			};
		},
		created(){
			// 获取tab里列表
			this.getTabsList();
			
		},
		methods:{
			async getTabsList(){
				const {list}=await getTabsListApi();
				this.tabsList=list;
				// 获取文章列表
				this.getHotArticleList();
			},
			onTabChange(tabIndex){
				this.currentIndex= tabIndex;
				this.getHotArticleList();
			},
			async getHotArticleList(){
				// 性能优化：请求的数据应该缓存起来，而不是tabindex改变一次就请求。
				if(!this.listData[this.currentIndex]){
					// 获取当前tab的id
					const id=this.tabsList[this.currentIndex].id;
					const {list}=await getHotArticleListApi(id);
					this.listData[this.currentIndex]=list;
					console.log('updated',this.listData);
				}
			}
		}
	}
</script>`