Созданный хук получает данные, затем обновляет состояние Vuex, но ничего в DOM

Question

Я пытаюсь сделать так, чтобы мой объект массивов, полученных из firebase, отображался в виде карточек на моей главной странице (например, в ленте Instagram).в моем App.vue у меня есть ловушка жизненного цикла create (), чтобы получить мои данные и затем отправить действие, которое будет использовать мутацию для установки состояния.

В другом хуке созданного () в моем компоненте карты я получаю состояние и использую его в v-for.

Что происходит в инструментах Vue, я вижу, что состояние было добавлено правильно, и когда я использую v-for в моем компоненте, оно должно появиться на моей главной странице.Странно, что если я подожду некоторое время, не обновляя страницу, мои пункты появятся.Если я обновлю свою страницу, они снова исчезнут.

Я пытался использовать settimeout () в компоненте моей карты, чтобы посмотреть, будет ли работать ожидание в обработчике create (), но это не сработало.Здесь я использую create () в моем app.vue

    export default {
  name: 'app',
  data() {
    return {
      cards: []
    }
  },
  components: {
    Card
  },
  created() {
    db.collection('Assets').get()
    .then((snapshot) => {
      snapshot.forEach( (doc) => {
        this.cards.push(doc.data());

        this.$store.dispatch('actionCards', this.cards)
      })
    })
  }
}

, здесь мой store.js

const Store = new Vuex.Store({
     state: {
        loadedCards:[],
        user: null,
        username: null,
        token: null
     },
     mutations: {
    setCards(state, cards) {
      state.loadedCards = cards;
    }
       actions: {
       actionCards(vuexContext, cards) {
        vuexContext.commit('setCards', cards)
     }

Код компонента моей карты, где я получаю состояние.

 export default {
name: 'card',
data() {
    return {
        cards: []
    }
}, 
created() {
    this.$store.state.loadedCards.forEach( (doc) => {

           this.cards.push(doc) 


     })
 }

}

Я надеюсь, что моя карта будет отображена сразу.