title: Vue seems to be reusing child component when only one at a time is showing
body: <p>I am rendering child components in a v-for loop, but only showing one at a time. I assumed that Vue will create a seperate/new child component for each render. </p>
  
  <p>But it appears to be using the same instance, since my data values in the child component persist even after being changed out. </p>
  
  <p>Right now, i am creating a watcher to reset the data values manually when the question changes.. but that feels hacky. </p>
  
  <p>Is this an expected behavior?</p>
  
  <pre><code>  // Parent Component
      &lt;AnswerQuestion
        v-for = "question in questions"
        v-bind:question = "question"
        v-if = "question.id == currentVisibleIndex"
        v-on:questionAnswered = "questionAnswered"
        &gt;
      &lt;/AnswerQuestion&gt;
  
  
  
    // Child Component
    props: ["question"],
    data() {
      return {
        options: options,
        commentText: null
      }
    }
  
    // what i am doing now, feels hacky
    watch: {
      question: function (newQuestion) {
        this.selectedOption = null
        this.commentText = null
      }
    },  
  </code></pre>