Vue3 这里第一次载入时,插槽不显示

问题描述: 这里第一次载入时,插槽不显示, menuTitle值怎么在载入时得到呢?

<template>
  <div v-if="visible" id='curr-meun' class="meun-out-div">
    <!-- 菜单 导航栏, 点击导航显示不同的 内容区-->
    <div class="nav-title">
      <span v-for="item in props.navData" :key="item.id" :id="item.id" @click="navSelect($event)"
        :class="item.is_active ? 'nav-active' : 'nav-not-active'">
        {{ $t(item.text) }}
      </span>
    </div>
    <!-- 菜单内容区-->
    <!-- 父组件传过来 多个插槽, 且插槽名与 数组 props.navData 的index 相同 -->
    <!-- @click="navSelect($event)"  获取menuTitle值 来    选择显示的插槽 -->
    <div v-if="menuTitle" >
      <!-- 问题是:  这里第一次载入时,  插槽不显示 -->
      <slot :name="menuTitle"></slot> <!-- @click="navSelect($event)"后 插槽可以正常显示-->
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch, onMounted } from 'vue';
const props = withDefaults(defineProps<Props>(), {
// 父组件传过来菜单 参数的格式
  navData: () => [{ id: '1', text: 'fontStyle', is_active: true }], 
  visible: false,
})
// menuTitle 这里已经给了默认值.
const menuTitle = ref<string>(props.navData.findIndex((item) => item.is_active).toString())
function navSelect(event: any) {
  menuTitle.value = event.target.id // 点击的对象id 值,和具名插槽名一致
  for (let i of props.navData) {  // 把点击的,is_active数据更新为true
    if (i.id !== event.target.id) {
      i.is_active = false
    } else {
      i.is_active = true
    }
  }
}
</script>