title: $emit an event from child to parent in vue.js, es6 syntax
body: <p>I'm pretty new to Vue.js, and I use ES6 syntax with <code>vue-class-component</code>. I'm having a problem while trying to emit an event from a child to its parent. </p>
  
  <p>I followed the logic of the default Vue.js syntax but can't seem to have my parent catch an event emitted by the the child. Code:</p>
  
  <p><strong>Child Component</strong></p>
  
  <p>I attached a click event listener on every <code>&lt;li&gt;</code>, which calls a function that emits an event. The event listener is defined on the parent.</p>
  
  <pre class="lang-js prettyprint-override"><code> export default class HorizontalNavigation {
  
    handleClick (e) {
      e.preventDefault();
      // console.log(e.target.dataset.section);
      this.$emit('ChangeView', e.target.dataset.section);
    }
  
    render (h) {
      return (
        &lt;div class={ style.horizontalNavigation } &gt;
          &lt;div class='sections-wrapper'&gt;
            &lt;div class={ style.sections }&gt;
              &lt;ol&gt;
                &lt;li&gt;&lt;a on-click={ this.handleClick } href='#1' data-section='1' class='selected'&gt;We are&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a on-click={ this.handleClick } href='#2' data-section='2'&gt;Services&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a on-click={ this.handleClick } href='#3' data-section='3'&gt;Cases&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a on-click={ this.handleClick } href='#4' data-section='4'&gt;Studio&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a on-click={ this.handleClick } href='#5' data-section='5'&gt;Career&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a on-click={ this.handleClick } href='#6' data-section='6'&gt;Contact&lt;/a&gt;&lt;/li&gt;
              &lt;/ol&gt;
  
              &lt;span class='filling-line' aria-hidden='true'&gt;&lt;/span&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p><strong>Parent Component</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>export default class ViewsContainer {
  
    ChangeView (data) {
      console.log(data);
    }
  
    render (h) {
        return (
          &lt;div class={ style.restrictOverflow } &gt;
            &lt;HorizontalNavigation /&gt;
            &lt;main class={ style.viewsContainer } on-ChangeView={ this.ChangeView     } &gt;
              &lt;SingleView dataSection='weare' id='1' class='selected' /&gt;
              &lt;SingleView dataSection='services' id='2' /&gt;
              &lt;SingleView dataSection='cases' id='3' /&gt;
              &lt;SingleView dataSection='studio' id='4' /&gt;
              &lt;SingleView dataSection='career' id='5' /&gt;
              &lt;SingleView dataSection='contact' id='6' /&gt;
            &lt;/main&gt;
          &lt;/div&gt;
        );
      }
  }
  </code></pre>
  
  <p>Following the vue.js syntax, I should be able to listen to the child's event from the parent, by emitting the event from the element, but the parent doesn't seem to catch the event.</p>
  
  <p>Where am I going wrong?</p>