Аутентификация работает ненадлежащим образом Vue JS

Question

У меня есть защищенные маршруты, и они зависят от значения в магазине.

loginUser() { // i call this function when user press "Login"
this.$http.get('http://localhost:3000/users')
    .then(resp => {
        return resp.json()
    })
    .then(resp => resp.filter(item => item.email === this.email && item.password === this.password))
    .then(res => res.length > 0 ? (this.$router.push('/'), this.$store.commit('logUser')) : this.visible = true); // here i change value in the store
}

// Store
userLogged: false // state
mutations: {
    logUser(state) { // i call this function when loginUser() function calls
        state.userLogged = true
    }
}
// router index.js
{
    path: '/',
    name: 'Home',
    component: Home,
    beforeEnter: AuthGuard
}

export default function (to, from, next) { // this is AuthGuard function
    if (store.getters.getUser) { // get value from store
        next();
    } else {
        next('/login')
    }
}

// store
getters: { // get value
    getUser(state) {
        return state.userLogged
    }
}

Это работает ненадлежащим образом.Я должен дважды нажать кнопку входа в систему, потому что getUser () получает состояние и logUser (), изменяя userLogged одновременно, то есть getUser () возвращает false, а когда я нажимаю второй раз, его true.Как я могу это исправить?