Recursion 在Vue中更新递归组件的父级

我用递归组件制作了一个显示系统及其子系统（理论上可以无限期）的菜单。用户可以添加和删除系统，因此菜单应相应更新

菜单是使用“树”对象构建的。因此，当添加或删除新系统时，此树将更新。但是，我现在有一个问题；即使在树重新命名时添加了新的子组件，其父组件的类也不会更新。有必要对此进行更新，因为它将菜单元素定义为具有子项/子系统，并因此显示它们

因此，在添加新子系统时，会向用户显示：

<div class="">
  <a href="#/Admin/364" class="item">
    <i class=""></i>Testname
    <div class=""></div>
  </a>
</div>

与此相反：

<div class="menu transition visible" style="display: block !important;">
  <a href="#/Admin/364" class="item">
    <i class=""></i>Testname
    <div class=""></div>
  </a>
</div>

将子系统添加到已经有子系统的系统中（因为菜单类已经存在）效果很好，但在将子系统添加到没有子系统的系统中时效果不佳。在这种情况下，菜单最终显示如下：

删除时也会出现“相反”的问题，因为父级仍然具有菜单类：

下面是递归组件的代码：

<template>
<router-link :to="{ name: 'Admin', params: { systemId: id } }" class="item" >
  <i :class="{ dropdown: hasChildren, icon: hasChildren }"></i>{{name}}
    <div :class="{ menu: hasChildren }">
      <systems-menu-sub-menu v-for="child in children" :children="child.children" :name="child.name" :id="child.id" :key="child.id"/>
    </div>
</router-link>
</template>

<script type = "text/javascript" >

export default {
  props: ['name', 'children', 'id'],
  name: 'SystemsMenuSubMenu',
  data () {
    return {
      hasChildren: (this.children.length > 0)
    }
  }
}
</script>

{{name}}
导出默认值{
道具：['name'，'children'，'id']，
名称：“系统菜单子菜单”，
数据（）{
返回{
hasChildren:（this.children.length>0）
}
}
}

我猜这与Vue努力提高效率有关，因此不会重新招标。因此，是否有任何方法强制重新加载，或者是否有其他解决方法

---

编辑：JSFiddle

使用

id

作为道具可能是个坏主意，因为它可能与

的
id
HTML属性冲突：id=“child.id”

。提供一个服务将是一个很大的帮助。这似乎是一个有趣的问题。如果您现在添加了一个JSFIDLE，那么最好提供完整或部分代码来工作，请参阅原始帖子中的编辑。