How to implement a modal window in vue?

Question

JavaScript

There is a modal itself (framework) MSide

<template>
  <div class="side">
    <div class="sideClose">x</div>
    <div class="sideContainer">
      <slot/>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {defineProps} from 'vue'

const props = defineProps({
  classname: {
    type: String,
    default: ''
  },
  center: {
    type: Boolean,
    default: true,
  },
  name: {
    type: String,
    default: 'modal'
  }
})

</script>

<style lang="scss">
.side {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 3000;
  background-color: rgba(0, 0, 0, 0.4);
  transition: .6s;
  overflow: hidden;

  &Container {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 3001;
    display: block;
    width: calc(100% - 300px);
    background: #ffffff;
    transform: translateX(0);
    transition: .4s;
  }

  &Close {
    position: absolute;
    right: 20px;
    top: 20px;
    cursor: pointer;
    transition: 0.4s;
    z-index: 5;

    svg {
      width: 18px;
      height: 18px;
    }

    &:hover {
      transform: rotate(90deg);
    }
  }
}
</style>

there is a MAttributes component to select attributes

<template>
  <div class="attributes">
    <div class="attributesHeader">Атрибуты</div>
    <div class="attributesBody">
      <div class="attributesSection">
        <div class="attributesCategory">Группа атрибута</div>
        <div class="attributesList">
          <div class="attributesItem">
            <button
                class="btn btnDarkOutline"
                @click.prevent="changeAttribute(1, 'Название атрибута')"
            >Название атрибута
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import {defineComponent} from 'vue'
import {useAttributeStore} from "@/store/attribute";

import MSide from "@/components/modals/MSide.vue";

export default defineComponent({
  components: {
    MSide,
  },
  props: {
    name: {
      type: String,
      default: 'modal'
    }
  },
  setup(props, {emit}) {

    const attrStore = useAttributeStore()

    const changeAttribute = (data: any) => {
      try {
        attrStore.putSelected(data)
      } catch (e: any) {
        console.log(e)
      }
    }

    return {
      changeAttribute,
    }
  },
})
</script>

<style lang="scss">
.attributes {
  &Header {
    font-weight: 600;
    font-size: 34px;
    padding: 40px 30px 30px;
  }

  &Body {
    padding: 0 30px 30px;
  }

  &Section {
    margin-bottom: 30px;
  }

  &Category {
    font-size: 24px;
    font-weight: 600;
    padding-bottom: calc(2 * var(--gap));
    margin-bottom: calc(2 * var(--gap));
  }

  &List {
    display: flex;
    flex-wrap: wrap;
    margin-left: var(--margin-gap);
    margin-right: var(--margin-gap);
  }

  &Item {
    padding: 0 var(--gap);
    margin-bottom: calc(2 * var(--gap));
  }

  &Button {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    border: var(--at-border);
    padding: var(--gap) calc(2 * var(--gap));
  }
}
</style>

on the page of adding a product + call like this

<Teleport to="#root">
    <MSide v-if="isModalAttribute">
      <MAttributes/>
    </MSide>
  </Teleport>

how can it be implemented so that the modal can be closed both from the form for adding a product, and from the MAttributes component and from MSide

When this modal is opened, it moves from right to left, this is the content of the sideContainer diva