Data disappears after page is reloaded - vuexfire

Question

Hi everybody i have the following problem: I use vuexfire. When i bind the data from firestore it appears and after reloading the page or visit another page and come back the data disappears. Does anybody know this issue and how to fix it?

Here are my codes:

main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

// fontawesome
import { library } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { faUserSecret, faHome, faSignInAlt, faDumbbell, faUserGraduate, faInfoCircle } from '@fortawesome/free-solid-svg-icons'
library.add(faUserSecret, faHome, faSignInAlt, faDumbbell, faUserGraduate, faInfoCircle)

const app = createApp(App)
app.component('fa-icon', FontAwesomeIcon)

app.config.productionTip = false
app.config.devtools = true

app.use(store).use(router).mount('#app')

store/index.js

import { createStore } from 'vuex'
import { vuexfireMutations, firestoreAction } from 'vuexfire'
import { db } from '@/db' 

export default createStore({
  state: {
    todos: []
  },

  mutations: {
    ...vuexfireMutations,
  },

  actions: {
    bindTodosRef: firestoreAction(context => {
      return context.bindFirestoreRef('todos', db.collection('todos'))
    }),
},

  getters: {},
  modules: {},

})

Home.vue

<template>
  <div class="home">
    <h1>Home</h1>
    
    {{ todos }}
  
  </div>
</template>

<script>
import { mapState, mapActions, mapGetters } from 'vuex'
import { db } from '@/db'

export default {
  name: 'Home',
  methods: {
    
  },

  computed: mapState(['todos']),
  
  created() {
    this.$store.dispatch('bindTodosRef', { ref: db.collection('todos') })
  },
}
</script>

Thx a lot!