When I refresh the page, my “center” variable is null, but when I log in, my “center” variable displays the values ​correctly

How can I fix the code to prevent this from happening?
We enter and log in and the text and logo appears in the top right corner, we refresh and it disappears.
I think it’s because generally, when the login is successful, the user information needs to be transferred. However, when the page is refreshed, the data in Vuex is reinitialized, causing data loss.

header.vue

<template>
    <div>
            <div class="columns is-vcentered is-marginless">
                <div
                    v-if="center && color"
                    class="client-brand"
                    :style="`background-color: ${color}`"
                    @mouseover="color = center && center.color ? `${center.color}20` : `#00000020`"
                    @mouseleave="color = center && center.color ? `${center.color}12` : `#00000012`"
                    @click="onClickChangeAccessPoint"
                >
                    <img
                        v-if="showBrandLogo && hasBrandLogo"
                        :src="getBrandLogo"
                        alt="logo"
                        class="logotypeImg"
                    />
                    <img
                        v-if="showLogoType && hasLogoType"
                        :src="getLogoType"
                        alt="logo"
                        class="logotypeImg"
                    />
                    <div v-if="showText" class="text">
                        {{ getText }}
                    </div>
                </div>
            </div>
    </div>
</template>

 computed: {
            ...mapState({
                loggedUser: state => state.loggedUser,
                center: state => state.center,
                isAppsLoading: state => state.isAppsLoading,
                banner: state => state.banner,
                banner_connection: state => state.banner_connection,
                system_settings: state => state.system_settings,
            }),
            getText() {
                return this.hasText ? (this.center?.text || this.center?.name) : null;
            },
            hasText() {
                return this.showText && (this.center?.text || this.center?.name);
            },
            showText() {
                return this.center?.portal_display_mode && (this.center?.portal_display_mode === 'brand_logo_and_text' || this.center?.portal_display_mode === 'text')
            },
    async created() {
        await this.$store.dispatch('getHubCustomization').then(response => {
            this.customization = response.data.data.customization;
            this.color = this.center ? `${this.center.color}12` : '#00000012';
        })
        window.addEventListener('popstate', this.appLoaderOnpopstateEvent);
    },

index.js

export const state = () => ({
    center: null,
});

export const mutations = {
CENTER(state, center) {
        state.center = center;

        if (center) {
            localStorage.setItem('center', center.id);
        } else {
            localStorage.removeItem('center');
        }
    },

};

export const getters = {
    GET_CENTER(state) {
        return state.center;
    },
};

    async getUserData({commit, dispatch, state}) {
        let access_token = window.localStorage.getItem('access_token');

        if (!access_token) {
            throw 'Access token not found.';
        }

        try {
  
            dispatch('setCenterAndAccessPointFromStorage');

            // console.log("Instalar plugins", state.installed_plugins);
            await installPlugins(state.installed_plugins);


        } catch (error) {

            throw error;
        }
    },

    setCenterAndAccessPointFromStorage({commit, dispatch, store, state}) {
        let centerId = Number.parseInt(localStorage.center);
        let accessPointId = Number.parseInt(localStorage.accessPoint);

        if (!centerId || !accessPointId) {
            commit('SET_CENTER', null);
            commit('SET_ACCESS_POINT', null);
            return;
        }

        let hasCenters = state.loggedUser.centers.length > 0;

        if (!hasCenters) {
            commit('SET_CENTER', null);
            commit('SET_ACCESS_POINT', null);
            return;
        }

        let index = state.loggedUser.centers.findIndex((center) => {
            return center.id === centerId;
        });

        if (index < 0) {
            commit('SET_CENTER', null);
            commit('SET_ACCESS_POINT', null);
            return;
        }

        let center = state.loggedUser.centers[index];

        let hasAccessPoints = center.access_points.length > 0;

        if (!hasAccessPoints) {
            commit('SET_CENTER', null);
            commit('SET_ACCESS_POINT', null);
            return;
        }

        index = center.access_points.findIndex((accessPoint) => {
            return accessPoint.id === accessPointId;
        });

        if (index < 0) {
            commit('SET_CENTER', null);
            commit('SET_ACCESS_POINT', null);
            return;
        }

        let accessPoint = center.access_points[index];

        commit('SET_CENTER', center);
        commit('SET_ACCESS_POINT', accessPoint);
    },