Как добавить параметр массива запроса в маршрут в NUXTJS

Question

У меня возникла ситуация при использовании NuxtJs, я работаю над приложением электронной коммерции.На странице категории есть боковые фильтры продуктов.Я хочу отфильтровать продукты на основе флажков.В настоящее время я наблюдаю за значениями данных и нажимаю на маршрутизатор.Я ожидаю запроса как

?categories[]=apple&categories[]=orange...

Но проблема в том, что asyncData называется дважды , что не должно происходить.Что я делаю не так?

<template>
      <b-row class="pt-5">
        <div id="aside" class="col-md-3">            
            <div class style="max-height:200px;overflow:auto">
              <b-form-group>
                <b-form-checkbox-group plain stacked v-model="filterState" name="flavour2" :options="options"></b-form-checkbox-group>
              </b-form-group>
            </div>              
        </div>
      </b-row>
</template>
<script>
export default {
  watchQuery: true,
  asyncData({ params, query, error }) {
    console.log("this is working")
  },
  data() {
    return {
      filterState: [],
      options: [
        {text: 'Orange', value: 'orange'},
        {text: 'Apple', value: 'apple'},
        {text: 'Pineapple', value: 'pineapple'},
        {text: 'Grape', value: 'grape'}
      ]
    }
  },
  watch: {    
    filterState: function (newFilters) {
        this.$router.push({
          query: {
            'categories': newFilters
          }
        })
    }
  }
}
</script>