如何在NUXTJS中添加查询数组参数以进行路由

Question

我在使用NuxtJ时遇到问题，我正在开发一个电子商务应用程序。 类别页面的侧面有产品过滤器。我想根据复选框过滤产品。目前，我正在观察数据值并推送到路由器。 我期望查询为

?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>