title: Vue 2 mutating a data property inside a v-for causes infinite loops / problems
body: <p>Although I could not find in the documentation, it appears that mutating a data array property isn't a good idea, even when it's not being rendered out to the view. </p>
  
  <p>See this fiddle: <a href="https://jsfiddle.net/078v5142/3/" rel="nofollow noreferrer">https://jsfiddle.net/078v5142/3/</a></p>
  
  <p>I need to decrement <code>conditionalSet</code>. I'm using <code>pop()</code> on every v-for loop to check the condition of an index. I can't use a computed property because i need to pass the index. </p>
  
  <p>I can't just copy the <code>conditionalSet</code> array either because it needs to be tracked when a condition is set and popped. </p>
  
  <p>This is a greatly simplified problem that I'm facing.</p>
  
  <pre><code>new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue.js! I do not like loops, all that much.',
      imageSet: [
       'a','b','c','d','e','f','g', 'h', 'i', 'j'
      ],
      conditionalSet: [1,2]
    },
    methods: {
      doShow(index){
       if(this.someInnerConditionThatsNotRenderedOut()){
         if( index === 1 || index === 4 || index === 5 || index === 6){
           this.conditionalSet.pop(); // &lt;-- this is the problem, but how to I track?
           return true;
         }
       }
       console.log('I should no show index 5 and index 6')
      },
      someInnerConditionThatsNotRenderedOut(){
       return true //comment this out. No error.
       return this.conditionalSet.length &gt; 0
      }
    }
  })
  </code></pre>