Состояние гонки магазина Vue - второй компонент пытается отобразить данные, прежде чем первый компонент поместит их в хранилище

Question

У меня есть два компонента: First.vue и Second.vue

• First.vue вычисляет некоторые данные на created() и помещает их в хранилище
• Second.vue отображает данные из хранилища через computed, но получает: Cannot read property "total" of undefined

First.vue

created() {
  fetchHddInfo().then(info => {
     this.$store.commit('updateMountedDrives', info)
  })}
}

Second.vue

Данные {{freeSize}} отображаются на странице, однако я получаю Cannot read property "total" of undefined при первом вычислении попытки извлечь данные из хранилища (до того, как данные поступят из First.vue).

{{freeSize}}

...

computed: {
  freeSize () {
    return this.$store.state.AppData.mountedDrives.total.free
  }
}

AppData.js модуль магазина

Пример того, какие данные mountedDrives хранит:

{"total": { "free": 201136054272, "size": 2114488328192 }}

const state = {
  mountedDrives: []
}

const mutations = {
    updateMountedDrives (state, value) {
        state.mountedDrives = value
    }
}