title: Adding form inputs dynamically with element-ui
body: <p>I'm trying to add fields dynamically by clicking a button to add them and a button for removing them, I want two fields to appear at the beginning and to be required and there is the option to add more and remove the extra ones. The purpose of this is for adding multiple choice question answers to a question that is being created. </p>
  
  <p>This is my code so far</p>
  
  <p>The form</p>
  
  <pre><code>&lt;div v-if="form.response_type_id === 2"&gt;
      &lt;el-divider&gt;&lt;/el-divider&gt;
      &lt;div v-for="(option, index) in options" :key="index"&gt;
          &lt;el-row&gt;
              &lt;el-col :span="22"&gt;
                  &lt;p class="el-form-item__label"&gt;Opciones&lt;/p&gt;
              &lt;/el-col&gt;
              &lt;el-col :span="2"&gt;
                  &lt;div class="btn-link-plus action-button" @click="addOption(index)"&gt;
                      &lt;i class="fas fa-plus" v-show="index == options.length - 1"&gt;&lt;/i&gt;
                  &lt;/div&gt;
              &lt;/el-col&gt;
          &lt;/el-row&gt;
          &lt;el-row&gt;
              &lt;el-col :span="20"&gt;
                  &lt;el-form-item prop="option"&gt;
                      &lt;el-input v-model="option.option"&gt;&lt;/el-input&gt;
                  &lt;/el-form-item&gt;
              &lt;/el-col&gt;
              &lt;el-col :span="2"&gt;
                  &lt;div class="btn-link-delete action-button" @click="removeOption(index)"&gt;
                      &lt;i class="fas fa-trash-alt"
                          v-show="index || (!index &amp;&amp; options.length &gt; 1)"&gt;&lt;/i&gt;
                  &lt;/div&gt;
              &lt;/el-col&gt;
          &lt;/el-row&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Data</p>
  
  <pre><code>options: [];
  
  </code></pre>
  
  <p>Methods</p>
  
  <pre><code>addOption() {
      this.options.push({
          survey_question_id: this.form.id,
          option: ''
      });
  },
  removeOption(index) {
      this.options.splice(index, 1);
  },
  </code></pre>
  
  <p>Currently, nothing shows up, everything inside the <code>&lt;div v-for&gt;</code> does not appear. The logic behind the code is that when the response type of the question is set as multiple choice the above code will appear inside the form to allow the user to then create the different choices, two of them being required. Ideally I would like to add a delete button only to the inputs that are added and not the ones that are required.</p>