Progressbar на Vue + Axios

Хочу реализовать прогрес бар на отправку формы с файлами. Использую Vue + Axios

            <md-table>
              <md-table-row>
                <md-table-head>Названия документа</md-table-head>
                <md-table-head>Файл</md-table-head>
              </md-table-row>

              <md-table-row v-for="doc in docs" :key="doc.id">
                <md-table-cell width="50%">{{ doc.title }}</md-table-cell>
                <md-table-cell width="50%">
                  <input
                    id="file-upload"
                    type="file"
                    @change="uploadFile(doc)"
                    :ref="doc.type"
                    accept=".pdf, .docx, .doc, .xls, .xlsx"
                  />
                </md-table-cell>
              </md-table-row>
            </md-table>
            <progress max="100" :value.prop="uploadPercentage"></progress>
            <md-button class="md-success" @click="sendFile">
              Загрузить
            </md-button>

js

data: () => ({
    kvartal: null,
    year: null,
    docs: [
      {id: 1, title: 'Баланс', value: null, type: 'balance'},
      {id: 2, title: 'ОПУ', value: null, type: 'opu'},
      {id: 3, title: 'Аудит', value: null, type: 'auditreport'}
    ],
    title: 'Создать отчет',
    uploadPercentage: 0
  }),
  methods: {
    ...mapActions('upload_file', ['uploadFileReport']),
    uploadFile({type}) {
      for (let i = 0; i < this.docs.length; i++) {
        if (this.docs[i].type == type) {
          this.docs[i].value = this.$refs[type][0].files[0]
        }
      }
    },
    async sendFile() {
      if (this.kvartal && this.year) {
        const formData = new FormData()
        for (let i = 0; i < this.docs.length; i++) {
          if (this.docs[i].value != null) {
            formData.append(this.docs[i].type, this.docs[i].value)
            formData.append(this.docs[i].type, this.docs[i].title)
          }
        }
        const res = await this.uploadFileReport(formData)
        if (res.status == 200) {
          this.$router.push('/dashboard/reports')
        } else {
          console.log('Загрузка файла не удалась')
        }
      }
    }
}

Дальше код отправляется в vuex actions

async uploadFileReport({}, data) {
      try {
        const res = await Api.uploadFileReport(data);
        return res
      } catch (error) {

      }
    }

А от туда в Api соответственно:

const Api = axios.create({
  baseURL: 'http://localhost:8088/api',
  headers: {
    Accept: 'application/json'
  }
});
export default {
uploadFileReport(data){
    return Api.post('/file', data, {
      headers: { 
        'Content-Type': 'multipart/form-data'
      }
    })
  }
}

Гугл подсказал что надо добавить что-то вроде такого:

onUploadProgress: function(progressEvent) {
        this.uploadPercentage = parseInt(Math.round(( progressEvent.loaded / progressEvent.total) * 100);

Не могу разобраться куда и что вставить чтобы заработал мой прогрес бар.