Vue JS直播进度条

Question

I have the following scenario: A user clicks on a button in the settings .
This button will do a resource get call which calls an API.
This API will do nothing but some processing.
It will make a call to an ERP system and then process that result into a database.

Now I've managed to achieve all of the above.
However, I wish to have a live progress bar which will display the state of the processing.
Now I've googled a lot on how to achieve this but sadly I haven't found anything yet.

Could anyone help me in the right way?

**** EDIT ****

I'll try to give some more details.

I have a button in a Vue

<button type="button" class="btn btn-space btn-primary md-trigger" v-on:click="syncItemGroups();">{{ $t('titles.erp.sync_item_groups') }}</button>

The onclick event calls the Vue method syncItemGroups() which contains the following code:

syncItemGroups() {
    var _this = this;
    this.$dispatch('add-global-loader');
    _this.erpItemGroups = [];
    this.syncItemGroupsDataSource.get().then(function (response) {
        _this.erpItemGroups = response.data.erpItemGroups;
        _this.erpItemGroupsCount = _this.erpItemGroups.length;
        _this.$dispatch('remove-global-loader');
    });
}

The API that is being called contains the following code:

public function itemGroups()
{
    $tenantId    = $this->getCurrentTenant()->id;
    $integration = TenantIntegration::where('type', '=', 'erp')->where('tenant_id', '=', $tenantId)->get()->first();

    $this->getErpProvider()->syncItemGroups($integration->id, $tenantId);

    $itemGroups = ErpItemGroup::whereTenantId($tenantId)->get();

    return [
        'success'       => true,
        'erpItemGroups' => $itemGroups
    ];
}

Within this method the syncItemGroups is being called. This contains a foreach loop which does the processing. Now what i wish to achieve is that within this foreach loop the progress of this loop is being reported back to the website to populate a progress bar.

public function syncItemGroups($integrationId, $tenantId)
{

    $connection = $this->connect($integrationId);
    $connection->setDivision(1617429);
    $itemGroups = new ItemGroup($connection);
    $result     = $itemGroups->get();



    foreach ($result as $itemGroup) {
        $existingErpItemGroup = ErpItemGroup::where([
            ['tenant_id', $tenantId],
            ['item_group_id', $itemGroup->Code],
        ])->get()->first();
        if (is_null($existingErpItemGroup) ||
            $existingErpItemGroup->item_group_id !== $itemGroup->Code ||
            $existingErpItemGroup->description !== $itemGroup->Description) {
            $erpItemGroup                =
                is_null($existingErpItemGroup) ? new ErpItemGroup() : $existingErpItemGroup;
            $erpItemGroup->tenant_id     = $tenantId;
            $erpItemGroup->item_group_id = $itemGroup->Code;
            $erpItemGroup->description   = $itemGroup->Description;
            $erpItemGroup->save();
        }
    }
}

Hopefully it's clear now what i wish to achieve.

Thanks in advance.

Kind regards, Pim Dröge