Как сделать обновление данных в RealTime (axios,vuex store)?

Подскажите методы решения задачи. Нужно отображать данные карточек в реальном времени (тобишь на сервере имеется БД с таблицами свойств устройств). БД постоянно обновляется в реальном времени, тобишь сами параметры свойств устройств. И у меня возникает несколько вопросов:
1. Как мне сделать обновление этих данных на сайте в RealTime, относительно обновления информации в БД?
2. Стоит ли использовать VuexStore и туда заганять данные чтобы потом можно было отображать на любой странице?
(как это правильно организовать)
3. Как сделать определенную карточку под отдельное устройство, тобишь сейчас я вывожу все карточки, как правильно сделать чтобы по нажатию на кнопку в определенной карточке, открывалась отдельная карточка с данными только по этому устройству?
На данный момент делаю вывод с помощью axios, вот так:

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

Вывод в блоки:

<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;
}