How to update data in RealTime (axios, vuex store)?

Question

Vue.js

Suggest methods for solving the problem. It is necessary to display card data in real time (there is a database on the server with tables of device properties). The database is constantly updated in real time, that is, the parameters of the device properties themselves. And I have a few questions:
1. How can I update this data on the site in RealTime, regarding updating information in the database?
2. Is it worth using VuexStore and uploading data there so that later it can be displayed on any page?
(how to organize it correctly)
3. How to make a specific card for a separate device, so now I display all the cards, how to do it correctly so that when you click on a button in a specific card, a separate card opens with data only for this device?
At the moment I'm doing the output using axios, like this:

asyncData() {
    return axios
      .get("https://db-http.firebaseio.com/devices.json")
      .then(response => {
        return {
          currencies: response.data
        };
      });
  },

Output to blocks:

<div id="cards" v-for="currency in currencies" :key="currency.named">
          <card :id="currency.id" :named="currency.named" :location="currency.location"  :napruga="currency.napruga"></card></div>

<template>
    <div class="md-layout-item" >
  <div  class="card-expansion md-layout-item">
    <md-card md-with-hover>
      <md-card-media>
           <md-card-header class="md-card-header-fix">
              <div class="md-title" style="font-size: 18px; text-align: center;" v-bind:title="nazvahint">{{named}}</div>
              <div class="md-subhead" style="font-size: 14px; text-align: center;" v-bind:title="locationhint"><md-icon>location_on</md-icon>{{location}}-{{napruga}}</div>
            </md-card-header>
              <table border="1" class="tablefont" >
                <tr class="trheight">
                  <th class="left-down" v-bind:title="Ppotuzhnist" valign="bottom">P=100</th>
                  <th class="middle-top" v-bind:title="Qpotuzhnist" valign="top">Q=200</th>
                  <th class="right-down" v-bind:title="Spotuzhnist" valign="bottom">S=300</th>
               </tr>
              </table>
        <md-button v-bind:title="statered" style="background-color:red" class="md-fab md-primary md-mini" ></md-button>
      </md-card-media>


      <md-card-expand>
        <md-card-actions md-alignment="space-between">
          <div>
            <md-button class="buttoncard md-primary">все</md-button>
          </div>

          <md-card-expand-trigger>
            <md-button class="buttoncard md-primary" ><md-icon>keyboard_arrow_down</md-icon>Параметри</md-button>
          </md-card-expand-trigger>
        </md-card-actions>

        <md-card-expand-content>
          <md-card-content :class="color"> 
            <param-devices></param-devices>
            {{napruga}}
          
          </md-card-content>
        </md-card-expand-content>
      </md-card-expand>
    </md-card>
    </div>
    </div>
    
</template>

<script>
import ParamDevices from "~/components/ParamDevices.vue";
export default {
  props: ["id", "named", "location", "napruga"],
  components: {
    ParamDevices,
  },
  computed: {
    color() {
      return this.napruga  > 0 ? "inc" : "dec";
    }
  }
};
</script>

<style scoped>
.inc {
  color: green;
}
.dec {
  color: red;
}

Answer 1

https://www.google.com/search?ei=LHBJXKn4NsPWsAGsg...
Or just make a timer, for example, once every 10 or 20 seconds, request data on the
back Or make an api to check if the data has changed. And also, according to the timer, for example, every 5 seconds. If they have changed, then what would the back give you new data