title: Prevent child elements for receiving click event not working
body: <p>I am trying to make a modal component and dismiss it when I click outside of the component. Here is my current setup:</p>
  
  <ol>
  <li><strong>Auth</strong> component with click event set on a <code>div</code> element:</li>
  </ol>
  
  <pre><code>    &lt;template&gt;   &lt;div&gt;
          &lt;transition name="modal"&gt;
            &lt;div class="modal-mask" @click="$parent.$emit('close')"&gt;
              &lt;div class="modal-wrapper"&gt;
                &lt;div class="modal-container"&gt;
                  &lt;div class="modal-header"&gt;
                    &lt;slot name="header"&gt;Default Header&lt;/slot&gt;
                  &lt;/div&gt;
                  &lt;div class="model-body"&gt;
                    &lt;slot name="body"&gt;Default Body&lt;/slot&gt;
                  &lt;/div&gt;
                  &lt;div class="modal-footer"&gt;
                    &lt;slot name="footer"&gt;Default Footer&lt;/slot&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/transition&gt;   &lt;/div&gt; &lt;/template&gt;
  </code></pre>
  
  <ol start="2">
  <li><strong>SignIn</strong> component that injects necessary information:</li>
  </ol>
  
  <pre><code>&lt;template&gt;
    &lt;div&gt;
      &lt;Auth /&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  
  <ol start="3">
  <li><strong>Home</strong> component that uses the SignIn component:</li>
  </ol>
  
  <pre><code>&lt;template&gt;
    &lt;div class="home"&gt;
      &lt;SignIn v-if="showModal" @close="showModal = false" /&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>Right now when I click outside the modal it behaves ok, the <code>close</code> event is called.<br>
  But it is also called when I click inside the modal.</p>
  
  <p>Not I tried to use <code>@click.self</code> , but now it doesn't work anymore even when clicking outside the modal.</p>
  
  <pre><code>      &lt;div class="modal-mask" @click.self="$parent.$emit('close')"&gt;
  </code></pre>
  
  <p>I am currently learning <strong>VueJs</strong>, but I don't understand how this works. I thought <code>self</code> will prevent propagating click event to child elements and thats it.</p>
  
  <p>Anyone has an idea what is going on ?</p>
  
  <p>PS: I am using this setup, because I want to have a SignIn and SignUp using the Auth component.</p>