How to call a method in a child (or any other) component after an event in the parent?

Question

A question like this:
How is it possible in vue3 after an event to call a method in another component?
Found this solution for vue2
this.$refs.myComponent.myMethod()
But how is it supposed to work without "this" in vue3 + composition api?

If this is not possible then what are the alternatives?
The event itself occurs in the following code:
(for example, we can take the resize event of a component and set a task - after it, activate a method inside another component)

 <Vue3DraggableResizable class="chartApp"
     @resizing="print('resizing')"
   >

How is it possible to implement it?

Answer 1

Not sure about if they are best practices but here we go.

1. I think you can watch your props change and trigger an event like this

   import { watch, toRefs } from 'vue' const props = defineProps({ yourReactiveProp: Boolean }) const { yourReactiveProp } = toRefs(props) // this is reactive watch( () => yourReactivePropn.value, (newVal) => { yourMethod() // you can pass the new value also. })

2. You can use mitt package. Literally, you can listen and fire emit from anywhere to anywhere. Ie, parent-child, child-parent, siblings, non-siblings, etc..