I do have three components.

I don't have any influence on what the Datatable component does cause I have it from npm.

Now I want to send an event from EditButton to my Zonelist.

Zonelist component:

<template>

<datatable :columns=table_columns :data=table_rows filterable paginate v-on:remove=removeItem></datatable>

</template>

<script>

import datatable from 'vuejs-datatable';

import moment from 'moment';

export default {

    data() {

        return {

            table_columns: [

                {label: Zone, component: 'ZoneLink'},

                {label: Last updated, callback (row) {

                    let locale = $('html').closest('[lang]').attr('lang') || 'en';

                    moment.locale(locale);

                    return moment(row.last_updated).format('D. MMM YYYY');

                }},

                {label: '', component: 'EditButton'}

            ],

            table_rows: [

                {

                    name: xyz.de,

                    last_updated: 2017-10-21 17:29:50

                }

            ],

            form: {

                name: '',

                errors: []

            }

        };

    },

    components: {

        datatable

    },

    methods: {

            removeItem (item) {

                this.table_rows.forEach((value, index, array) => {

                    if (value.name === item) {

                        Vue.delete(array, index);

                    }

                });

            }

      }

}

</script>

Now my EditButton component $emit()'s the remove event with a parameter.

But nothing happens. So I think vue is not able to locate the listener.

(I'm using method shorthands from ES6 here)

How could I do this properly without mutating Zonelist's state via this.$parent.$parent from the EditButton?