title: Vue.js - Emit from grandchild slot component didn't bubble $emit event to parent
body: <p>I planned and made a modal and then created a button to close the modal window. 
  I wanted to change the value of <code>isHomeDialog</code> using <code>$emit</code> as an event of the button.<br>
  However, <code>$emit</code>'s event was not delivered to "Home.vue"</p>
  
  <p>Home.vue</p>
  
  <pre><code>&lt;template&gt;
    &lt;div&gt;
      &lt;ReviewDialog
        :is-open="isHomeDialog"
        @close="closeEvent()/&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import ReviewDialog from '@/components/popup/dialog/ReviewDialog';
  &lt;/script&gt;
  
  export default {
    name: 'Home',
    components: {
      ReviewDialog
    },
    data () {
      return {
        isHomeDialog: true
      };
    },
    methods: {
      closeEvent () {
        console.log('close');
        isHomeDialog = false;
      }
    }
  };
  </code></pre>
  
  <p>BaseDialog.vue</p>
  
  <pre><code>&lt;template&gt;
    &lt;div v-show="isOpen"&gt;
      &lt;div class="mask"&gt;&amp;nbsp;&lt;/div&gt;
      &lt;div class="content"&gt;
        &lt;button
          class="close"
          @click="$emit('close')"&gt;&amp;nbsp;&lt;/button&gt;
  
        &lt;slot/&gt;
  
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  &lt;script&gt;
  export default {
    props: {
      isOpen: {
        type: Boolean,
        required: true
      }
    }
  };
  </code></pre>
  
  <p>Reviewdialog.vue</p>
  
  <pre><code>&lt;template&gt;
    &lt;BaseDialog
      url="@/components/popup/dialog/BaseDialog"
      id="review-dialog"
      :is-open="isOpen"
      :header-text="'REVIEW'"&gt;
  
      &lt;div class="warp"&gt;
        &lt;p&gt;
          test
        &lt;/p&gt;
      &lt;/div&gt;
    &lt;/BaseDialog&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import BaseDialog from '@/components/popup/dialog/BaseDialog';
  
  export default {
    components: {
      BaseDialog
    },
    props: {
      isOpen: {
        type: Boolean,
        default: false
      }
    }
  &lt;/script&gt;
  </code></pre>
  
  <p>Home<br>
  └ BaseDialog<br>
  　└ ReviewDialog  </p>
  
  <p>In the above structure, I tried to send a request to BaseDialog and ReviewDialog with $emit, but it was not delivered to Home.
  Is there any way to send $ emit to its parent component other than requesting it with $root.$emit?</p>