Vue Js搜索过滤器

Question

我有一个字符列表，并且我正在使用v-for指令在字符组件中显示那些字符。我也有一个排序过滤器和一个基于其名称的简单搜索。我想在该v-for循环项中添加MixItUp。如何在我的角色组件中安装MixItUp并在我的角色列表中使用过渡效果。

<div class="character-search">
  <input type="text" class="search-hero" v-model="searchHero" placeholder="Search Heros..." />
</div>

    <div v-if="filterHeros.length">
            <ul class="row m-0 characters-list">
              <li v-for="allHero in filterHeros" v-bind:key="allHero.id">
                <router-link :to="{ name: 'characterDetail', params: { id: allHero.id } }">
                  <div class="hero-detail">
                    <div class="hero-title">
                      <h3>{{ allHero.name }}</h3>
                    </div>
                    <div class="hero-tag" v-if="allHero.originalName">
                      <p>{{ allHero.originalName }}</p>
                    </div>
                  </div>
                </router-link>
              </li>
            </ul>
          </div>

计算和数据：

data() {
    return {
      searchHero: ""
    };
  },
computed: {
        //function for filtering heros
        filterHeros() {
          return this.getAllHeros.filter(data => {
            return data.name.toLowerCase().includes(this.searchHero.toLowerCase());
          });
        },

      }