vue已超过最大递归更新数

问题遇到的现象和发生背景

我要动态递归菜单，就是sideItem组件进行递归,然后就出现了问题

问题相关代码，请勿粘贴截图

这个是父组件

<template>
    <div class = "sideArea">
     <Logo></Logo>
     <el-scrollbar wrap-class="scrollbar-wrapper">
     <el-menu
      active-text-color="#ffd04b"
      background-color="#304156"
      text-color="#fff"
      :default-active="activeMenu"
      unique-opened
      :collapse="isCollapse"
      :collapse-transition="false"
      mode="vertical"
      router
     >
     <Sidebar-item
       v-for=" (route,index) in allowMenuRoutes"
       :key="route.path+index"
       :item="route"
       :base-path="route.path"
     />
    
     </el-menu>
     </el-scrollbar>
    </div>
</template>
<script lang="ts">
import { defineComponent,computed } from 'vue'
import Logo from './Logo.vue'
import SidebarItem from './SideBarItem.vue'
import {useRouter,useRoute} from 'vue-router'
import type{RouteRecordRaw} from 'vue-router'
import {useStore} from 'vuex'
import {decreaseAllRoutes} from '@/utils/algorithm/index'

export default defineComponent({
    name:'sideBarVue',
    components:{
      Logo,
      SidebarItem
    },
    setup() {
        const store = useStore()
        const allRoutes = useRouter().options.routes as Array<any>
        const route = useRoute()  
  // 现在激活的路由
        const activeMenu = computed(() => {
        const { meta, path } = route;
        return path;
    });

        let finallRoutes =computed( ()=>{
             let routerFilterArray = decreaseAllRoutes(allRoutes)
            return  judgeRoutes(routerFilterArray)
        })
    // 这个是筛选最终的登录者可去的路由  
        const judgeRoutes = (routerFilterArray:Array<RouteRecordRaw>) =>{
            const authorityRoute:Array<string> =  store.getters.accessibleRoutes
             routerFilterArray = routerFilterArray.filter(
                item=>{
                    if(item.children){
                        item.children = judgeRoutes(item.children)
                        // !!强制转化为Boolean 长度为0 说明这个已经没了
                        return !!item.children.length
                    }
                    return authorityRoute.includes(item.path)
                }
            )
            return routerFilterArray
        }
        const allowMenuRoutes=finallRoutes
        // watch(()=>store.getters.accessibleRoutes,(info)=>{
        //  console.log("i")
        // })
       return {
           allowMenuRoutes,
           activeMenu,
           isCollapse:computed(()=>!store.getters.sidebar.open)
       }
      


    },
})
</script>

这是子组件的

<template>
    <div>
        <template  
        v-if="hasOneShowingChild(item.children, item)"
        
        > 
        <el-menu-item
            :index="onlyOneChild.path"
            :key="onlyOneChild.path"
        >
           <el-icon v-if="onlyOneChild.meta.icon"><component :is="onlyOneChild.meta.icon"></component> </el-icon>
          <template #title>
            <span>{{ onlyOneChild.meta.title }}</span>
          </template>
        </el-menu-item>
    </template>
    <el-sub-menu v-else ref="subMenu" :index="item.path"  :key="item.path" popper-append-to-body>
      <template #title>
     <el-icon><component :is="item.meta.icon"></component></el-icon>
        <span >{{item.meta.title}}</span>
      </template>
      <Sidebar-item
          v-for="child in item.children"
          :key="child.path"
          :is-nest="true"
          :item="child"
          :base-path="child.path"
          class="nest-menu"
      />
    </el-sub-menu>
    </div>
</template>
<script lang="ts">
import path from 'path'
import { defineComponent,PropType,ref,computed } from 'vue'
import {RouteRecordRaw} from 'vue-router'
import {useStore} from 'vuex'
export default defineComponent({
    name:'SidebarItem',
    props:{
      item:{
          type:Object, //Object as PropType<RouteRecordRaw>,
          required:true
      },
      isNest:{
          type:Boolean,
          default:false
      },
      basePath:{
          type:String,
          default:""
      }

    },
    
    setup() {
    const onlyOneChild = ref<RouteRecordRaw | any>({} as any);
    function hasOneShowingChild(
        children: Array<RouteRecordRaw | any> = [],
        parent: RouteRecordRaw
    ) {
        // 孩子长度为1,直接展示子集
      if (children.length === 1) {
        // 上面申明为数组，所以要取值[0]
        onlyOneChild.value = {...children[0]}
        return true;
      }
        if (children.length===0) {
          // 当这个孩子长度为0 的时候，到底了
        onlyOneChild.value = {...parent, noShowingChildren: true};
        return true;
      }
      return false;
    }

    return {hasOneShowingChild, onlyOneChild};
    },
})
</script>

运行结果及报错内容

4runtime-core.esm-bundler.js:6743 [Vue warn]: Maximum recursive updates exceeded in component . This means you have a reactive effect that is mutating its own dependencies and thus recursively triggering itself. Possible sources include component template, render function, updated hook or watcher source function.

我的解答思路和尝试过的方法

我添加了key值什么的，这个系统刚进去的时候都没有报错，但是就是我切换菜单权限的时候在线，动态菜单路由的时候就产生了报错

我想要达到的结果