Как можно на VUE реализовать простенький фильтр?
Добавить два свойства - массив, описывающий типы, и тип, данные которого надо отобразить:

data: () => ({
  types: [
    { id: null, name: 'Все' },
    { id: ..., name: '...' },
    { id: ..., name: '...' },
    ...
  ],
  active: null,
  ...
Дать пользователю возможность выбирать тип отображаемых данных:

<button v-for="n in types" @click="active = n.id">{{ n.name }}</button>

<!-- или -->

<select v-model="active">
  <option v-for="n in types" :value="n.id">{{ n.name }}</option>
</select>

<!-- или -->

<label v-for="n in types">
  <input type="radio" name="type" :value="n.id" v-model="active">
  {{ n.name }}
</label>
Сделать вычисляемое свойство, которое будет представлять отфильтрованные данные:

computed: {
  filteredItems() {
    const { items, active } = this;
    return active ? items.filter(n => n.type === active) : items;
  },
  ...
Показать результат фильтрации:

<tr v-for="(n, i) in filteredItems">
  ...
https://jsfiddle.net/jhekutv3/
Можно через computed сделать динамический список для таблицы. И там сгенерировать список по текущему фильтру....
computed: {
    list () {
        let arr = this.api_list
        let filtered = arr.filter(el => el.type === this.type)

       return filtered
    }
}
...