component-defined watch is not watching injected value
Version
3.0.1
Reproduction link
https://jsfiddle.net/dapo/kLwnbzhu/
Steps to reproduce
Create a component, where the component uses a component watch to watch for changes on an injected variable. Then update the provide
d variable on a parent
app.component('my-component', {
inject: ["names"],
watch:{
names(new_names){
console.log("watch1", new_names) // <= this will not fire
}
},
mounted(){
Vue.watch(()=>{
console.log("watch2", this.names) // <= this one will fire
})
},
template: document.getElementById("component-template").innerHTML
})
What is expected?
According to the documentation,
The
watch
API is the exact equivalent of the component watch property
I would expect defining watch
through the component would still work on a reactive inject
What is actually happening?
only the watch api gets triggered
You're using watch
"wrong" in watch2
, or rather: not in a way that is analogous to watch1.
See this fiddle for what the real analogous implementation looks like:
https://jsfiddle.net/Linusborg/gxv1kabs/1/
...and it behaves the same as watch1 - it doesn't log anything because newNames === oldNames
(it's still the same array instance).
Use a deep watch if you want to watch for changes inside the array