изменение данных vue2 не обновляет представление

Question

У меня есть простой компонент загрузки файлов FileUpload.vue

<template>
<div>
    <input type="file" name="file" id="file" v-on:change="handleFileUpload()" ref="file">
    <button class="btn shadow-lg first" @click="addFiles()">SELECT FILE</button>
    <button class="btn shadow-lg" v-on:click="handleSubmit()">UPLOAD</button>
    <p> {{uploadPercentage}} </p>

</div>
</template>

<script>
import axios from 'axios';

export default {
name: 'FileUpload',
data() {
    return {
        file: '',
        uploadPercentage: 0

    }
},

methods: {
    handleFileUpload: () => {
        this.file = document.getElementById('file').files[0];
    },
    addFiles: () => {
        document.getElementById('file').click();
    },
    handleSubmit: () => {
        let formData = new FormData();
        formData.append('file', this.file);
        axios.post('/file/create',
        formData,
        {
            headers: {
                'Content-Type': 'multipart/form-data'
            },
            onUploadProgress: (progressEvent) => {
                console.log(this.uploadPercentage);
                this.uploadPercentage = parseInt(Math.round(progressEvent.loaded * 100 / progressEvent.total));
            }
        }
        )
        .then((response) => {
            console.log(response.data);
        })
        .catch((error) => {
            console.log(error);
        })
    }
}
}
</script>

Данные uploadPercentage инициализируются равными 0. Когда начинается загрузка файла, значение uploadPercentage изменяется в методе onUploadProgress . Если я консоль журнала uploadPercentage , он показывает изменения в значении. Идет от 0 до 100.

console.log(this.uploadPercentage)

Но, на мой взгляд, uploadPercentage никогда не меняется. Всегда показывает начальное значение 0.

<p> {{uploadPercentage}} </p>

Что я делаю не так?

Заранее спасибо.