element plus sub-menu get wrong data

Then an error was reported:

i use a element plus menu as top navigation bar,and a menu as side bar,i want to implement when i click on the top navigation bar,change the side bar and jump to new page, at once side bar open the first menu.

const changeNavBar = (val: string) => {
  navBarSelect.value = val
  router.push(`/${val}`)
  nextTick(() => {
    siderBar.value.open(menuInfo[val][0].children[0].pathName)
  })
}

 <el-menu
          :router="true"
          :default-active="$route.name"
          class="sideBar"
          :collapse="isCollapse"
          ref="siderBar"
        >
          <template v-for="item in menuInfo[navBarSelect]">
            <el-sub-menu v-if="item.children" :index="item.title">
              <template #title>
                <el-icon><component :is="item.icon" /></el-icon>
                <span class="menuTitle">{{ item.title }}</span>
              </template>
              <el-menu-item v-for="v in item.children" :index="v.pathName">{{
                v.title
              }}</el-menu-item>
            </el-sub-menu>
            <el-menu-item v-else :index="item.pathName">
              <template #title>
                <el-icon><component :is="item.icon" /></el-icon>
                <span class="menuTitle">{{ item.title }}</span>
              </template>
            </el-menu-item>
          </template>
          <div class="sideBarFold" @click="changeCollapse">
            <el-icon :size="25"><Fold /></el-icon>
          </div>
        </el-menu>

const menuInfo = reactive<Record<string, Array<any>>>({
  appAnalyse: [
    {
      title: '数据总览',
      icon: 'PieChart',
      children: [
        {
          pathName: 'OverView',
          title: '工作台'
        }
      ]
    },
    {
      title: '信息管理',
      icon: 'Histogram',
      children: [
        {
          pathName: 'GameManageView',
          title: '游戏管理'
        },
        {
          pathName: 'PlayerManageView',
          title: '玩家管理'
        }
      ]
    },
    {
      title: '数据分析',
      icon: 'DataAnalysis',
      children: [
        {
          pathName: 'KeepView',
          title: '留存分析'
        },
        {
          pathName: 'UserTrendView',
          title: '用户趋势'
        }
      ]
    }
  ],
  appManage: [
    {
      title: '基本信息',
      icon: 'PieChart',
      children: [
        {
          pathName: 'GameBaseInfo',
          title: '基本信息'
        }
      ]
    },
    {
      title: '事件管理',
      icon: 'PieChart',
      pathName: 'EventManage'
    }
  ]
})

Then an error was reported:

Uncaught (in promise) TypeError: Cannot destructure property 'indexPath' of 'subMenus.value[index]' as it is undefined.

While I was debugging, The data was found to be wrong:

const open = (index) => {
        const { indexPath } = subMenus.value[index];
        indexPath.forEach((i) => openMenu(i, indexPath));
      };

this is debbuger info,this should be 基本信息:…,事件管理:….,but

EventManage: {index: 'EventManage', indexPath: ComputedRefImpl, active: {ComputedRefImpl}

数据总览: {index: '数据总览', indexPath: ComputedRefImpl, active:{ComputedRefImpl}

i want to now why,and how to solve