Do duplicated emitted events overlap/get called together in a parent component?

Question

I have two children components (CModal1 and CModal2) inside a parent component and both of them are wrapper in the ModalWrapper component. This wrapper component gives each modal a transition effect and a close event (an X button and a background that both emit the close event). Right now, if the outter most layer's (Modal2) close buttons are clicked, it also closes Modal1. Is this because both @close events fire?

How can I remedy this? Should I put the wrapper of Modal2 inside the actual component, rather than wrapping it in the parent?

If I haven't explained things correctly, or you need more code/context, please let me know.

Cheers!

ParentComponent

<template>
  <ModalWrapper
    @close="modal1Open = false"
    :isVisible="modal1IsVisible"
  >
    <CModal1
      v-if="modal1IsVisible"
      :formData="formData"
      @close="modal1IsVisible = false"
      @save-data="(val) => saveData(val)"
      @open-modal-2-clicked="modal2Open = true"
    />
  </ModalWrapper>
  <ModalWrapper
    @close="modal2Open = false"
    :isVisible="modal2Open"
    class="z-30"
  >
    <CModal2
      v-if="modal2IsVisible"
      @close="modal2IsVisible = false"
    />
  </ModalWrapper>
</template>