title: VueJs object key/value is not reactive in v-for loop
body: <p>I have following problem, which I don't know how to properly tackle.</p>
  
  <p>I have "list" of all purchased images on my view. I display them with v-for loop. Each image also has progress-bar element, so when user clicks on download button, downloadContent function gets executed and progress bar should be displayed.</p>
  
  <p>So my html looks like this.</p>
  
  <pre><code>&lt;section class="stripe"&gt;
      &lt;div class="stripe__item card" v-for="(i, index) in purchasedImages"&gt;
          &lt;progress-bar :val="i.download_progress"
                        v-if="i.download_progress &gt; 0 &amp;&amp; i.download_progress &lt; 100"&gt;&lt;/progress-bar&gt;
          &lt;div class="card__wrapper"&gt;
              &lt;img :src="'/'+i.thumb_path" class="card__img"&gt;
          &lt;/div&gt;
          &lt;div class="btn-img card__btn card__btn--left" @click="downloadContent(i.id_thumb, 'IMAGE', index)"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>And this is my JS Code</p>
  
  <pre><code>import Vue from 'vue'
  import orderService from '../api-services/order.service';
  import downloadJs from 'downloadjs';
  import ProgressBar from 'vue-simple-progress';
  
  export default {
      name: "MyLocations",
      components: {
          ProgressBar: ProgressBar
      },
      data() {
          return {
              purchasedImages: {},
              purchasedImagesVisible: false,
          }
      },
      methods: {
          getUserPurchasedContent() {
              orderService.getPurchasedContent()
                  .then((response) =&gt; {
                      if (response.status === 200) {
  
                          let data = response.data;
                          this.purchasedImages = data.images;
  
                          if (this.purchasedImages.length &gt; 0) {
                              this.purchasedImagesVisible = true;
                              // Set download progress property
                              let self = this;
                              this.purchasedImages.forEach(function (value, key) {
                                  self.purchasedImages[key].download_progress = 0;
                              });
                          }
                      }
                  })
          },
          downloadContent(id, type, index) {
              let self = this;
              orderService.downloadContent(id, type)
                  .then((response) =&gt; {
                      let download = downloadJs(response.data.link);
                      download.onprogress = function (e) {
                          if (e.lengthComputable) {
                              let percent =  e.loaded / e.total * 100;
                              let percentage = Math.round(percent);
                              if (type === 'IMAGE') {
                              // Is this proper way to set one field reactive?
                           self.purchasedImages[index].download_progress = percentage;
                                  if (percentage === 100) {
                                      self.purchasedImages[index].download_progress = 0;
                                  }
                              }
                          }
                      }
                  })
          },
      },
      mounted: function () {
          this.getUserPurchasedContent();
      }
  };
  </code></pre>
  
  <p>So the problem is. When user clicks on download button, download starts to execute and I get downloaded content, but I don't see progress bar. So I wonder, is this a proper way to set element reactive? How should my implementation look like? How to properly set <code>self.purchasedImages[index].download_progress</code> object key value, so progress bar will be visible?</p>
  
  <p>If you need any additional informations, please let me know and I will provide. Thank you!</p>