How to use Bootstrap modal window dynamically with Vue?

Question

Vue.js

Please tell me, I just started my acquaintance with Vue, how to dynamically use Bootstrap modal windows using Vue?
I use Laravel, I add the following components in the template:

<button @click="showModal = true">Кнопка 1</button>
<modal v-if="showModal" @close="showModal = false">
    <template slot="modal-header"> Заголовок 1 </template>
    <template slot="modal-text"> Текст 1 </template>
    <template slot="modal-footer"><button class="btn btn-primary">Save Changes</button></template>
</modal>

<button @click="showModal = true">Кнопка 2</button>
<modal v-if="showModal" @close="showModal = false">
    <template slot="modal-header"> Заголовок 2 </template>
    <template slot="modal-text"> Текст 2 </template>
    <template slot="modal-footer"><button class="btn btn-primary">Save Changes</button></template>
</modal>

In the modal.vue component, the following code:

<template>
<div class="modal fade show" id="myModal" style="display: block;">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title"><slot name="modal-header"></slot></h4>
                <button type="button" class="close" @click="$emit('close')" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true" >×</span>
                </button>
            </div>
            <div class="modal-body">
                <slot name="modal-text"></slot>
            </div>
            <div class="modal-footer">
                <slot name="modal-footer"></slot>
                <button type="button" class="btn btn-danger" @click="$emit('close')" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
</template>

<script>
    export default {
      data () {
          return {
              showModal: false,
              modalText: ''
          }
      },
      methods: {
          showModalFn: function (showModalData) {
              this.showModal = true
              this.modalText = 'Whatever you want to show'
          }
      }
    }
</script>

When you click on the buttons, a modal window always opens with the contents of button 2.

Up to 30 such elements are planned per page. There is a jquery solution, with dynamic content in the presence of one window, but still I want to implement it in Vue.

I understand that you need to pass an id for each window in order to dynamically change the content.
How can this be implemented?

Answer 1

Maybe use a ready-made wrapper for Bootstrap in Vue?
https://bootstrap-vue.org/docs/components/modal

Answer 2

It is planned to have up to 30 such elements on the page, so it is impossible to make such a number of windows, so as not to increase the size of the DOM

It will not happen. You initially have the showModal = false variable, and the v-if condition tells us that there will be nothing in the house. And it will appear only after pressing the button. When the window is hidden, it will disappear from the house.