nuxt watchQuery not working on update route with new query

Question

when i add a new query using $router.push to route Nuxt watchQuery not working and asyncData not fetching api and remount children components. please attention to "New query" and not exist any query by default.(after created new query and then exists query every things are correct and watchQuery works correctly.)

example.com/some-param ----> example.com/some-param?brand=x (not working watchQuery)

example.com/some-param?brand=x ----> example.com/some-param (correct watchQuery)

change_brand: function () {
  const vm = this;
  /*** selected_brands = [] is an array defined in data ***/
  let q = { ...vm.$route.query };
  if (vm.selected_brands.length > 0) {
    q.brands = vm.selected_brands.join("-");
  } else {
    delete q.brands;
  }
  vm.$router.push({
    name: "search-slug",
    params: vm.$route.params,
    query: q,
  });
},

Answer 1

As Nuxt documentation says here:

Warning: The new fetch hook introduced in 2.12 is not affected by watchQuery. For more information see listening to query string changes.

I used the following watcher to make fetch hook listen to route query changes:

export default {
  watch: {
    '$route.query': '$fetch'
  },
  async fetch() {
    // Called also on query changes
  }
}

Reference: https://nuxtjs.org/docs/2.x/features/data-fetching#listening-to-query-string-changes