title: Vue.js: child components are not being re-rendered
body: <p>I am trying to get my head wrap around how props are passed to child components and how they are updated from there.</p>
  
  <pre class="lang-js prettyprint-override"><code>// parent.vue
  &lt;template&gt;
      &lt;div&gt;
          &lt;div v-for="elem in getCurrentArray"&gt;
              &lt;child-component :elem="elem"&gt;&lt;/child-component&gt;
          &lt;/div&gt;
          &lt;button @click.prevent="currentIdx--"&gt;Prev&lt;/button&gt;
          &lt;button @click.prevent="currentIdx++"&gt;Next&lt;/button&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  &lt;script&gt;
      export default {
          components : {
              ChildComponent
          },
          data(){
              return {
                  arr : [ ["A", "B", "C" ], [ "D", "E" ]], // this would be populated from vue store
                  currentIdx : 0
              }
          },
          computed : {
              getCurrentArray(){
                  return this.arr[this.currentIdx]
              }
          },
      }
  &lt;/script&gt;
  </code></pre>
  
  <pre class="lang-js prettyprint-override"><code>// child.vue
  &lt;template&gt;
      &lt;div&gt;Prop: {{elem}} &lt;input type="text" v-model="myinput" @blur="save" /&gt;&lt;/div&gt;
  &lt;/template&gt;
  &lt;script&gt;
      export default {
          props : [ "elem" ],
          data(){
              return {
                  myinput : this.elem
              }
          },
          methods : {
              save(){
                 // this.$store.dispatch("saveChildElement", { myinput }
              }
          },
          mounted(){ console.log( this.elem + " being rendered" ) }
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>In this example, I have two sets of arrays ['A','B','C'] and ['D','E'].  On page load, the first set is rendered thru child components.</p>
  
  <p><a href="https://i.stack.imgur.com/8S2x3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8S2x3.png" alt="On page load"></a></p>
  
  <p>Looks good.  However, when I click next to go to the second set, I get this:
  <a href="https://i.stack.imgur.com/X51Fg.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/X51Fg.png" alt="enter image description here"></a></p>
  
  <p>So, while the props are being passed correctly, the textbox input values are not updated.  When I checked the console.log, it's clear that vue does not re-render child components for "D" and "E".  Instead, it simply uses the existing components for "A" and "B".</p>
  
  <p>Is there a way to force vue to re-render the components?  If not, how can I make sure that the textbox input gets the latest prop values?  Keep in mind that I want to be able to save changes to the input values via vue store.</p>