title: VUE watch triggered infinite loop
body: <p>I'm new to using VUE.Js, and i created a very simple app to try out how it works.</p>
  
  <p>The problem happens immediately where when i run the app, the watch for a variable is triggered in an infinite loop. I cannot figure out why. There is a v-for loop but that is on an array that only has two elements. </p>
  
  <p>Initially the SubTotal should be 0.  But as soon as the app is run, it triggers the Buy method, even though i haven't clicked the buy button and the sub total ends up being 442.37999999999965.</p>
  
  <p>Thanks for any help.</p>
  
  <p>Here is the jsfiddle <a href="https://jsfiddle.net/tbrun2014/gaaarmtv/26/" rel="nofollow noreferrer">Beer shopping cart</a></p>
  
  <p><strong>HTML :</strong></p>
  
  <pre><code>&lt;div id = "growler"&gt;      
    &lt;table&gt;
      &lt;tr&gt;
        &lt;th style='width:150px'&gt;Beer&lt;/th&gt;
        &lt;th style='width:50px'&gt;Price&lt;/th&gt;
        &lt;th style='width:30px'&gt;&lt;/th&gt;
      &lt;/tr&gt;
  
      &lt;tr v-for = "beer in beers"&gt;
        &lt;td&gt;{{ beer.name }}&lt;/td&gt;
        &lt;td&gt;{{ beer.price }}&lt;/td&gt;
        &lt;td&gt;        
          &lt;button :click="buy(beer)"&gt;buy&lt;/button&gt;        
        &lt;/td&gt;
      &lt;/tr&gt;
  
      &lt;tr&gt;
        &lt;td&gt;SubTotal&lt;/td&gt;
        &lt;td&gt;{{subTotal}}&lt;/td&gt;
        &lt;td&gt;&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>JS:</strong></p>
  
  <pre><code>  new Vue({
    el: "#growler",
    data: {
        beers: [
          {name: 'Ahool Ale', price: 2.00}, 
          {name: 'Agogwe Ale', price: 2.38}        
        ],
        shoppingCart: [], 
        subTotal: 0.00        
    }, 
    watch: {
      shoppingCart: function() {
          console.log('shopping cart watch triggered');
        this.updateSubTotal();
      }
    }, 
    methods: {
      updateSubTotal: function () {
        var s=this.shoppingCart.length;
        var t=0;
        for (var i=0;i&lt;s; i++){
          t += this.shoppingCart[i].price;
        }
        this.subTotal = t;
      }, 
      buy: function (beer) {
          console.log('beer pushed on array');
        this.shoppingCart.push(beer);
      }
    },   
    beforeCreate: function() {
      console.log('beforeCreate');
    },
    created: function() {
      console.log('created');                    
    },
    beforeMount: function() {
      console.log('beforeMount');                    
    },
    mounted: function() {
      console.log('mounted');                    
    },
    beforeUpdate: function() {
      console.log('beforeUpdate');
    },
    updated: function() {
      console.log('updated');
    },
    beforeDestroy: function() {
      console.log('beforeDestroy');
    },
    destroyed: function() {
      console.log('afterDestroy');
    }
  
  });
  </code></pre>