Array methods splice / push do not work in watch method of subcomponent
Version
3.2.31
Reproduction link
Steps to reproduce
click the four buttons to test.
CDN version:
let vContent = {
name: "v-content",
template: <div>{{cnt}}</div>,
props: ["list"],
data() {
return {
cnt: -1,
};
},
watch: {
list(val) {
if (Array.isArray(val)) {
this.cnt = this.list.length;
}
},
},
};
window.app = Vue.createApp({
components: {
"v-content": vContent,
},
template: <div class="app"><v-content :list="list"></v-content></div> <button @click="clear1">clear1</button><button @click="clear2">clear2</button><button @click="push">push</button><button @click="change">change</button>,
data() {
return {
list: [],
};
},
methods: {
clear1() {
this.list.splice(0); // not work
},
clear2() {
this.list = []; // work
},
push() {
this.list.push(1); // not work
},
change() {
this.list = [1, 2]; // work
},
},
}).mount("#app");
What is expected?
The value of cnt should reflect the changes of the four buttons
What is actually happening?
Only clear2 and change worked.
you should add deep: true.
https://v3-migration.vuejs.org/breaking-changes/watch.html