I want my reactive state to be same (updated) between various tabs (unfocused), when it gets updated in any tab in Vue 2

Question

Code in my template

 <!-- Switch Button for online/offline status -->
    <div v-if="user.role=== 'accountant' || user.role=== 'supervisor'">
      <v-chip v-if="onlineStatusValue" color="green" class=" d-flex row-pointer" small dense @click="statusUpdated()">
        <v-icon x-small color="green darken-4">mdi-circle-medium</v-icon>
        <p class="white--text font-style-paragraph pl-2 pt-1">Online</p>
      </v-chip>
      <v-chip v-else color="red" class=" d-flex row-pointer" small dense @click="statusUpdated()">
        <v-icon x-small color="red darken-4">mdi-circle-medium</v-icon>
        <p class="white--text font-style-paragraph pl-2 pt-1">Offline</p>
      </v-chip>
    </div>

Method which updates the state

  methods: {
    /**
     * This method is used to test i.e either the user is online/offline
     * Socket integration method used in it
     **/
    statusUpdated() {
      clearTimeout(this.userStatusInterval)
      if (this.onlineStatusValue === false) {
        if(this.role === 'supervisor'){
           window.open("/supervisor-ticketpool");
          // this.$router.push("/supervisor-ticketpool")
        }
        socket.emit("userConnected", this.user._id);
        this.userStatusInterval = setTimeout(function () {
          EventBus.$emit('user-status-online');
        }, 1000);
      }
      else{
        if(this.role === 'supervisor'){
          this.$router.push("/");
        }
        socket.emit("userDisconnected", this.user._id);
      }
 /* ----> updates the online Status  */  
        this.$store.commit("auth/setOnlineStatus", !this.onlineStatusValue);
    },
}

This method does update the state correctly but only of the Tab which is currently in focus. If I have multiple Tabs opened, the change in state on the Focused tab, will not be reflected in the other tabs (which are currently not in focus). I want all of my unfocused tabs' state this.onlineStatusValue to be updated whenever the state this.onlineStatusValue gets updated in the focused tab (want the state to be on the same page for all my tabs).

Answer 1

Probably a good candidate for a state management. You can change and access stored value from any tab. Check Pinia out.