title: Refresh v-model
body: <p>I'm developing question paper application.
  <img src="https://i.stack.imgur.com/wPpKx.png" alt="enter image description here"></p>
  
  <p>Once I type a question and hit the "+" button, the question goes to the question paper array and counter increased by one.
  The problem is after I hit the "+" button, then also the question which I have entered previously is still in the fields of the UI. <strong>Because of I use v-model to bind the data fields.</strong></p>
  
  <p>What I want is a method to clear those previous question data in UI.
  This is something similar to reset button function.</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;template&gt;
    &lt;div&gt;
      &lt;div class="container" v-if="counter&lt;=5"&gt;
        &lt;h2&gt;Question {{counter}}&lt;/h2&gt;&lt;hr&gt;
  
        &lt;textarea rows="7" cols="75" v-model="question"&gt;&lt;/textarea&gt;&lt;br&gt;&lt;br&gt;
  
        1. Answer &lt;input type="text" v-model="answer1"&gt; &lt;input type="radio" name="q1answer" value="1" v-model="correctAnswer"&gt;&lt;br&gt;&lt;br&gt;
        2. Answer &lt;input type="text" v-model="answer2"&gt; &lt;input type="radio" name="q1answer" value="2" v-model="correctAnswer"&gt;&lt;br&gt;&lt;br&gt;
        3. Answer &lt;input type="text" v-model="answer3"&gt; &lt;input type="radio" name="q1answer" value="3" v-model="correctAnswer"&gt;&lt;br&gt;&lt;br&gt;
        4. Answer &lt;input type="text" v-model="answer4"&gt; &lt;input type="radio" name="q1answer" value="4" v-model="correctAnswer"&gt;&lt;br&gt;
        &lt;hr&gt;
  
        Knowledge Area &lt;select v-model="knowledgeArea"&gt;
          &lt;option value="Maths"&gt;Mathematics&lt;/option&gt;
          &lt;option value="Language"&gt;Language Skills&lt;/option&gt;
          &lt;option value="gk"&gt;General Knowledge&lt;/option&gt;
            &lt;option value="other"&gt;Other&lt;/option&gt;
        &lt;/select&gt;&lt;br&gt;&lt;br&gt;
        &lt;button type="button" class="btn" @click="pushToArray" &gt;
        &lt;span class="glyphicon glyphicon-plus"&gt;&lt;/span&gt;&lt;/button&gt;
      &lt;/div&gt;
      &lt;div v-if="counter&gt;5"&gt;
        &lt;button type="button" class="btn btn-primary" @click="onSubmit"&gt;Save Question Paper&lt;/button&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  
  <pre class="lang-js prettyprint-override"><code>&lt;script&gt;
  import axios from 'axios';
  var questionPaper = [];
  export default {
  
      data () {
  
        return {
          question:'',
          answer1:'',
          answer2:'',
          answer3:'',
          answer4:'',
          correctAnswer:'',
          knowledgeArea:'',
          counter:1,
          show:true
  
        }
      },
      methods: {
  
        onSubmit () {
  
        },
  
        pushToArray(){
          const formData = {
            question: this.question,
            correctAnswer: this.correctAnswer,
            answer1: this.answer1,
            answer2: this.answer2,
            answer3: this.answer3,
            answer4: this.answer4,
            knowledgeArea:this.knowledgeArea
  
          }
          this.counter++;
          questionPaper.push(formData);
  
        }
      }
    }
  
  &lt;/script&gt;
  </code></pre>