title: vuejs listening for event on component
body: <p>I am unable to catch the <strong>flash</strong> event on my custom component that i am emitting from the console . Here is my component:</p>
  
  <pre><code>/* file flash.vue */
  
  &lt;template&gt;
    &lt;span :class="type" class="alert flash-alert" v-show="show"&gt;
      {{ body }}
    &lt;/span&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
    export default {
      props: ['type','message'],
      data() {
          return {
              body: this.message,
              show: false,
          };
      },
  
      created() {
          if(this.body)
          {
              this.showComp();
              this.hide();
          }
      },
  
      methods: {
          showComp: function(){
              this.show = true;
          },
  
          hide: function()
          {
              var vm = this;
              setTimeout(function() {
                  vm.show = false;
              },2000);
          },
      },
  
      events: {
          flash: function(newMessage) {
              this.body = newMessage;
              this.showComp();
          },
      }
  }
  </code></pre>
  
  <p>on the chrome console i am firing the event with:</p>
  
  <pre><code>/* from console */
  window.vueEventBus = new Vue();
  window.vueEventBus.$emit('flash','my message');
  </code></pre>
  
  <p>the event is firing as i can see that on the vue devtools tab. But upon catching the event the component should become visible, which is not.</p>
  
  <p>However, if i piggyback the listener on the global event bus inside the components <strong>created()</strong> method, it works. </p>
  
  <pre><code>created() {
    window.vueMessageBus.$on('flash',newMessage =&gt; {
        this.body = newMessage;
        this.showComp(); 
      });
   }
  </code></pre>
  
  <p>What should i do if i want the event listener to be registered inside the <strong>events</strong> property of the component itself?</p>
  
  <p>-Thanks, Yeasir</p>