title: Custom event not captured by component in Vue.js
body: <p>Here is my components architecture</p>
  
  <p><a href="https://i.stack.imgur.com/IyUiC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/IyUiC.png" alt="enter image description here"></a></p>
  
  <p>The component <code>&lt;ListButtonMenu&gt;</code> emits a custom event <code>display-error</code> as below. The emission works fine as I can see the event in VueDevtools:</p>
  
  <pre><code>&lt;template&gt;
      &lt;div&gt;
          &lt;button type="button" class="btn btn-success" v-on:click="saveList()"&gt;
              Save
          &lt;/button&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
      props: {
          list: Object
      },
      methods: {
          saveList() {
              this.$emit('display-error');
          }
      }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/HGVDq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HGVDq.png" alt="enter image description here"></a></p>
  
  <p>The component <code>&lt;ErrorMessage&gt;</code> contains a <code>div</code> element which listen to the custom event and calls a method <code>display()</code>. The method changes the component CSS class in order to display himself: <code>v-on:display-error="display"</code>. Unfortunately this does not work and the CSS class is not changed. What am I missing?</p>
  
  <pre><code>&lt;template&gt;
      &lt;div id="errorMessage" v-bind:class="cssClass" v-on:display-error="display()"&gt;
          &lt;div class="row justify-content-center alert alert-danger alert-dismissable text-danger"&gt;
              Error: {{ errorMessage }}
              &lt;button type="button" class="close" data-dismiss="alert" aria-hidden="true"&gt;
                  &amp;times;
              &lt;/button&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
      data: function () {
          return {
              'cssClass': 'd-none',
              'errorMessage': 'Hello'
          }
      },
      methods: {
          display() {
              this.cssClass = 'show';
              this.errorMessage='Goodbye';
          }
      }
  }
  &lt;/script&gt;
  </code></pre>