title: Is there a way to detect query changes using Vue-Router and successfully get new data?
body: <p>I am simply making an asynchronous request to get data about a MLB player but am failing to get new data by manually changing the query parameters in the URL.  When I use watch, the from and the to are the same for some reason upon debugging with Vue dev tools.  However, all works well when I manually click a link to navigate routes as the from and the to correctly represent the from and the to routes.</p>
  <p>PitcherForm.vue
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>export default {
    name: "PitcherForm",
    components: {
      PlayerForm,
    },
    watch: {
      $route() {
        this.handleSubmit({ firstName: this.$route.query.firstName, lastName: this.$route.query.lastName });
      }
    },
    methods: {
      handleSubmit: function(formValues) {
        // this.$store.dispatch("fetchPlayer", { formValues, router: this.$router, player: "pitching" });
        this.$store
          .dispatch("fetchPlayer", { formValues, player: "pitching" })
          .then((promiseObject) =&gt; {
            console.log(promiseObject)
            this.$router.push({
              // name: 'PitcherData',
              path: "pitching/player",
              query: {
                firstName: promiseObject.firstName,
                lastName: promiseObject.lastName,
              },
            });
          })
          .catch((error) =&gt; {
            console.log(error);
          });
      },
    },</code></pre>
  </div>
  </div>
  </p>
  <p>//store.js
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import Vue from 'vue';
  import Vuex from 'vuex';
  import VuexPersist from 'vuex-persist';
  import axios from 'axios';
  
  Vue.use(Vuex);
  
  // VuexPersist stuff
  const vuexLocalStorage = new VuexPersist({
    key: 'vuex',
    storage: window.localStorage,
  });
  
  export const store = new Vuex.Store({
    plugins: [vuexLocalStorage.plugin],
    state: {
      playerStats: []
    },
    // mutations, getters, excluded for convenience
    actions: {
     
      fetchPlayer({ commit }, data) {
        return new Promise((resolve) =&gt; {
          let firstName = data.formValues.firstName.replace(/\s/g, "").toLowerCase();
          let lastName = data.formValues.lastName.replace(/\s/g, "").toLowerCase();
    
          axios.get(`http://localhost:5000/${data.player}/player`,
          {
            params: {
              first: firstName.charAt(0).toUpperCase() + firstName.slice(1),
              last: lastName.charAt(0).toUpperCase() + lastName.slice(1),
            },
          }).then(response =&gt; {
              commit('setPlayers', response.data);
          }).catch((error) =&gt; {
              console.log(error);
          });
  
          resolve({firstName, lastName});
        });
      }
    }
  });</code></pre>
  </div>
  </div>
  </p>