title: Vue router afterEach guard executes before loading has finished
body: <p>I am trying to create a loading animation when I navigate between routes. However, as soon as I click on a router link both beforeEach and afterEach guards execute immediately at the same time and only then my components starts to load.</p>
  <pre><code>router.beforeEach((to, from, next) =&gt; {
     console.log('starting...')
     store.isLoading = true
     next()
  })
  
  router.afterEach((to, from) =&gt; {
     console.log('finished!!')
     store.isLoading = false
  })
  
  new Vue ({
     el: '#app',
     router: router,
  });
  </code></pre>
  <p>I put a heavy computation on component created method and it shows that the navigation has finished but only after 5 seconds my components loads.</p>
  <pre><code>export default {
  ...
  
    created()
    {
      doPointlessComputationsWithBlocking()
      this.fetchData()
    },
  };
  </code></pre>
  <p>The console log shows this immediately after I click on a router link.</p>
  <blockquote>
  <p>starting...</p>
  <p>finished!!</p>
  </blockquote>