What you are explaining is a shift in the parent's state. This change is then transmitted to the child component through a prop. The child component monitors this prop as you have suggested. When the child takes action, it signals back to the parent using an emit event, prompting potential changes in the parent's state once again.

var Child = {
  template: '<div>{{counter}}</div>',
  props: ['canI'],
  data: function () {
    return {
      counter: 0
    };
  },
  watch: {
    canI: function () {
      if (this.canI) {
        ++this.counter;
        this.$emit('increment');
      }
    }
  }
}
new Vue({
  el: '#app',
  components: {
    'my-component': Child
  },
  data: {
    childState: false
  },
  methods: {
    permitChild: function () {
      this.childState = true;
    },
    lockChild: function () {
      this.childState = false;
    }
  }
})

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.2.1/vue.js"></script>
<div id="app">
<my-component :can-I="childState" v-on:increment="lockChild"></my-component>
<button @click="permitChild">Go</button>
</div>

If your aim is to effectively send events to a child component, one approach is to establish a bus (essentially another Vue instance) and pass it down to the child as a prop.

If you want to implement custom event handling in Vue.js, you can utilize the $emit and $on methods. Here's an example based on @RoyJ's code snippet:

Here is how it looks in your HTML file:

<div id="app">
  <my-component></my-component>
  <button @click="click">Click</button>  
</div>

The corresponding JavaScript code would be:

var Child = {
  template: '<div>{{value}}</div>',
  data: function () {
    return {
      value: 0
    };
  },
  methods: {
    setValue: function(value) {
        this.value = value;
    }
  },
  created: function() {
    this.$parent.$on('update', this.setValue);
  }
}

new Vue({
  el: '#app',
  components: {
    'my-component': Child
  },
  methods: {
    click: function() {
        this.$emit('update', 7);
    }
  }
})

You can see a live demo of this implementation here: https://jsfiddle.net/rjurado/m2spy60r/1/

One effective method for decoupled communication between parent and child components is by emitting a handler from the child component and then invoking it from the parent.

var Child = {
  template: '<div>{{value}}</div>',
  data: function () {
    return {
      value: 0
    };
  },
  methods: {
  setValue(value) {
    this.value = value;
    }
  },
  created() {
    this.$emit('handler', this.setValue);
  }
}

new Vue({
  el: '#app',
  components: {
    'my-component': Child
  },
  methods: {
  setValueHandler(fn) {
    this.setter = fn
    },
    click() {
    this.setter(70)
    }
  }
})

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="92e4e7f7d2a0bca7bca3a5">[email protected]</a>/dist/vue.js"></script>

<div id="app">
  <my-component @handler="setValueHandler"></my-component>
  <button @click="click">Click</button>  
</div>

The parent component maintains a registry of child handler functions and triggers them when needed.

The illustration below demonstrates how refs and events can be utilized to invoke functions between parent and child components.

// PARENT
<template>
  <parent>
    <child
      @onChange="childCallBack"
      ref="childRef"
      :data="moduleData"
    />
    <button @click="callChild">Call Method in child</button>
  </parent>
</template>

<script>
export default {
  methods: {
    callChild() {
      this.$refs.childRef.childMethod('Hi from parent');
    },
    childCallBack(message) {
      console.log('message from child', message);
    }
  };
};
</script>

// CHILD
<template>
  <child>
    <button @click="callParent">Call Parent</button>
  </child>
</template>

<script>
export default {
  methods: {
    callParent() {
      this.$emit('onChange', 'hi from child');
    },
    childMethod(message) {
      console.log('message from parent', message);
    }
  };
}
</script>

Displeased with the method of using event-bus and $on bindings in the child component during creation. The issue arises when subsequent create calls (particularly with vue-router) result in multiple bindings of the message handler, leading to duplicate responses.

An alternative solution was to pass props from parent to child and utilize a watcher in the child component. However, this approach had its limitations as the child could only respond to value transitions. To address the issue of passing the same message multiple times, additional bookkeeping was required to simulate a transition for the child to detect the change.

A workaround I discovered was wrapping the message in an array, triggering the child watcher each time even if the value remained unchanged.

Parent:

{
   data: function() {
      msgChild: null,
   },
   methods: {
      mMessageDoIt: function() {
         this.msgChild = ['doIt'];
      }
   }   
   ...
}

Child:

{
   props: ['msgChild'],
   watch: {
      'msgChild': function(arMsg) {
         console.log(arMsg[0]);
      }
   }
}

HTML:

<parent>
   <child v-bind="{ 'msgChild': msgChild }"></child>
</parent>

Utilize Vuex store to monitor variables (also known as state) or initiate an action directly if you have the opportunity.

How to Invoke Child Component from Parent Component

<component :is="child_component" ref="child_comp"></component>
<v-btn @click="$refs.child_comp.alertme"></v-btn>

In the Child Component:

childComponent.vue

methods: {
    alertme() {
        alert("alert")
    }
}

In my opinion, it is important for parents to consider whether they need to adopt their child's methods. Instead of worrying about the specific method a child uses, parents can treat the child as a finite state machine (FSA). By controlling the state of the child component, parents can effectively monitor status changes or simply use the compute function.

Utilize a key to refresh the child component

<component :is="child1" :filter="filter" :key="componentKey"></component>

To update the component with a new filter, simply click the button to filter the child component

reloadData() {            
   this.filter = ['filter1','filter2']
   this.componentKey += 1;  
},

Then, use the filter to trigger the function

If you want to mimic sending an event to a child component, you can achieve this by toggling a boolean prop in the parent component.

Here is an example of the parent component code:

...
<child :event="event">
...
export default {
  data() {
    event: false
  },
  methods: {
    simulateEmitEventToChild() {
      this.event = !this.event;
    },
    handleExample() {
      this.simulateEmitEventToChild();
    }
  } 
}

And here is an example of the child component code:

export default {
  props: {
    event: {
      type: Boolean
    }
  },
  watch: {
    event: function(value) {
      console.log("parent event");
    }
  }
}