Avoid calling a method in a loop

Question

I have a table that has expandable rows with more details in each expanded row. Currently my methods below get the data correctly but the loop in async getData loads the details from the start. Is there a way to loop without loading the data from the start. I want to make another method that calls the data when the row is clicked but I'm not sure how to fix the async getData method.

async getData(currPage) 
        {
            const skip = (currPage - 1) * this.page.top;
            const response = await this.axios.get(`/s/audiences`, {
                params: {
                    skip: skip,
                    top: this.page.top,
                },
            });
            this.page = response.data.pages;

            for (const audience of response.data.data) 
                await this.getNetworks(audience.id); //this calls the details
            
            this.audiences = response.data.data;
        },
        async getNetworks(audId) // details
        {
            try
            {
                const response = await this.axios.get("/s/audiences/network-audiences?audId=" + audId);
                               
                if (!this.networkAudiences[audId])
                {
                    this.$set(this.networkAudiences, audId, {});
                    this.$set(this.networkAudiences[audId], 'isExpanded', false);
                }
                    
                this.$set(this.networkAudiences[audId], 'data', response.data ? response.data.data : []);
            }
            catch (error)
            {
                if (error.message && error.message.includes("404"))
                {
                    if (!this.networkAudiences[audId])
                    {
                        this.$set(this.networkAudiences, audId, {});
                        this.$set(this.networkAudiences[audId], 'isExpanded', false);
                    }
                        
                    this.$set(this.networkAudiences[audId], 'data', []);
                }
                else
                {
                    console.log(error.message);
                }
            }
                
        },
          toggle(audId) //button for details 
        {
            this.$set(this.networkAudiences[audId], 'isExpanded', !this.networkAudiences[audId].isExpanded);
        },

                  <div class="ex_btn"> // expand button
                  <span @click.prevent="toggle(audience.id)">
                    <font-awesome-icon
                      :icon="
                        (networkAudiences[audience.id].isExpanded)
                          ? 'caret-down'
                          : 'caret-right'
                      "
                      :class="[
                        'dropdown--arrow fa-2x cl-blue-primary relative t-3 g-link',
                      ]"
                    />
                  </span>
                </div>