title: Vuejs - Proper way to clone an element, and append to DOM
body: <p>I have a HTML input field to enter some information:</p>
  
  <pre><code>&lt;div id="fruitForm"&gt;
      &lt;div class="inputArea"&gt;
          &lt;label for="fruit0"&gt;Enter Fruit Name&lt;/label&gt;
          &lt;input id="fruit0"&gt;&lt;/input&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;button @click="newInputField"&gt;Add More Fruit Input Fields&lt;/button&gt;
  &lt;button @click="submit"&gt;Submit Fruit&lt;/button&gt;
  </code></pre>
  
  <p>And then I handle that click event:</p>
  
  <pre><code>export default {
      data() {
          return {
  
          }
      },
      methods: {
          newInputField() {
              //Create another input area for users to input fruits
          },
          submit() {
              //Do something here
          }
      }
  }
  </code></pre>
  
  <p>When a user selects the <code>Add More Fruit Input Fields</code> button, it should create a new input area so that the HTML looks like this:</p>
  
  <pre><code>&lt;div id="fruitForm"&gt;
      &lt;div class="inputArea"&gt;
          &lt;label for="fruit0"&gt;Enter Fruit Name&lt;/label&gt;
          &lt;input id="fruit0"&gt;&lt;/input&gt;
      &lt;/div&gt;
  
      &lt;div class="inputArea"&gt;
          &lt;label for="fruit1"&gt;Enter Fruit Name&lt;/label&gt;
          &lt;input id="fruit1"&gt;&lt;/input&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;button @click="newInputField"&gt;Add More Fruit Input Fields&lt;/button&gt;
  &lt;button @click="submit"&gt;Submit Fruit&lt;/button&gt;
  </code></pre>
  
  <p>Now, I've been using traditional DOM manipulation methods via vanilla Javascript to accomplish this... stuff like this:</p>
  
  <pre><code>const inputArea = document.getElementsByClassName('inputArea');
  </code></pre>
  
  <p>And then I change the <code>id</code>'s of the input field, and then I use <code>appendChild</code> to add the new input field to the DOM.</p>
  
  <p>So my question is: how <em>should</em> I be cloning this element with vuejs? I feel I'm not approaching this in the <em>vuejs</em> way. Should I be approaching this like a list and using <code>v-for</code>? Or something else?</p>