How does Vue.js set observers in computed properties?

Question

If I have a computed property that looks like this:

computed: {
  greeting() {
    const state = this.$store.state;
    if (state.name === 'Joe') {
      return 'Hey, Joe';
    } else {
      return 'Hello, ' + state.name;
    }
  }
}

What object(s) is Vue going to set an observer on? this.$store.state or state.name or both? Asking because:

• I want to make sure this Vue instance isn't listening for any and all changes to the Vuex store -- it seems like that could degrade performance in a large application.
• I have a business requirement to set some computed properties via props, and I'm having a hard time getting them to be reactive.
• I'm just plain curious.

Answer 1

Provided that the this.$store.state and this.$store.state.name properties are reactive (they should be), then Vue will observe changes to these properties and re-evaluate greeting when the values of these properties change.

No other properties will be observed.

This will cause greeting to be re-evaluated:

this.$store.state.name = 'foo';
this.$store.state = bar();

This will not cause greeting to be re-evaluated:

this.$store.state.foo = 'foo';
this.$store.state.a.b.c = 'bar';
this.$store.apple = 'pink lady';