How to propagate a Vue.js event up the components chain?

Non parent-child communication in Vue is typically handled via either an event bus, or a state management system.

In this case, unless your application is more complex, the event bus is probably all you need. Since you are using single file components, you may need to declare the bus on the window, probably in your main script.

window.bus = new Vue()

Then in your EditButton, you can emit the event

bus.$emit('some-event', someData)

And in your ZoneList you can listen for it.

bus.$on('some-event', someData => this.doSomething(someData))

Another option is to ask DataTable to pass any and all events up by adding a v:on="$listeners" attribute to it.

See https://stackoverflow.com/a/61329264/578318 for a more detailed explanation.

Edit:

A much safer option would be to simply listen to the event in the parent class and pass it on...

    <ancestor @message="console.log($event)"> <!-- cute trick see * -->
    ...
    <parent @message="$emit('message', $event)"> <!-- passes it on -->
    ...
    <child @click="$emit('Hello World')"> <!-- creates the event -->

* computed: {'console' : () => console}