База данных Firebase в вычисляемом свойстве не работает / рендеринг в v-for

Question

У меня есть вычисляемое свойство, которое получает данные из моей базы данных Firebase и возвращает массив.Я хочу, чтобы это было v-for в моем приложении.Проблема в том, что каждый раз, когда я перезагружаюсь или открываюсь в новой вкладке, он ничего не отображает.Я записал в консоль массив, который он должен вернуть, но он возвращает [].Еще одна странная вещь - каждый раз, когда я добавляю код и сохраняю его, скажем, я добавил console.log(), тогда это время, когда он будет отображать элементы.

Я уже пытался переместить его в свойство methods, ноэто все еще не работает.

Вот мое вычисленное свойство в моем файле vue.У меня также есть установленный lodash, который является this.$_

computed: {
  tasks () {
    let tmpList = []
    this.$firebase.getTasks(snap => {
      this.$_.each(snap, s => {
        this.$firebase.database(`/postedParcels/${s.key}`, parcels => {
          parcels.forEach(parcel => {
            let tmp = parcel.val()
            tmp.key = parcel.key
            tmpList.push(tmp)
          })
        })
      })
    })
    return tmpList
  }
}

Здесь частичный код в моем плагине firebase.js.

getTasks (fn) {
  fireApp.database().ref('/postedParcels').on('value', snap => {
    let tmp = []
    snap.forEach(s => {
      tmp.push({
        key: s.key,
        data: s.val()
      })
    })
    fn(tmp)
  })
},
database (ref, fn) {
  fireApp.database().ref(ref).on('value', snap => fn(snap))
}

Код, который я хочу, чтобы он отображался.Я использую Vuetify.

<v-card 
  v-for="task in tasks"
  :key="task.id"
  class="mb-2"
  @click="viewFullItemDetails(task)"
>
  <v-card-text>
    <fb-data-table :firebase-data="task"></fb-data-table>
  </v-card-text>
</v-card>