title: Vue.js trying to increment array value when adding new row
body: <p>I am trying to increment an array value when I add a new row in Vue.js, but I get the error:</p>
  
  <blockquote>
    <p>You may have an infinite update loop in a component render function.</p>
  </blockquote>
  
  <p>The JavaScript:</p>
  
  <pre><code>new Vue({
    el: '#app',
    data: () =&gt; ({
      inputs: [{
        id: 0,
        username: ''
      }],
    }),
    methods: {
      add() {
        this.inputs.push({ id: this.id++, username: '' });
      }
    }
  });
  </code></pre>
  
  <p>The markup:    </p>
  
  <pre><code>&lt;div id="app"&gt;
    &lt;div v-for="input in inputs"&gt;
      &lt;input :key="input.id" :name="'username_' + input.id" type="text" v- v-model="input.username" placeholder="username"&gt;
    &lt;/div&gt;
    &lt;button @click="add"&gt;Add&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>However, if I hardcode the value in the add function it works the first time:</p>
  
  <pre><code>add() {
    this.inputs.push({ id: 1, username: '' });
  }
  </code></pre>
  
  <p>So, how can I make it dynamic? Typing <code>id: this.id++</code> does not work.</p>