I'm creating an asynchronous function as a method within a Vue instance, which I will invoke once the component has mounted.

What I need to do

After the resolution of a first API request (getDevicesInOrganization), I need to iterate over the array of results from this response, and make more API requests (getDeviceVariableData) using a value passed in as an argument from each result(from first requests response). Then push the value I get back from each response of each getDeviceVariableData API request to an array.

What I've tried

I create a single async function called (called getOfflineListData) that will house the other requests (and get invoked when the component is mounted). Inside getOfflineListData the getDevicesInOrganization request is invoked, and I try to make the additional requests by iterating over the response, but I get an array of undefined values.

    getOfflineListData: function () {
      this.getDevicesInOrganization().then((data) => {
        data.results.forEach((result) => {
          this.names = result.name
          this.ids = result.id

          this.deviceRequestPromises.push(
            this.getDeviceVariableData(result.label),
          )
        })
        Promise.all(this.deviceRequestPromises).then((data) => {
          console.log(data)
        })
      })
    },