Не отображается модальное окно на Vue.js

Пишу небольшой проект на Vue 3. Сделал компонент модальное окно, которое хочу использовать 4 раза на странице. Подключил в первую секцию проекта все работает отлично. Подключаю в последующие компоненты и модальное окно не работает, никаких ошибок не выдает. Вот код модального окна :

      `<template>
      <transition name="modal-animation">
      <div v-show="modalActive" class="modal">
      <transition name="modal-animation-inner">
      <div v-show="modalActive" class="modal-inner">
      <i @click="close" class="far fa-window-close close-pic"></i>
      <h5 class="title">Grovemade</h5>
      <p class="text">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur
        unde laborum repellendus totam quibusdam asperiores exercitationem
        dolorum quis sapiente.
      </p>
      <slot />
      </div>
      </transition>
      </div>
     </transition>
     </template>
     <script>
     export default {
     props: ["modalActive"],
     setup(props, { emit }) {
     const close = () => {
     emit("close");
     };
     return { close };
     },
     };
     </script>`

а вот код секции где я использую компонент модального окна и он не работает, при клике на кнопку ничено не происходит. Даже если вручную поменять false на true

     <div class="columns" id="started">
     <Modal @close="toggleModal" :modalActive="modalActive"></Modal>
     <div class="left">
     <img src="../img/laptop.png" />
     <span>Desk Pads</span>
     <button @click="toggleModal" type="button" class="btn-more btn-more-light">Learn 
     more</button>
     </div>

     <script>
     import Modal from "@/components/Modal";
     import { ref } from "vue";
     export default {
     components: { Modal },
     setup() {
     const modalActive = ref(false);
     const toggleModal = () => {
     modalActive.value = !modalActive.value;
     };
     return { modalActive, toggleModal };
     },
     };
     </script>