Subscribe on changes!

component-defined watch is not watching injected value

avatar
Oct 20th 2020

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 provided 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

avatar
Oct 20th 2020

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