VueJs + Firestore слушателей в реальном времени и обновления изменений

Question

Я работаю с vuejs и firestore.Im, я пытаюсь внести изменения в свои данные без обновления страницы. код ниже добавляет мне новую строку, когда я изменяю значение в firestore.

значение до изменения:

значение после изменения:

мой код:

{
<template>

  <div id="dashboard">
    <ul class="collection with-header">
      <li class="collection-header"><h4>PLC</h4></li>
      <li v-for="post in plc_value" v-bind:key="" class="collection-item">
        <div class="chip">{{post.value_g}}</div>
        <router-link class="secondary-content" v-bind:to="{ name: '', params:{} }"><i class="fa fa-eye"></i></router-link>
      </li>
    </ul>
  </div>
  </div>
</template>

<script>
import db from './firebaseInit';
export default {
  name: 'dashboard',
  data() {
    return {
      plc_value: [],
  //    loading: true
    };
  },
  created() {
    db
      .collection('plc_value')
      .onSnapshot(snap => {
        snap.forEach(doc => {
          const data = {
            id: doc.id,
            value_g: doc.data().value_g
          };
          this.plc_value.push(data);
        });
      });
  }


};
</script>

}