Reload Components when change in Props in VueJS

Question

I'm using the following code to show a component which passes a value 'category'. The category changes based on user interactions. However, once a component is loaded, its data is not changed according to the change of props.

<button @click="selected='new'">Change</button>
<popup :category="selected"></popup>

data() {
    return {
      selected: 'test'
    }
  }

Answer 1

You will have to put a watcher on category in popup component, like following:

watch: {
  category: function(newVal){
    this.selected = newVal   // or this.openPopup(newVal) is this suits
  }
}