Vue.js: progress upload doesn't render in view - vue.js

Question

I'm trying to make an uploader component in Vuejs + Firebase Storage. The method works fine, but I can't get to show the percent uploaded in the view. Here my code:
<template>
<div>
<input type="file" multiple accept="image/*" #change="detectFiles($event.target.files)">
<div>{{progressUpload}}</div>
</div>
</template>
<script>
import { storage } from '../firebase'
export default {
data () {
return {
progressUpload: 0,
file: File,
}
},
methods: {
detectFiles (fileList) {
Array.from(Array(fileList.length).keys()).map( x => {
this.upload(fileList[x])
})
},
upload (file) {
let uploadTask = storage.ref('imagenes/articulos').put(file);
uploadTask.on('state_changed', function(snapshot) {
this.progressUpload = Math.floor(snapshot.bytesTransferred / snapshot.totalBytes * 100);
})
uploadTask.then(() => {
console.info('File uploaded!');
})
}
}
}
</script>
Writing {{ progressUpload }} in the HTML template, doesn't show nothing. But in the console, the result is logged perfectly. The file is uploaded properly

Answer 1

Ok, I found the solution. I had to add the uploadProgress calculation into a watcher that returns the new value of the upload task async method. So, my script has been as follows:
<script>
import { storage } from '../firebase'
export default {
data () {
return {
progressUpload: 0,
file: File,
uploadTask: ''
}
},
methods: {
detectFiles (fileList) {
Array.from(Array(fileList.length).keys()).map( x => {
this.upload(fileList[x])
})
},
upload (file) {
this.uploadTask = storage.ref('imagenes/articulos').put(file);
this.uploadTask.then(() => {
console.info('Archivo guardado correctamente');
})
}
},
watch: {
uploadTask: function() {
this.uploadTask.on('state_changed', sp => {
this.progressUpload = Math.floor(sp.bytesTransferred / sp.totalBytes * 100)
})
}
}
}
</script>