title: VueJS doesn't re-render until loop is finished
body: <p>I have this piece of VueJS code:</p>
  
  <pre><code>new Vue({
    el: '#app',
    data: {
      tiles: [
        { isActive: false },
        { isActive: false },
        { isActive: false },
        { isActive: false },
        { isActive: false }
      ]
  
    },
    methods: {
      startWithLoop: function() {
        console.log("startWithLoop");
        for(var i = 0; i &lt; 10000; i++ ) { this.blink() };
      },
      startWithInterval: function() {
        console.log("startWithInteral");
        setInterval(this.blink);
      },
      blink: function(){
        console.log("blink");
        var index = Math.floor(Math.random() * this.tiles.length);
        this.tiles[index].isActive = !this.tiles[index].isActive;
      }
    }
  })
  </code></pre>
  
  <p>If I call the method <code>startWithInterval</code> I can see in the view how the <code>tiles</code> are changing state all the time.</p>
  
  <p>If I call the method <code>startWithLoop</code> I don't see any change in the view until the loop is finished.</p>
  
  <p>Here is <a href="https://jsfiddle.net/fguillen/wc5jxvru/72/" rel="nofollow noreferrer">the JSFiddle</a></p>
  
  <p>How can I trigger changes in the view on each step of the loop?</p>