title: Do duplicated emitted events overlap/get called together in a parent component?
body: <p>I have two children components (<strong>CModal1</strong> and <strong>CModal2</strong>) inside a parent component and both of them are wrapper in the <strong>ModalWrapper</strong> component. This wrapper component gives each modal a transition effect and a close event (an X button and a background that both emit the <code>close</code> event).
  Right now, if the outter most layer's (<strong>Modal2</strong>) <code>close</code> buttons are clicked, it also closes <strong>Modal1</strong>. Is this because both <code>@close</code> events fire?</p>
  <p>How can I remedy this? Should I put the wrapper of <strong>Modal2</strong> inside the actual component, rather than wrapping it in the parent?</p>
  <p>If I haven't explained things correctly, or you need more code/context, please let me know.</p>
  <p>Cheers!</p>
  <p><strong>ParentComponent</strong></p>
  <pre><code>&lt;template&gt;
    &lt;ModalWrapper
      @close=&quot;modal1Open = false&quot;
      :isVisible=&quot;modal1IsVisible&quot;
    &gt;
      &lt;CModal1
        v-if=&quot;modal1IsVisible&quot;
        :formData=&quot;formData&quot;
        @close=&quot;modal1IsVisible = false&quot;
        @save-data=&quot;(val) =&gt; saveData(val)&quot;
        @open-modal-2-clicked=&quot;modal2Open = true&quot;
      /&gt;
    &lt;/ModalWrapper&gt;
    &lt;ModalWrapper
      @close=&quot;modal2Open = false&quot;
      :isVisible=&quot;modal2Open&quot;
      class=&quot;z-30&quot;
    &gt;
      &lt;CModal2
        v-if=&quot;modal2IsVisible&quot;
        @close=&quot;modal2IsVisible = false&quot;
      /&gt;
    &lt;/ModalWrapper&gt;
  &lt;/template&gt;
  </code></pre>