Как ждать загруженных данных из Vuex?

У меня есть хранилище Vuex, где я храню "пользователя" (объект загружен с сервера)

В основном App.vue в созданном разделе я всегда заполняю «пользователь»

Это асинхронный метод. Мои компоненты не ждут. Когда я использую в шаблоне {{user.logo}}, я получаю ошибку в консоли 404

http://example.net/images/undefined

Но в следующую секунду, когда пользователь загрузил, ошибка исчезла.

Как заставить приложение ждать загруженной асинхронной даты в Vuex?

Обновлено. Я понимаю, почему это происходит. Компонент установлен, асинхронные данные не готовы. Я делаю состояние «готовым» в Vuex, оно становится истинным после успешной загрузки. Проверяю "готово" в вычисляемой секции. если не готов, возвращает no_logo.png

Но в моем компоненте в созданном разделе, когда я получаю другие данные с сервера с помощью user.id из магазина Vuex (но пользователь еще не готов), я получил ошибку. Как проверить готовность в созданном разделе перед загрузкой?

//html
<div id='app'>

  <ul>
    <li v-for='role in roles'>
      <p>{{role}}</p>
    </li>
  </ul>


</div>

//script Vue
var app = new Vue({
  el: '#app',
  data: {
    roles: []
  },

  created: {
    this.fetchingItems() //GOT ERROR need check Ready!!!
  },

  methods: {
    fetchingItems() {
      axios.get('api/getRoles/${this.$store.user.id}')
        .then((res) => this.roles = res.data.roles)
    }
  }
})


// This is store!!!.
const store = new Vuex.Store({
  state: {
    ready: false,
    user: {}
  },
  mutations: {
    USER_SET(state, user) {
        state.user = user
      },
      READY_SET(state) {
        state.ready = true
      }

  },
  action: {
    loadUser() {

  axios.get('api/getUser/${parseInt(localStorage.getItem('user_id'))}')
      commit('USER_SET', res.data.user)
      commit('READY_SET')

    }
  }
})