How to pass from component to parent in Vue?

Question

Vue.js

Hey! In a single-component vue structure, I pass from the child component to the parent via emmit, everything works.
But it's not like that.

Vue.component('line-chart', {
    extends: VueChartJs.Line,
    data: function () {
        return {
            message: 'test'
        }
    },
    mounted () {
      this.$emit('changeMessage', this.message);
    }
})

var vm = new Vue({
    el: '.app',
    data: {
        data: null,
        message: 'Hello World'
    },
    methods: {
        changeMessage: function () {
            this.message = 'test';
        }
    }
})

<div class="app">
  {{ message }}
  <line-chart :chart-data="data" @changeMessage="changeMessage"></line-chart>
</div>

Answer 1

@changeMessage="changeMessage"

Yah? I have heard that it is

event listener directives v-oninside DOM templates are automatically converted to lowercase (due to HTML's case insensitivity), so v-on:myEventwill become v-on:myevent- making event listeners myEventimpossible

Answer 2

in parent write:

var vm = new Vue({
    el: '.app',
    data: {
        data: null,
        message: 'Hello World'
    },
    mounted () {
       this.$on('changeMessage', (message) => {
         this.message = message
       })
    }
})

since you are using custom events, read the doc on how to listen to them