nuxt watchQuery not working on update route with new query [duplicate] - vue.js

Question

This question already has answers here:
How to access current route name reactively in Vue Composition API in TypeScript?
(3 answers)
Closed last month.
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