vue 3 popup как реализовать

html кнопка для открытия popupa

   <div @click="openPopup"  class="popup__open" id="popup__open-btn">
                    <div class="popup__row">
                        <div class="popup__item"></div>
                        <div class="popup__item"></div>
                        <div class="popup__item"></div>
                    </div>
                    <div class="popup__row">
                        <div class="popup__item"></div>
                        <div class="popup__item"></div>
                        <div class="popup__item"></div>
                    </div>
                    <div class="popup__row">
                        <div class="popup__item"></div>
                        <div class="popup__item"></div>
                        <div class="popup__item"></div>
                    </div>
                </div>

main.js

import Vue from 'vue'
import App from './App.vue'


Vue.config.productionTip = false


const btnOpenPopup = {
  data() {
    return {

    }
  },
  methods:{
    openPopup(){
      
    }
  }
}


new Vue({
  render: h => h(App),
}).$mount('#popup__open-btn');

popup.vue шаблон с popapom

<template>
  <div id="popup">
    <div class="popup__header">
      <div class="popup__header-logo__wrapper">
        <h1 class="header__logo">getbrains</h1>
      </div>
      <div class="popup__open-wrapper">
        <div class="popup__open">
          <div class="popup__row">
            <div class="popup__item"></div>
            <div class="popup__item"></div>
            <div class="popup__item"></div>
          </div>
        <div class="popup__row">
          <div class="popup__item"></div>
          <div class="popup__item"></div>
          <div class="popup__item"></div>
        </div>
        <div class="popup__row">
          <div class="popup__item"></div>
          <div class="popup__item"></div>
          <div class="popup__item"></div>
        </div>
      </div>
      </div>
    </div>
      <div class="popup__main">
          <ul class="popup__menu">
            <li class="popup__menu-item">
              <a href="" class="popup__menu-icon__wrapper">
                <img src="img/main-menu__icon.svg" alt="" class="popup__item-icon">
              </a>
              <a href="" class="popup__menu-item-text">Все курсы</a>
            </li>
            <li class="popup__menu-item">
              <a href="" class="popup__item-text">О платформе</a>
            </li>
            <li class="popup__menu-item">
              <a href="" class="popup__item-text">Блог</a>
            </li>
          </ul>
          <div class="popup__login-wrapper">
            <a href="#" class="popup__btn-login">
              <div class="popup__login-icon">
                <img src="img/login-header__icon.svg" alt="" srcset="">
              </div>
            <p class="popup__login-text">Войти</p>
            </a>
          </div>
      </div>
    </div>
</template>

App.vue

<script>

import popup from '@/components/popup'
export default {
  name: 'App',
  components: {
    popup: popup
  }
}
</script>

Подскажите как реализовать попап на vue. Делают ли вообще попапы и slider на vue , react, angular или лучше использовать jquery. Макет был взят с фриланса было написано что нужно сделать на vue