Vuejs detect the change and update the page without user's involvement

Question

I've got the VueJS single page application (SPA) and when users successfully register in my app it redirects them to the Home page. This Home page shows a bar (alert) asking users to confirm the email they have provided during the registration. Note: this bar will we be constantly shown until they confirm it!

Currently when a user confirms the email it opens the confirmation page in a new tab saying that Email have been successfully confirmed! and the bar disappears but when user goes to the original tab (Home page) the bar is still shown.

Is there any way you could listen on the background for a change of the user's state (user.isVerified) and hide the bar without user's involvement (refresh the page/click on any links)?

To get the user's data I'm using an API call:

getUser({ commit }) {
        return new Promise((resolve, reject) => {
            axios
                .get('http://localhost:8000/api/user')
                .then(response => {
                    commit('setData', response.data.data);
                    resolve(response);
                })
                .catch(errors => {
                    reject(errors.response);
                })
        })
    }

JSON response:

{
    "data": {
        "id": 2,
        "name": "John Doe",
        "email": "[email protected]",
        "isVerified": true,
        "createdAt": "2020-04-17T13:17:07.000000Z",
        "updatedAt": "2020-04-26T23:15:24.000000Z"
    }
}

Vue page:

<template>
    <v-content>
        <v-alert
                v-if="user.isVerified === false"
                tile
                dense
                color="warning"
                dark
                border="left"
        >
            <div class="text-center">
                <span>
                    Hey {{ user.name }}! We need you to confirm your email address.
                </span>
            </div>
        </v-alert>

        <v-content>
            <router-view></router-view>
        </v-content>
    </v-content>
</template>

Answer 1

To be clear, when you say "listen for state" - each Vue instance has its own state, so your website open in another tab does not naturally share state with the original tab. It sounds like you want your Vue app to listen for changes in your database, so that you can tell when your API has marked your user as 'confirmed'. This is a great opportunity for Websockets.

Essentially, your app has a 'listener' for a 'user confirmed' message. When your API confirms a user, it sends the message. When the listener receives that message, it updates the user confirmation in state and refreshes (or, better, re-requests the user from the API). This is the same technology that powers push notifications, chat apps, etc.