VueJs object key/value is not reactive in v-for loop

The snippet:

this.purchasedImages = data.images;

Leads us to believe data.images is an array of objects that do not have the download_progress property. So Vue can't detect/react when it changes.

To fix that, you can use Vue.set:

Vue.set(self.purchasedImages[key], 'download_progress', 0);

This is very well explained in Vue.js docs.

Another option: add the property before assigning to data

Just for completeness, you could also add the download_progress before assigning the array to the data property. This would allow Vue to notice it and be able to react to it.

Example:

let data = response.data;this.purchasedImages = data.images.map(i => ({...i, download_progress: 0}));if (this.purchasedImages.length > 0) {    this.purchasedImagesVisible = true;    // no need to set download_progress here as it was already set above}// if above could also be simplified to just:this.purchasedImagesVisible = this.purchasedImages.length;

On a side note, since it is gonna be an array and not an object, I suggest you declare it as such:

data() {    return {        purchasedImages: [], // was: {},

This will have no effect, since you overwrite purchasedImages completely in (this.purchasedImages = data.images;), but it is a good practice as it documents that property's type.