title: Why does $emit not work in my vue component
body: <p>I've been banging my head against this problem for hours. I can't see a problem and from what I can tell I am following the documentation here: <a href="https://v2.vuejs.org/v2/guide/components-custom-events.html" rel="nofollow noreferrer">https://v2.vuejs.org/v2/guide/components-custom-events.html</a></p>
  <p>code below</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"&gt;&lt;/script&gt;
  &lt;div id="wrap"&gt;
    &lt;test-listen&gt;
      &lt;test-emit&gt;&lt;/test-emit&gt;
    &lt;/test-listen&gt;
  &lt;/div&gt;
  &lt;script&gt;
  Vue.component('test-listen', {
    data: function(){
      return {};
    },
    methods: {
      customHandler : function(e){
        console.log(e);
        console.log("works");
      }
    },
    template: `
      &lt;div class='test_listen' v-on:custom="customHandler"&gt;
        &lt;slot&gt;&lt;/slot&gt;
      &lt;/div&gt;
    `
  });
  
  Vue.component('test-emit',{
    data: function(){
      return {};
    },
    methods: {
      clickHandler : function(){
        this.$emit('custom');
      }
    },
    template : `
      &lt;div class='test_emit' v-on:click="clickHandler"&gt;
        test
      &lt;/div&gt;
    `
  });
  
  new Vue({
    el:"#wrap"
  });
  &lt;/script&gt;
  &lt;style&gt;
  .test_listen{
    display:block;
    padding:20px;
    border:1px solid #000;
  }
  .test_emit{
    display:block;
    width:100px;
    height:100px;
    background-color:#f0f;
    color:#fff;
    font-weight:700;
    font-size:20px;
  }
  &lt;/style&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>But the listeners are definitely bound to the element, because if I dispatch a vanillaJS CustomEvent it triggers the console log just fine. What am I missing?</p>