title: Vue.js 2 how to access data in method
body: <p>I'm using single file components triggered from vue-router. I have a <code>components/Header.vue</code> which uses a child <code>modals/HelpModal.vue</code> which in turn has a child <code>components/Modal.vue</code>. </p>
  
  <p>I'm trying to pass around events in order to keep <code>Modal.vue</code> re-usable, but I can't seem to access <code>this.show</code> from within an event in <code>HelpModal.vue</code></p>
  
  <p>Modal.vue</p>
  
  <pre><code>&lt;template&gt;
      &lt;div class="modal"&gt;
          &lt;button class="modal__close" @click="$emit('close')"&gt;
          &lt;/button&gt;
  
          &lt;slot&gt;&lt;/slot&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>HelpModal.vue</p>
  
  <pre><code>&lt;template&gt;
      &lt;modal v-if="show" @close="closeModal"&gt;...help modal content...&lt;/modal&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import Modal from 'components/Modal.vue'
  import bus from 'eventBus'
  
  export default {
  
      components: {
          Modal
      },
  
      data: () =&gt; {
          return {
              show: false
          }
      },
  
      methods: {
          closeModal: () =&gt; {
              this.show = false
          }
      },
  
      mounted: () =&gt; {
          bus.$on('showHelpModal', () =&gt; {
              console.log('show modal!', this.show); // undefined
              this.show = true
          })
      }
  }
  </code></pre>
  
  <p></p>
  
  <p>Header.vue</p>
  
  <pre><code>&lt;template&gt;
      &lt;header&gt;
          &lt;button @click="showHelpModal"&gt;Show help&lt;/button&gt;
          &lt;help-modal&gt;&lt;/help-modal&gt;
      &lt;/header&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
      import HelpModal from 'views/modals/HelpModal.vue'
      import bus from 'eventBus'
  
      export default {
  
          components: {
              HelpModal
          },
  
          methods: {
              showHelpModal: () =&gt; {
                  bus.$emit('showHelpModal')
              }
          }
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>I may be going about this all totally wrong, but it's the only way I can see it working to have a link in the header that triggers the help modal to open</p>