Let me explain the issue here in a simple way. I have a parent component where I execute a method that changes a property value of an object called products. This is working fine.
However, when I pass this object as a prop to a child component and watch it deeply, it fails. You can see that the alert('changed'); is never triggered:
Vue.component('child', {
props: ['prods'],
watch: {
prods: {
handler: function(new_val, old_val) {
alert('watched');
},
deep: true
}
}
})
new Vue({
el: '#app',
template: '<div>{{products[0].value}}<br><button v-on:click="incre">increment prod 0</button></div>',
data: {
products: [
{id: 1, name: 'prod1', value: 20},
{id: 2, name: 'prod2', value: 40},
],
},
methods: {
incre: function() {
this.products[0].value += 20;
}
}
})<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3345465673011d071d07">[email protected]</a>/dist/vue.js"></script>
<div id="app">
<child v-bind:prods="products"></child>
</div>
https://jsfiddle.net/dmbgmxzh/6/(Update):
this works: https://jsfiddle.net/dmbgmxzh/5/
this doesn't: https://jsfiddle.net/dmbgmxzh/6/
This is strange...