$emit an event from child to parent in vue.js, es6 syntax
<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>