Использование данных внешней функции обратного вызова внутри компонента vuejs

Привет и с праздником!!

Мне нужен совет о том, как я могу получить данные из внешней функции, которая генерирует zip-файл, в мой компонент vuejs, чтобы создать индикатор выполнения для плагина JSZip: https://stuk.github.io/jszip/documentation/api_jszip/generate_async.html

Я импортирую свой файл: импорт { generateZIP } из "@/utils/downloader.js";

и вызовите его внутри vuejs из триггера метода с помощью кнопки:

<template>
...
<div v-for="result of results" :key="result.item.refID">
        <section class="row" @click="selectByRow(result.item)">
          <input
            type="checkbox"
            :id="result.item.refID"
            :value="result.item.refID"
            v-model="checkedItems"
            class="checkbox"
          />
          </div>
          <!-- FOUND RESULTS -->
          <div class="name">{{ result.item.marketingName }}</div>
        </section>
      </div>
      <!-- Download all checked items -->

      <div>
        <button
          v-if="checkedItems.length > 1"
          @click="downloadAll(checkedItems)"
          class="button"
        >
          Download Selection
        </button>
</template>
...
<script>
import { mapState, mapActions, mapMutations, mapGetters } from "vuex";
import { generateZIP } from "@/utils/downloader.js";
...

export default {
data() {
    return {
      // Path to point to pictures storage
      domainName: this.$domainName,
      // Array to gather search results
      searchArray: [],
      checkedItems: [],
      // make a special array for row selection
      checkedRow: []
    };
  },
  methods: 
     downloadAll(files) {
      // Prepare path
      const fullPath = `${this.domainName}/files/${this.reqPath}/`;

      const filesArray = [];
      files.forEach(fileID => {
        let obj = this.results.find(value => value.item.refID == fileID);
        if (obj.item.images !== undefined) {
          filesArray.push(obj.item.images);
        }
      });
      generateZIP(filesArray.flat(), fullPath);
    },
 selectByRow(resultID) {
      // Check if select resultID.refID is already in checkedItems and store it in variable if its present.
      const isInArray = this.checkedItems.find(name => name === resultID.refID);
      // if the ref not in array, add it
      if (!isInArray) {
        this.checkedItems.push(resultID.refID);
        // Add checkedRow full information object
        this.checkedRow.push(resultID);
      } else {
        // if already in array, remove it
        this.checkedItems = this.checkedItems.filter(
          name => name !== resultID.refID
        );

        this.checkedRow = this.checkedRow.filter(
          name => name.refID !== resultID.refID
        );
      }
...

Все работает, теперь я добавляю отзыв, показывающий прогресс zip. Существует доступная функция обратного вызова «updateCallback», которую я вызову в своем downloader.js.

zip.generateAsync({type:"blob"}, function updateCallback(metadata) {
    console.log("progression: " + metadata.percent.toFixed(2) + " %");
    if(metadata.currentFile) {
        console.log("current file = " + metadata.currentFile);
    }
})
...
export {
  generateZIP
}

Круто, он отображает прогресс в моем консольном журнале.

Но КАК я могу импортировать этот объект метаданных в vue, чтобы отобразить его в моем приложении?

Большое спасибо !