title: Vue.js : update Bottstrap progressBar within loop in Method
body: <p>My problem : </p>
  
  <p>I have a Vue.js method directive who declare a loop from 1 to 1.000.000.  I would like to update my progressBar at 50%. So when i == 500000, I would like witdh css rules of my progressBar is 50%. </p>
  
  <p>Here is the html code for the progressBar</p>
  
  <pre><code> &lt;div id="app"&gt;
   &lt;button v-on:click.stop="executeLoop()"&gt;Execute the loop&lt;/button&gt;
  
    &lt;div class="progress"&gt;
        &lt;div class="progress-bar progress-bar-striped bg-success" 
             v-bind:style="barWidthCalculated" v-bind:aria-valuenow="barWidthCalculated" 
             aria-valuemin="0" aria-valuemax="100"&gt;
        &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is my Vue.js code</p>
  
  <pre><code>let vm = new Vue({
      el: '#app',
      data(){ return {
          progression : 0,
      }},
  
      methods: {
          executeLoop: function () {
                  for (var i = 0; i &lt; 1000000; ++i) {
                      if (i == 500000) {
                          this.progression = 50;                        
                          //this.$set(this, progression, 30); // This instruction gives me "Reference error: progression is not defined"
                      }
                  }
          },
      },
  
      computed: {
          barWidthCalculated: function () {
              return {
                  width: this.progression + '%'
              };
          }
      }
  })
  </code></pre>