Filter Menu in Vuw

Menu.vue

<template>
  <q-list>
    <div class="light-paragraph sansys-menu">
      <q-list-header>
        <div class="menu-search">
          <q-search placeholder="Buscar Módulos" v-model="menuFilter"></q-search>
        </div>
      </q-list-header>
      <menu-item v-for="item in filteredModules" :item="item" :key="item.id || item.name" :config="menuItemConfig"></menu-item>
    </div>
  </q-list>
</template>

<script>
import menuItem from './MenuItem.vue'
import _ from 'lodash';
import { QList, QListHeader, QSearch } from 'quasar'
export default {
  data() {
    return {
      menuFilter: ""
    }
  },
  props: {
    links: {
      type: Array,
      required: true
    },
    contractedHtml: {
      type: String,
      required: true,
      default: '<i class="fa fa-chevron-right"></i>'
    },
    expandedHtml: {
      type: String,
      required: true,
      default: '<i class="fa fa-chevron-down"></i>'
    }
  },
  components: { menuItem, QSearch, QList, QListHeader },
  watch: {
    '$route.path'() {
      Object.keys(this.links).forEach(parentName => { this.setParentVisibilityBasedOnRoute(this.links[parentName]) })
    }
  },
  computed: {
    currentRoutePath() {
      return this.$route.path
    },
    menuItemConfig() {
      return {
        contracted: '<i class="fa fa-chevron-right"></i>',
        expanded: '<i class="fa fa-chevron-down"></i>',
        labelName: 'name',
        nodeName: 'children',
        expandFlagName: 'expanded'
      }
    },
    filteredModules() {
      let filterMatch = (match) => match.toUpperCase().includes(this.menuFilter.toUpperCase());
      let doFilter = (link) => {
        if (filterMatch(link[this.menuItemConfig.labelName])) return true
        if (link[this.menuItemConfig.nodeName] && link[this.menuItemConfig.nodeName].length > 0) return (link[this.menuItemConfig.nodeName] = link[this.menuItemConfig.nodeName].map((childObj) => Object.assign({}, childObj)).filter(doFilter)).length
      }
      return this.links
        .map((linkObj) => Object.assign({}, linkObj))
        .filter(doFilter)
    }
  },
  methods: {
    setParentVisibilityBasedOnRoute(parent) {
      parent.routes.forEach(item => {
        if (this.$route.path === item.route) {
          parent.show = true
          return
        }
      })
    },
    replaceUnderlineToSpace(text) {
      while (text.indexOf('_') !== -1) {
        text = text.replace('_', ' ')
      }
      return text
    },
    showHideToggle(link) {
      link.show = !link.show
    },
  }
}
</script>
<style scoped>
.sansys-menu .q-search {
  padding: 13px 13px 0px 13px;
}
</style>