Vue/Vuex - Module two depends on module one, and module one gets data from server

Check this out:

import accountModule from '@/store/modules/account/account';
import otherModule from '@/store/modules/other/other';

export default new Vuex.Store({
  modules: {
    account: accountModule,
    other: otherModule,
  }
});

The data initialization in other depends on the account module because the account module has user specific settings. Suppose other.state.list depends on account.state.settings.listOrder. However, I want the data for the account module to come from the server. Which is async. So when other is trying to get set up, it can't just try to reference account.state.settings.listOrder because the response from the server may not have come back yet.

I tried exporting a promise in accountModule that resolves with the module itself. But that approach doesn't seem to work.

import accountModulePromise from '@/store/modules/account/account';

accountModulePromise.then(function (accountMoudle) {
  import otherModule from '@/store/modules/other/other';

  ...
});

This gives me an error saying that import statements need to be top level.

The following doesn't work either:

let accountModule = await import '@/store/modules/account/account';
import otherModule from '@/store/modules/other/other';
...

It gives me an error saying that await is a reserved word. I'm confused though, because https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import says that I should be able to do it.

from Vue/Vuex - Module two depends on module one, and module one gets data from server