Guards for routes is not clear how it works?

Question

firebase

In the main APP component, after logging in, I receive from the store, and I monitor the user session that I receive by UID from FIREBASE
File APP:

computed: {
      isUserAuth () {
        return this.$store.getters.isUserAuth
      },
      userSaveSession() {
        return this.$store.dispatch('userSaveSession')
      },

      //for test check user UID
      userData () {
        return this.$store.getters.userData
      }
    },

    watch: {
      isUserAuth (value) {
        console.log('User auth is :' + value);
        if (value === true) {
          //this.$router.replace("/")
        }
      }

file router index:

import Vue from 'vue'
import Router from 'vue-router'
import Store from '../store/index'


//Route components
import Home from '@/pages/Home'
import Register from '@/pages/user/Register'
import Login from '@/pages/user/Login'
import UserSettings from '@/pages/user/UserHome'
import UserAddNotice from '@/pages/user/user-components/UserAddNotice'
import UserEditNotice from '@/pages/user/user-components/UserEditNotice'
import UserNotices from '@/pages/user/user-components/UserNotices'
import UserReset from '@/pages/user/Resetpass'
import Single from '@/pages/Single'


Vue.use(Router);

// Routes
export default new Router({
    routes:
    [
      
        {
            path: '/usersettings',
            name: 'usersettings',
            component: UserSettings,
            beforeEnter: authGuard
        },
        {
            path: '/useraddnotice',
            name: 'useraddnotice',
            component: UserAddNotice,
            beforeEnter: authGuard
        },
        {
            path: '/usereditnotice',
            name: 'usereditnotice',
            component: UserEditNotice,
            beforeEnter: authGuard
        },
        {
            path: '/usernotices',
            name: 'usernotices',
            component: UserNotices,
            beforeEnter: authGuard
        },
    ],
    mode: 'history'
})

function authGuard(from, to, next) {
    console.log(Store.getters.isUserAuth)
    if(Store.getters.isUserAuth){
        next()
    } else {
        next('/login')
    }
}

On all components where there are guards on routes, the session crashes, there is a transition to the login component and is restored in a couple of seconds.
Help me solve this trouble, and how is it correct to write these guards on routes?