Vue 2.X — хороший подход к ожиданию контрастных асинхронных источников данных в компоненте

В компоненте Vue у меня есть два асинхронных вызова данных из разных источников (один вызов HTTP, один вызов кэша браузера), и я хочу, чтобы загрузчик вращался, пока оба не будут завершены. Когда оба завершены, компонент загружается, так сказать.

...
data() {
    return {
      loading: true
    }
},
mounted: function() {
    this.getData(); // HTTP Async API
    this.getOtherData(); // IndexedDB Async API 
},
...

Я пытаюсь выяснить, как правильно установить для загрузки значение false, когда оба возвращают данные. Мой текущий подход к использованию флагов выглядит грязным, но я не уверен, что это лучший подход.

...
data() {
    return {
      loading: true,
      flagA: false,
      flagB: false
    }
},
mounted: function() {
    this.getData(); // HTTP Async API
    this.getOtherData(); // IndexedDB Async API 

},
methods: {
  getData() {
   ...
   //Once done
   this.flagA = true
   if (this.flagA == true && this.flagB == true) this.loading = false
  },
  getOtherData() {
   ...
   //Once done
   this.flagB = true
   if (this.flagA == true && this.flagB == true) this.loading = false
  }
...

Есть ли лучший подход?

РЕДАКТИРОВАТЬ, чтобы показать не HTTP-функцию:

getOtherData() {
    var request = indexedDB.open("Database", 1);
    request.onerror = event => {
        //IndexedDB is not supported. Resort to fallback option and continue regular program flow
    };
    request.onsuccess = event => {
      this.db = event.target.result;

      var transaction = this.db.transaction(["project"], "readwrite");

      var projectStore = transaction.objectStore("project");
      var projectReq = projectStore.get(1);

      projectReq.onsuccess = () => {
        this.flagB = true;
      };
      projectReq.onerror = () => {
        //error 
      };
  };