Nuxt.jsでFilterで絞り込みした後にSortしたい

Question

前提・実現したいこと

個人的にNuxt.jsでアプリの開発をしています。

発生している問題

起きている現象は以下の通りです。
①絞り込み検索をした後に価格の安い順に並び替えすると同じ値の物が追加で表示されてしまう。
例）
ぶどうだけで絞り込みすると

ぶどう　2房 200円
ぶどう　1房 100円

という結果が表示される。この後に安い順で並べ替えすると

ぶどう　1房 100円
ぶどう　2房 200円
ぶどう　2房 200円
ぶどう　1房 100円

というようにSortする前の値が追加で一緒に表示されてしまう。

該当のソースコード

※問題のある部分だけ抜粋して掲載

//商品一覧
　　　　 <ul class="list_header">
          <li v-for="(product, index) in products" :key="index">
            <div>{{ product }}</div>
          </li>
        </ul>

//カテゴリ検索
         <ul>
           <li v-for="(fruit, index) in fruits" :key="index" @click="filter($event)">{{ fruit }}</li>
         </ul>

//並び替え
         <ul class="list_sort">
            <li @click="sortCheap">料金が安い順</li>
            <li @click="sortExpensive">料金が高い順</li>
          </ul>

export default {
  data: function() {
    return {
    };
  },
  computed: {
    products() {
      return this.$store.getters.getProducts;
    },
    fruits() {
      return this.$store.getters.getFruits;
    },
    vegetables() {
      return this.$store.getters.getVegetables;
    }
  },
  methods: {
    // 価格が安い順に並び替え
    sortCheap() {
      const product = this.products;
      const test = product.sort(function(a, b) {
        if (a.price < b.price) return -1;
        if (a.price > b.price) return 1;
        return 0;
      });
    },
    // 価格が高い順に並び替え
    sortExpensive() {
      const product = this.products;
      product.sort(function(a, b) {
        if (a.price < b.price) return 1;
        if (a.price > b.price) return -1;
        return 0;
      });
    },
    //フィルター
    filter(event) {
      const value = event.target.innerHTML;
      this.$store.dispatch("filter", value);
    },
}

import Vuex from "vuex";

const createStore = () => {
    return new Vuex.Store({
        state: function() {
            return {
                products: [
                    {user: '太郎', shop:'東京野菜市場', price: 100, name: 'トマト', quantity: 1, unit: '個', date: '2021年4月1日 午前11時30分'},
                    {user: '花子', shop:'巣鴨野菜市場', price: 50, name: 'なす', quantity: 2, unit: '個', date: '2021年4月2日 午後12時30分'},
                    {user: '一郎', shop:'新宿野菜市場', price: 30, name: 'りんご', quantity: 3, unit: '個', date: '2021年4月3日 午後13時30分'},
                    {user: '二郎', shop:'杉並区野菜市場', price: 200, name: 'きゅうり', quantity: 2, unit: '個', date: '2021年4月4日 午後14時30分'},
                ],
                fruits: [
                    'すべて',
                    'りんご',
                    'いちご',
                    'ぶどう',
                ],
                vegetables: [
                    'すべて',
                    'きゅうり',
                    'キャベツ',
                ],
                filterWord: {name: 'すべて'},
                filters: []
            }
        },
        getters: {
            getProducts: function(state) {
                if(state.filterWord.name === 'すべて') {
                    return state.products;
                } else {
                    const result = state.products.filter(function(value)  {
                        return value.name === state.filterWord.name;
                    });
                    result.forEach(product => {
                        state.filters.push(product);
                    })
                    return state.filters;
                }
        },
            getFruits: function(state) {
                return state.fruits;
            },
            getVegetables: function(state) {
                return state.vegetables;
            }
        },
        mutations: {
            filter(state, value) {
                state.filterWord.name = value;
            }
        },
        actions: {
            filter({ commit }, value) {
                commit('filter', value);
            }
        }
    })
}

export default createStore;

試したこと

↓Storeのindex.jsの自分で試してみた修正前と修正後のコードです。

 //修正前
        getters: {
            getProducts: function(state) {
                if(state.filterWord.name === 'すべて') {
                    return state.products;
                } else {
                    return state.products.filter(function(value)  {
                        return value.name === state.filterWord.name;
                    });
                }
        },
}
※修正前のコードだとフィルターはされるものの、返ってきた配列が恐らくcomputedの監視下に無い為、安い順に並び替えされない。
それを解決すべく修正後のコードになりましたが今回のような問題に発展しました。


//修正後
        getters: {
            getProducts: function(state) {
                if(state.filterWord.name === 'すべて') {
                    return state.products;
                } else {
                    const result = state.products.filter(function(value)  {
                        return value.name === state.filterWord.name;
                    });
                    result.forEach(product => {
                        state.filters.push(product);
                    })
                    return state.filters;
                }
        },
}

何かいい方法があればご教授いただければと思い質問させていただきました????‍♂️
よろしくお願い致します。