VueJs call method in child components

Question

I have prop

<graph :active-metrics="$data.active_metrics"></graph>

In my child component, I can access the value

export default {
      template: '<div>{{activeMetrics}}</div>',
      props: ['active-metrics'],
        methods: {

What I need to do is call the method on the child whenever there is a change. How can I achieve this?

Answer 1

You can use v-bind to make data from the parent stream to the child.

In your case, it will look something like this:

<graph v-bind:active-metrics="$data.active_metrics"></graph>

export default {
  template: '<div>{{activeMetrics}}</div>',
  props: ['active-metrics'],
  watch: {
    'active-metrics': function(){
      alert('active-metrics updated');
  }
}

See here for a working JSFiddle.