title: Run mutation on Route change VueJS?
body: <p>So i am using Vuex and have a simple mutation set up which console logs a message. I have two routes setup, the <code>/</code>which goes to my HelloWorld component and <code>/another</code> which goes to the AnotherWorld component. I am trying to setup a <code>watch</code> on my <code>route</code> so that when the route changes, it fires off the mutation. I did setup a <code>watch</code> but it doesn't seem to be firing off my mutation.</p>
  
  <p>Check out this <a href="https://codesandbox.io/s/elegant-volhard-ci46d?file=/src/router/index.js" rel="nofollow noreferrer">CodeSandbox</a>.</p>
  
  <p>Check out the code snippet:-</p>
  
  <p>This is My Vuex Store:-</p>
  
  <pre><code>  mutations: {
      routeChange() {
        console.log("Helloooo!!!!!");
      }
  </code></pre>
  
  <p>This is My Hello World Component:-</p>
  
  <pre><code>&lt;template&gt;
    &lt;div&gt;
      &lt;h1&gt;Hello World!!!&lt;/h1&gt;
      &lt;router-link to="/another"&gt;Switch&lt;/router-link&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    name: "HelloWorld",
    watch: {
      $route(to, from) {
        this.$store.commit("routeChange");
      }
    }
  };
  &lt;/script&gt;
  </code></pre>
  
  <p>This is my AnotherWorld Component:-</p>
  
  <pre><code>&lt;template&gt;
    &lt;div&gt;
      &lt;h1&gt;Another World&lt;/h1&gt;
      &lt;router-link to="/"&gt;Back&lt;/router-link&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {};
  &lt;/script&gt;
  </code></pre>
  
  <p>As you can see i have setup the watch but it doesn't seem to be doing anything. Any help will be appreciated. Thank you.</p>