title: Event Listening from Child to Parent in Vuejs
body: <p>I want to send an event from a child component to its parent, which should change the view.</p>
  
  <p>I am able to create the event and emit it, however my template does not seem to be registering it, I am using Single File Components (SFC). Also if I manually update the data object all works fine.</p>
  
  <p>App.vue (Parent)</p>
  
  <pre><code>&lt;template&gt;
      &lt;div v-on:change-view="updateView"&gt;
          &lt;!-- render the currently active component/page here --&gt;
          &lt;component v-bind:is="currentView"&gt;&lt;/component&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  &lt;script&gt;
  export default {
    name : 'app',
    data () {
        return {
            currentView : 'Modal'
        }
    },
    methods : {
        updateView (view) {
            console.log('event listener!!!')
            this.currentView = view;
        }
    }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>Modal.vue (Child)</p>
  
  <pre><code>&lt;template&gt;
      &lt;div&gt; 
          &lt;vk-modal v-bind:show="show"&gt;
              &lt;h1&gt;{{ title }}&lt;/h1&gt;
              &lt;p&gt;{{ body }}&lt;/p&gt;
              &lt;p class="uk-text-right"&gt;
                  &lt;vk-button v-on:click="$emit('change-view', 'Purposes')"&gt;More Information&lt;/vk-button&gt;
                  &lt;vk-button v-on:click="fullConsent" type="primary"&gt;I Agree&lt;/vk-button&gt;
              &lt;/p&gt;
          &lt;/vk-modal&gt; 
      &lt;/div&gt;
  &lt;/template&gt;
  &lt;script&gt;
  export default {
    name : 'modal',
    data () {
        return {
            show : true,
            title : 'Hello'
        }
    },
    methods : {
          fullConsent () {
              this.show = false;
          }
    }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>Please help :)</p>