vue-property-decorator: data change doesn't trigger `emit` event

Question

I created this selection field. I want to reflect the selected fruits from the SelectAll component on its parent component, so I created a component event (@Emit("fruitsSelected")) for it -- it shall return the selectedFruits string array to the the Parent.vue.

The code works fine if fruits are selected one by one. But, $emit doesn't fire up if the Select All button is used in the drop-down. I'm not sure why. Any help? Thank you!

Answer 1

tao's answer using the @Watch decorator is correct but just wanted to add why your original code didn't work, and that is because your toggle() method was not tied to any emit. Only your returnSelectedFruits() was emitting anything. This should also work:

@Emit("fruitsSelected")
  toggle() {
    if (this.likesAllFruit) {
      this.selectedFruits = [];
    } else {
      this.selectedFruits = this.fruits.slice();
    }
    console.log(this.selectedFruits);
    return this.selectedFruits;
  }