localStorage.getItem in component run before localStorage.setItem in login

I need a suggestion to fix this little error.

In my SPA I have a page called “office” where the user enters just after he does the login. Office page component shows some info stored in localStorage.

The localStorage is built by API just during the login process and it is a bit slower than office component so it results to be empty on first attempt, but if I go to another page and than back to office I see the component filled by localStorage items.

Here the component code:

export default {
    name: "accountComponent",

    data: function () {

        return {

            activities: {


    mounted() {
        const activities = JSON.parse(localStorage.getItem("activities"));
        console.log("Activity reloaded");
       if (activities){
           console.log("2) Activity reloaded");
           this.activities.team_activities = activities.team_activities;
           this.activities.aisoccer_news = activities.aisoccer_news;
           this.activities.staff_activities = activities.staff_activities;
           console.log( this.activities.team_activities)



Console notes:

On login:

Activity reloaded

On moving to another page and then back to office:

Activity reloaded
{aisoccer_news: Array(1), staff_activities: Array(1), team_activities: Array(1)}
2) Activity reloaded

The login code

      // set notifications

                    localStorage.setItem("activities", JSON.stringify(response.data));
                    console.log("### SET Noties ###");

The console on login has a wrong sequence:

Activity reloaded (component)
null (component)
SET Noties ### (login)
{status: 200, data: {…}} (login)

i also have the same issue did you got any solutions for this?please help me