title: vue.js firing $emit not received by $on
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>Vue.component('rating-edit', {
      template:`
      &lt;form&gt;
        &lt;input v-model="rating.title" type="text"&gt;
        &lt;textarea v-model="rating.remark"&gt;{{rating.remark}}&lt;/textarea&gt;
        &lt;button type="button"
          @click="submit"&gt;
          Save
        &lt;/button&gt;
      &lt;/form&gt;`,
      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);
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://vuejs.org/js/vue.min.js"&gt;&lt;/script&gt;
  &lt;div id="rating-edit-container"&gt;
    &lt;rating-edit :rating="rating"&gt;&lt;/rating-edit&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>In a legacy frontend code I'd like implement a vue based componentized form and have it return the data on submit.</p>
  
  <p>This is the component code. Please note the submit function firing <code>this.$emit('submit', rating);</code></p>
  
  <pre><code>let result = {
    props:['rating'],
    methods: {
      submit: function submit () {
        let rating = this.rating;
        this.$emit('submit', rating);
        console.log('submit fired');
      }
    }
  };
  
  export default result;
  </code></pre>
  
  <p>And now in the legacy code, I am waiting for the events:</p>
  
  <pre><code>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);
  });
  </code></pre>
  
  <p>As far as I understand the Vue events this should work. But $on('submit', handlerFunction) just never gets called.</p>
  
  <p><strong>Addendum:</strong></p>
  
  <p>I've fiddled the example. I apologize for not having done this in the first place.</p>