Как показывать элемент только зарегистрированному пользователю? Vue3 Pinia

Проблема с синхронным отображением кнопки (<v-btn>Билеты</v-btn>). При авторизации кнопка показывается с задержкой, но если обновить страницу, то появляется сразу.

Чего не хватает для отображения кнопки билетов сразу после авторизации и входа на сайт пользователя? Спасибо за помощь!

Компонент UserStore

import {defineStore} from 'pinia'
import axios from 'axios';
import {IUser} from "../models/IUser";

export const useUserStore = defineStore('user', {
    state: () => ({
        activeUser: {} as IUser,
    }),
    actions: {
        loading: false,
        async login(user: IUser) {
            try {
                const response
                    = await axios.post<IUser>('http://localhost/api', user);
                this.activeUser = response.data as IUser;
                window.sessionStorage.setItem('loginUser', JSON.stringify(this.activeUser));
            } catch (error: any) {
                alert('Что-то пошло не так с вашим запросом. ' +
                    'Пожалуйста, убедитесь, что вы правильно заполнили все обязательные поля.');
                this.loading = false;
            }

        },
        
        isAuthenticated() {
            const accessToken = sessionStorage.getItem('loginUser');
            return !!accessToken;
        },
    }
});

Компонент с кнопкой

<template v-slot:activator="{ props: menu }">
          <v-tooltip location="top">
            <template v-slot:activator="{ props: tooltip }">
              <v-btn
                  class="city-btn"
                  v-bind="mergeProps(menu, tooltip)"
              >
                Города
              </v-btn>
              <v-btn
                  class="ticket-btn"
                  v-if="useUserStore().isAuthenticated()"
                  :to="{name:'TicketPage'}"
              >
                Билеты
              </v-btn>
            </template>
          </v-tooltip>

Роутер

const routes = [
    {
        path: '/',
        component: HomePage,
        name: 'HomePage',
    },
    {
        path: '/tickets',
        name: 'TicketPage',
        meta: {isLogged: true},
        component: () =>
            import("../components/ticket/TicketPage.vue"),
    },
]

const router: Router = createRouter({
    history: createWebHistory(),
    routes,
})
export default router;

router.beforeEach((to, from, next) => {
    if (to.matched.some((record) => record.meta.isLogged)) {
        if (!useUserStore().isAuthenticated()) {
            next({name: 'HomePage'});
        } else {
            next();
        }
    } else {
        next();
    }
});