更改权限时递归组件出现 “Maximum recursive updates exceeded in component <SideBarItem>.”

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

在花裤衩的后台管理项目中，做到更改权限时遇到一直递归渲染 SideBarItem 组件导致超出了最大递归更新

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

更改权限部分的代码

<template>
  <div class="changeRoles-container">
    <el-switch v-model="identify" active-value="super" inactive-value="common" :active-text="'super admin'"
      :inactive-text="'common admin'">
    </el-switch>
  </div>
</template>

<script setup>
const identify = computed({
  get () {
    return store.state.user.roles[0].slice(0, 5)
  },
  set (val) {
    store.dispatch('user/changeRoles', val)
    router.push({ path: '/Permission/ChangeRoles' })
  }
})
</script>

递归渲染部分
```vue
子组件：
<template>
  <div v-if="!item?.hidden" class="sideBar-item-container">
    <template v-if="hasOneShowingChild(item?.children, item)">
      <app-link v-if="onlyOneChild?.meta" :to="resolvePath(onlyOneChild?.path)">
        <el-menu-item :index="resolvePath(onlyOneChild.path)">
          <IconItem :icon="onlyOneChild.meta.icon || (item.meta && item.meta.icon)" />
          <template v-if="onlyOneChild?.meta" #title>
            <span class="onlyOneChild-title" style="font-weight: 600">{{ onlyOneChild.meta?.title }}</span>
          </template>
        </el-menu-item>
      </app-link>
    </template>

    <el-sub-menu v-else ref="subMenu" :index="resolvePath(item.path)">
      <template v-slot:title>
        <IconItem v-if="item.meta" :icon="item.meta && item.meta.icon" />
        <span class="parent-title" v-if="item?.meta">{{ item.meta?.title }}</span>
      </template>
      
      <SideBarItem v-for="child in item.children" :key="child.name" :item="child"
        :base-path="resolvePath(child.path)" />
    </el-sub-menu>
  </div>
</template>

父组件:
<SideBarItem v-for="route in routes" :key="route.name" :item="route" :base-path="route.path" />
<script>
import SideBarItem from './SideBarItem.vue'
  setup () {
    const permissionState = useState('permission', ['routes'])
    return {
      variables,
      ...settingsState,
      ...permissionState,
      activeMenu
    }
  }
}


###### 运行结果及报错内容 

```javascript
javascript
Maximum recursive updates exceeded in component <SideBarItem>. 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.