vue.js firing $emit not received by $on

Vue.component('rating-edit', {
    template:`
    <form>
      <input v-model="rating.title" type="text">
      <textarea v-model="rating.remark">{{rating.remark}}</textarea>
      <button type="button"
        @click="submit">
        Save
      </button>
    </form>`,
    props:['rating'],
    methods: {
      submit: function submit () {
        let rating = this.rating;
        this.$emit('submit', rating);
        console.log('submit was emitted');
      }
    }
  });

const aRating = {
    title: 'title',
    remark: 'remark'
  };

let vueApp = new Vue({
    el: '#rating-edit-container',
    data: {
      rating: aRating
    }
  });

vueApp.$on('submit', function(rating) {
  console.log('vue on submit', rating);
});

<script src="https://vuejs.org/js/vue.min.js"></script>
<div id="rating-edit-container">
  <rating-edit :rating="rating"></rating-edit>
</div>

In a legacy frontend code I'd like implement a vue based componentized form and have it return the data on submit.

This is the component code. Please note the submit function firing this.$emit('submit', rating);

let result = {
  props:['rating'],
  methods: {
    submit: function submit () {
      let rating = this.rating;
      this.$emit('submit', rating);
      console.log('submit fired');
    }
  }
};

export default result;

And now in the legacy code, I am waiting for the events:

import Vue from 'vue';
import ratingEditVue from './rating-edit.vue';


Vue.component('rating-edit', ratingEditVue);

const aRating = {
  title: 'title',
  remark: 'remark'
};

let vueApp = new Vue({
  el: '#rating-edit-container',
  data: {
    rating: aRating
  }
});

vueApp.$on('submit', function(rating) {
  console.log('vue on submit', rating);
});

As far as I understand the Vue events this should work. But $on('submit', handlerFunction) just never gets called.

Addendum:

I've fiddled the example. I apologize for not having done this in the first place.