title: Vue: Add a new dynamic form input when a value is added to the previous input
body: <p>so I need to have a form input create whenever the user adds a value to the previous input. I've found some great questions about how to create dynamic forms and also how to watch form inputs to call a function but I don't know how to combine the two and make them work together.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>new Vue({
    el: '#form',
    data: {
      items: [],
    },
    methods: {
      addItem() {
        this.items.push({
          value: ''
        });
      }
    }
  })</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"&gt;&lt;/script&gt;
  
  &lt;div id="form"&gt;
    &lt;input v-for="item in items" v-model="item.value"&gt;
    &lt;button @click="addItem"&gt;add&lt;/button&gt; {{items}}
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>So currently I can make this work by adding a button to add the new input but the input doesn't show until after you click the button. I tried <code>v-for="item in items + 1"</code> but that cause crazy unexpected results and after I thought about it I realized why that couldn't work. I would really like to have an input box on load and if the user adds any value to that box a new one will be created.</p>