FI ie загрузка с индикатором выполнения в vuex

Question

Я не могу получить процент в компоненте из файла действий VueX. Он не действует как реактивный. Я использовал эту статью в качестве руководства https://serversideup.net/file-upload-progress-indicator-with-axios-and-vuejs/, но все еще не смог получить результат.

Vue Компонент

<progress class="col-md-12" max="100" :value="uploadPercentage"></progress>
<script>
export default {
    data() {
            return {
                files: '',
                uploadPercentage: 0,
            }
        },
}
</script>

Действие. js

AddDocument({ commit }, document) {
        // commit('ADD_ITEM_DOCUMENT', document);
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                axios({
                        method: 'post',
                        url: `/add-file/${document.type}/${document.input_name}/${document.parent_id}`,
                        data: document.file,
                        headers: { 'Content-Type': 'multipart/form-data' },
                        onUploadProgress:function( progressEvent ) {
                            this.uploadPercentage = parseInt( Math.round( ( progressEvent.loaded / progressEvent.total ) * 100 ))
                        }.bind(this)
                    })
                    .then(response => {
                        var data ={
                            parent_id:document.parent_id,
                            document : response.data.data,
                        };
                        commit('ADD_ITEM_DOCUMENT', data);
                        resolve(response)
                    }).catch(error => {
                        console.log(error)
                        reject(error)
                    })
            }, 2000)
        })
    },