vitest — vue creates the component, function needs data produced by a different function

I am attempting to write integration tests for an existing application. The component I am testing loads the preference of the user by account and displays them so the user can change them if he desires. It works locally and remotely. But when I run my test code a structure is not created before it is needed and the fact that the code doesn’t seem to “wait” for the structure causes the component to fail to load.

I have a component (lets call it for simplicity, AAA) that as it loads (created()) calls a function fetchAccounts. A async call is made to an API. Then as part of fetchAccounts a call is made another function in AAA fetchPreferences which makes a second async call to an API. That API returns a structure. I have mocked both API calls in my code to return the proper data.

Also in the created() of AAA, a call is made to the function populatePreferences (which takes the data loaded so far and puts it into a structure that the UI then uses to display data on the screen).
So, something like this:

async created() {
   await this.fetchAccounts;
   // some extraneous stuff get some, checking of permissions and the like
   await this.populatePreferences
}.

The problem that I am running into is that the function fetchAccounts calls two APIs (also mocked in my test file), like this:

methods: {
   async fetchAccounts() {
      const accountData = apiCall.getAccounts();
      if error {
         // error handling
      } else {
         // some code to create the accountStruct structure
         const accountStrut = // code that takes the data needed from accountData
         await this.fetchPreferences();
      }
   },
   async fetchPreferences() {
      const preferencesData = apiCall.getPreferences();
      // check for errors and handle them
      // also, code to create the structure preferenceStruct
      this.preferenceStruct = // gets the data from preferencesData and puts it in the structure
   },
   populatePreferences() {
      // loop through accounts
      // for each account get the data from preferencesStruct and place it in a different structure
      this.prefArray.push({
         // structure created here, combining data from both 
         //    this.accountStruct and this.preferenceStruct
      }
   },

My problem is that when the function populatePreferences executes, the structure this.accountStruct has been created but the structure this.preferenceStruct has not. so in the middle of the run of populatePreferences, this.preferenceStruct is undefined. Now this doesn’t break the code, but when this.prefArray is not populated, the component never finishes loading and I can’t test for the things i am looking for (like where there is a control based on the preferences).

So how can I “slow down” the call to populatePreferences is both fetchCustomerAccounts and fetchPreferences are called before populatePreferences starts running? Am I not understanding how things are working? Is something in my test file not configured to allow this to happen?

The component AAA works just fine running locally and on our working remote server. So why does it break in the test run?

Addendum: as I wrote this I thought that maybe changing populatePreferences to async might have an effect. It didn’t.