Nuxt.js: watchQuery fires twice on $router.push

[dpmccabe]

Version

v2.11.0

Reproduction link

https://codesandbox.io/s/sparkling-platform-di095

Steps to reproduce

Create a method that calls $router.push with a new query parameter value:

<template>
  <div>
    <nuxt-link to="#" @click.native.prevent="incX">increment x</nuxt-link>
    <pre>{{x}}</pre>
  </div>
</template>

<script>
export default {
  data() {
    return {
      x: 0
    };
  },

  methods: {
    async incX() {
      console.log("incX:", this.x);
      this.x += 1;

      this.$router.push({ query: { x: this.x } });
    }
  },

  watch: {
    "$route.query": {
      handler(query) {
        console.log("$route.query:", query);
      }
    }
  },

  watchQuery(newQuery, oldQuery) {
    console.log("watchQuery", newQuery);
    return false;
  }
};
</script>

What is expected ?

watchQuery should run once every time the link is clicked.

What is actually happening?

Clicking the link to increment the value results in watchQuery getting called twice even though the $route.query watcher is only called once, e.g.:

current x: 4
new x: 5
watchQuery Object {x: 5}
watchQuery Object {x: 5}
$route.query: Object {x: 5}

[stale[bot]]

Thanks for your contribution to Nuxt.js!
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you would like this issue to remain open:

1. Verify that you can still reproduce the issue in the latest version of nuxt-edge
2. Comment the steps to reproduce it

Issues that are labeled as pending will not be automatically marked as stale.

[FiNGAHOLiC]

+1

[marijusar]

Also having this issue.

Edit : Solved the issue by disabling watchQuery provided by Nuxt and creating custom query watcher.

watch: {
    $route(to, from) {
      // react to route changes...
    }
  }