Vue Error: Maximum call stack size exceeded

[Vue warn]: Error in nextTick: “RangeError: Maximum call stack size exceeded” while navigating to another route.

This seems to be happening in rare cases, when I change the route I happened to see this issue,

[Vue warn]: Error in nextTick: "RangeError: Maximum call stack size exceeded"

but it changes to correct route URL in the browser URL bar, but it is not rendering the correct component of the active route. This is the router file. Am I missing something?

import Vue from 'vue'
import Router from 'vue-router'
import store from './store/store'
import VueCookie from 'vue-cookie'

Vue.use(Router)
const router = new Router({
  routes: [
    {
      path: '*',
      redirect: '/login'
    },
    {
      path: '/',
      beforeEnter (from, to, next) {
        if (!VueCookie.get('authToken')) {
          next('/login')
        } else {
          next('/dashboard')
        }
      }
    },
    {
      path: '/login',
      name: 'login',
      component: require('./views/Login').default,
      beforeEnter (from, to, next) {
        if (!VueCookie.get('authToken')) {
          next()
        } else {
          next(to.path)
        }
      }
    }
  ]
})

router.beforeEach((to, from, next) => {
	if (!VueCookie.get('authToken')) {
	  store.commit('logout')
	  next({
		path: '/',
		query: { redirect: to.fullPath }
	  })
	} else {
	  next()
	}
})

export default router

#vue #vue.js