Within my component, I have a prop X that I assign to data Y during the created hook. This setup allows me to easily modify Y without affecting X. Both X and Y are Arrays.
Additionally, I've set up a watch on prop X to ensure Y is updated whenever X changes.
However, I've noticed that my watch statement is being triggered every time I use methods like Y.sort().
Here's a simplified version of the code:
props: {
X: Array
},
data: function() {
return {
Y: []
}
},
methods: {
someFunc() {
this.Y.sort() // Triggers the watch on X
}
},
watch: {
X (newVal) {
this.Y = newVal;
}
},
created: function() {
this.Y = this.X;
}Why is this happening?
I've thoroughly examined my app from all angles, but there doesn't seem to be anything in the template or other methods that would update the parent prop.