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

Question

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

菜单是使用“树”对象构建的。因此，在添加新系统或删除一个系统时，将更新此树。但是，我现在有一个问题;即使在重新呈现树时添加了新的子组件，它的父组件的类也不会更新。有必要更新它，因为它将menu-element定义为具有子/子系统，因此显示它们。

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

<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>

我猜这与Vue试图提高效率有关，因此不会重新渲染一切。因此，有没有办法强制退回，还是有其他解决方法？

编辑： JSFiddle https://jsfiddle.net/f6s5qzba/