<h3 dir="auto">Version</h3>
<p dir="auto">2.5.15</p>
<h3 dir="auto">Reproduction link</h3>
<p dir="auto"><a href="https://jsfiddle.net/cckLd9te/950/" rel="nofollow">https://jsfiddle.net/cckLd9te/950/</a></p>
<h3 dir="auto">Steps to reproduce</h3>
<p dir="auto">when you type on the input, view not update with the input value</p>
<h3 dir="auto">What is expected?</h3>
<p dir="auto">view should display input value properly</p>
<h3 dir="auto">What is actually happening?</h3>
<p dir="auto">input value changes to an object</p>
<p dir="auto">Hi,</p>
<p dir="auto">I'm new to Vue and I'm having a problem when I update the parent data, the child props is not updated.<br>
Here's my code. If you click any of the Save button, element[0] of Parent will be updated to new value which is "Test" but if you check Child prop it wasn't updated.</p>
<p dir="auto"><code class="notranslate">&lt;div id="app"&gt;</code><br>
<code class="notranslate">&lt;div v-for="item in items"&gt;</code><br>
<code class="notranslate">Parent:&gt;&gt; {{item}}</code><br>
<code class="notranslate">&lt;child :itemvalue="item" v-on:update-row="updateRow"&gt;</code><br>
<code class="notranslate">&lt;/div&gt;</code><br>
<code class="notranslate">&lt;/div&gt; </code></p>
<p dir="auto"><code class="notranslate">&lt;script type="text/x-template" id="child"&gt;</code><br>
<code class="notranslate">	&lt;div&gt; </code><br>
<code class="notranslate">		&lt;input type="text" :value="itemvalue" &gt;</code><br>
<code class="notranslate">		&lt;button @click="$emit('update-row')"&gt; Save &lt;/button&gt;</code><br>
<code class="notranslate">	&lt;/div&gt;</code><br>
<code class="notranslate">&lt;/script&gt;</code></p>
<p dir="auto"><code class="notranslate">&lt;script&gt;</code><br>
<code class="notranslate">Vue.component('child', {</code><br>
<code class="notranslate">template: '#child',</code><br>
<code class="notranslate">  props: ['itemvalue']</code><br>
<code class="notranslate">});</code></p>
<p dir="auto"><code class="notranslate">new Vue({</code><br>
<code class="notranslate">  el: '#app',</code><br>
<code class="notranslate">  data: {</code><br>
<code class="notranslate">    items: ['a','b', 'c', 'd', 'e','f', 'g']</code><br>
<code class="notranslate">  },</code><br>
<code class="notranslate"> methods: {</code><br>
<code class="notranslate">updateRow : function (index) {</code><br>
<code class="notranslate">this.items[0] = 'test';   //Line XXX</code><br>
<code class="notranslate">}</code><br>
<code class="notranslate"> }</code><br>
<code class="notranslate">});</code><br>
<code class="notranslate">&lt;/script&gt;</code></p>
<p dir="auto">This will work if I update <code class="notranslate">Line XXX</code> to <code class="notranslate">this.items = ['a','b','c'];</code><br>
I just want to change 1 element not the whole array.</p>