VueJS-动态过滤v-for中的项目

Question

给出以下模板：

<template>
  <v-list dark class="ap-sidebar-applist">
    <v-list-group
      ref="topLevelItems"
      class="ap-sidebar-group"
      v-for="(item, i) in visibleItems"
      :key="i"
      :prepend-icon="item.icon"
      :value="item.visible"
      @click="onClick(item)"
    >
      <v-list-tile slot="activator">
        <v-list-tile-title>{{ item.title }}</v-list-tile-title>
      </v-list-tile>
      <div v-if="item.children">
        <v-list-tile class="sub-list"
          v-for="(subMenu, j) in item.children"
          :key="j"
          @click="onClick(subMenu, true)"
          :class="subMenu.isActive?'v-list__group__header--active':''"
        >
          <v-list-tile-action>
            <v-icon>{{ subMenu.icon }}</v-icon>
          </v-list-tile-action>
          <v-list-tile-title>{{ subMenu.title }}</v-list-tile-title>
        </v-list-tile>
      </div>
    </v-list-group>
  </v-list>
</template>

以及以下数据

export default {
  name: 'TheLeftSidebarAppList',
  props: {
    visible: Boolean,
  },
  data: () => ({
    activeChild: null,
    items: [
      {
        icon: 'group',
        title: 'Users',
        routeTo: 'UserEdit',
        method: null,
        superOnly: false,
        taCanView: true,
        tmCanView: true,
        visible: true,
        children: [
          {
            icon: 'send',
            title: 'Send Quick Alert',
            method: 1,
            isActive: false,
            superOnly: false,
            taCanView: true,
            tmCanView: true,
          },
        ],
      },
      {
        icon: 'domain',
        title: 'Tenants',
        routeTo: 'TenantEdit',
        method: null,
        superOnly: false,
        taCanView: true,
        tmCanView: true,
        visible: false,
        children: [
          {
            icon: 'fingerprint',
            title: 'Manage Biometrics',
            routeTo: 'TenantBiometricEdit',
            method: 1,
            isActive: false,
            superOnly: false,
            taCanView: false,
            tmCanView: true,
          },
          {
            icon: 'email',
            title: 'Manage Templates',
            routeTo: 'TenantTemplateEdit',
            method: 1,
            isActive: false,
            superOnly: false,
            taCanView: false,
            tmCanView: true,
          },
        ],
      },
      {
        icon: 'assessment',
        title: 'Reports',
        routeTo: 'WorkspaceReports',
        method: null,
        superOnly: false,
        taCanView: true,
        tmCanView: true,
        visible: false,
      },
      {
        icon: 'settings',
        title: 'Server Configuration',
        routeTo: null,
        method: 2,
        superOnly: false,
        taCanView: false,
        tmCanView: true,
        visible: false,
      },
      {
        icon: 'trending_up',
        title: 'Performance',
        routeTo: 'WorkspacePerformance',
        method: null,
        superOnly: true,
        visible: false,
      },
    ],
  }),
  computed: {
    ...mapGetters('app', {
      myRole: 'getTopRole',
      stickyTenant: 'getStickyTenant',
    }),
    visibleItems() {
      return this.items.filter(item => this.isVisible(item));
    },
  },
  methods: {
    isVisible(item) {
      let ret = true;
      if (item.superOnly && this.myRole.roleCode !== 'ROLE_SUPER_ADMIN') {
        ret = false;
      }
      if (!item.taCanView && this.myRole.roleCode === 'ROLE_TENANT_ADMIN') 
      {
        ret = false;
      }
      if (!item.tmCanView && this.myRole.roleCode === 'ROLE_TENANT_MAINT') 
      {
        ret = false;
      }
      return ret;
    },
  },

我需要通过运行Tenant来过滤掉顶层isVisible()菜单项的子元素。我的第一个想法是使用计算属性，但是由于您无法将参数传递给计算属性，因此我无法动态传递父项以获取子项列表并对其进行过滤。我的另一个想法是创建一个具有已过滤的Tenant子项的计算属性，但是由于您无法将参数传递给计算属性，因此我无法知道何时Tenant菜单正在呈现。

如何根据需要动态过滤子菜单项？