i have a watcher inside a component hat is a granchild and listens for changes in a a vuex store array.

Problem is the watcher is only triggered correctly when the component is opened through click in the dom. i need to find a way to trigger the watcher, or alternatively to just trigger a function on data change and to things even when the component is not currently displayed (because it is a dropdown)

  @FilterStore.Getter('getSelectedFilterOptions') selectedItems: any

  @Watch('selectedItems')
  onPropertyChanged() {
    this.doSomething()
    console.log('works')
  }

i have also tried to make it listen for a :key change but that just wont go three levels deep for some reason

CodePudding user response：

I'm not sure what you need to do inside that watcher, but if you're using a Vuex store, wouldn't be possible for you to do it inside of a mutation?

When the grandparent triggers a change in the store, inside the mutation you do the logic that is now inside the watcher.

CodePudding user response：

If the actions you want to perform when the watcher triggers are local to your component, you can toggle the visibility of your component using v-show="someCondition", which will keep your component alive and active, but won't show it. If you're toggling it with v-if then it simply won't exist until you click the dropdown.

Otherwise, if the actions you need to perform can be made outside of the component, you could perhaps move your watcher to the parent instead.

Read more about it here: https://vuejs.org/guide/essentials/conditional.html#v-show