How to load and open modal by clicking on button?

Hi,

Hereby the components, my questions are at the end: <strong>Index.vue</strong>

<pre> <div class="row g-6 g-xl-9"> <template v-for="(el, i) in ["element1", "element2", "element3"]":key="i"> <div class="col-xl-6"> <Widget widget-item="el" :title="`title_${i}`"></Widget> </div> </template> </div> </pre>

<strong>Widget.vue</strong>

<pre> <template> <div class="card"> <div class="card-header border-0"> <h3 class="card-title align-items-start flex-column cursor-pointer" data-bs-toggle="collapse" :data-bs-target="`#widget_${widgetItem.id}`"aria-expanded="true" :aria-controls="`kt_lesson_card_module_card_${widgetItem.id}`"> <span class="card-label fw-bold fs-3 mb-1">{{ title }}</span> </h3> <div class="card-toolbar"> <button type="button" class="btn btn-sm btn-icon btn-color-primary btn-active-light-primary" data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end" data-kt-menu-flip="top-end" > <span class="svg-icon svg-icon-2"> <inline-svg src="media/icons/duotune/general/gen024.svg" /> </span> </button> <Dropdown :widget-item="widgetItem"></Dropdown> </div> </div> <div>CONTENT</div> </div> </template> </pre <strong>Dropdown.vue</strong> <pre> <template> <div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-800 menu-state-bg-light-primary fw-semobold py-4 w-250px fs-6" data-kt-menu="true"> <div class="menu-item px-5"> <a href="#" data-bs-toggle="modal" data-bs-target="#kt_modal_new" class="menu-link px-5">NEW MODAL</a> </div> <Modal :widget-item="widgetItem"></Modal> </div> </template> </pre>

<strong>Modal.vue</strong>

<pre> <template> <div class="modal fade" id="kt_modal_new" tabindex="-1" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false" > <div class="modal-dialog modal-dialog-centered mw-650px"> <div class="modal-content"></div> </div> </div> </template> </pre>

<strong>My problem and questions</strong> I am fetching the element in index page from backend and reinitializeComponents(): But the modal is also loaded for each component. How can I load the component only when it's needed, e.g. by clicking on a button?

I have also created a function for click <code> const newModal = () => { const myModal = new Modal(document.getElementById("kt_modal_new")); myModal.show();}; </code> But when I click on the button, I'm getting

<blockquote>Uncaught TypeError: Cannot read properties of undefined (reading 'backdrop')</blockquote>

1. How can I prevent the loading of Modal.vue component for each widget?
2. How can I open the Modal.vue component via a button?