title: Vue-router 2 changes route but does not update the view?
body: <p>I have a login issue with website that uses:</p>
  
  <ul>
  <li>Vue.js  v2.0.3</li>
  <li>vue-router v2.0.1</li>
  <li>vuex v0.8.2</li>
  </ul>
  
  <p>In <code>routes.js</code> I have a simple interceptor setup</p>
  
  <pre><code>router.beforeEach((to, from, next) =&gt; {
  if (to.matched.some(record =&gt; record.meta.requiresAuth)) {
      // this route requires auth, check if logged in
      // if not, redirect to login page.
      if (!router.app.auth.isUserLoggedIn) {
          next({
              path: '/login',
              query: { redirect: to.fullPath }
          })
      } else {
          next()
      }
  } else {
      next() // make sure to always call next()!
  }
  </code></pre>
  
  <p>})</p>
  
  <p>And in <code>login.vue</code>,which handles the login page logic after using Google API only for login succeeds I call this:</p>
  
  <pre><code>this.login(userData).then( 
      () =&gt; this.$router.push(this.redirectToAfterLogin), // Login success
      () =&gt; {} // Login failed
  )
  
  
  mounted: function(){
  if (this.auth.isUserLoggedIn){
              // Let's just redirect to the main page
              this.$router.push(this.redirectToAfterLogins)
          }else{
              Vue.nextTick(() =&gt; {
                  this.loadGooglePlatform()
              })}}
  
  
  computed: {
          redirectToAfterLogin: function() {
              if (this.$route.query.redirect){
                  return this.$route.query.redirect
              }else{
                  return '/'
              }
          }
      }
  </code></pre>
  
  <p>router.js</p>
  
  <pre><code>var VueRouter = require('vue-router')
  
  // Router setup
  export const router = new VueRouter({
      linkActiveClass: "is-active",
      mode: 'history',
      saveScrollPosition: true,
      routes: [
          { path: '', name: 'root', redirect: '/home' },
          { path: '/login', name: 'login', meta: { loadingNotRequired: true }, component: require('./pages/login.vue') },
          { path: '/logout', name: 'logout', meta: { loadingNotRequired: true }, component: require('./pages/logout.vue') },
          { path: '/home', name: 'home', title: 'Home', redirect: '/home/random', component: require('./pages/home.vue'),
              children: [
                  { path: 'random', name: 'random', meta: { requiresAuth: true }, title: 'Random', component: require('./pages/random.vue') }
              ]  
          }
      ]
  })
  
  // Redirect to login page if not logged In
  router.beforeEach((to, from, next) =&gt; {
      if (to.matched.some(record =&gt; record.meta.requiresAuth)) {
          // this route requires auth, check if logged in
          // if not, redirect to login page.
          if (!router.app.auth.isUserLoggedIn) {
              next({
                  path: '/login',
                  query: { redirect: to.fullPath }
              })
          } else {
              next()
          }
      } else {
          next() // make sure to always call next()!
      }
  })
  </code></pre>
  
  <p>Now here <code>this.login</code> is just the call to vuex, to update the logged in user. </p>
  
  <p>What happens is that after login, <strong>URL changes</strong> to /home, but the <strong>DOM does not update</strong>! </p>
  
  <p>Only way that successfully changed the DOM was forcing <code>location.reload()</code> and that is not what I want to do, as it loses my dynamically loaded G scripts in Head.</p>
  
  <p>Any idea on what to do to force the view to update DOM?</p>
  
  <p>NOTE: it happens only on the first login of user, if he logs out and back-in, the redirecting is fine</p>