VueJs Progress Bar to track VueX mutation progress - vue.js

Question

I'm having an issue creating a Progress bar that tracks the real time progress of a VueX mutation.
I have a button component that runs a mutation when the user clicks the button. This mutation goes through an array and performs a function on each item in the array. While performing this function it updates a 'progress' status in the store. I have a progress bar component that reads this 'progress' status from the store as a computed property.
I was hoping that as the progress status updates so would the progress bar but it seems I am having an issue with the DOM Rendering the change as quickly as it is being updated. My mutation runs and the progress bar goes from 0 to 100 with no update in-between.
I guess I'm having an issue conceptualizing why my DOM isn't redrawing as quickly as I am updating the 'progress' status and if there is any way of accomplishing this

Answer 1

I've found that the 'For' loop I use to process my array 'freezes' the dom and stops it from re-rendering. To fix this I've used a 'setTimeout' call. This seems like a hack but will hopefully help someone else who comes up against this issue. More answers appreciated. thanks to #Eric Guan for putting me down this path. I found the answer on another post here -> How to stop intense Javascript loop from freezing the browser
var self = this;
var animals = ['dog', 'cat','lion','tiger','bear'];
var processing = function() {
var animal = animals.shift();
console.log(animal);
if (animals.length > 0) {
console.log(animals.length);
var timer = setTimeout(processing, 1000);
self.$store.commit('updateStatus', {progress : animals.length*20, msg: 'Progress Bar Test', status: 'processing', display: true});
} else {
console.log('clearing timeout');
self.$store.commit('updateStatus', {progress : 100, msg: 'Progress Bar Test', status: 'processing', display: false});
clearTimeout(timer);
}
}
processing();