half way there

src/digital-components/modal/modal.vue

@@ -91,11 +91,11 @@ export default {
         },
         openModal() {
             const modal = Modal.getOrCreateInstance(document.getElementById(this.modalId));
-            modal.show();
+            modal?.show();
         },
         closeModal() {
             const modal = Modal.getInstance(document.getElementById(this.modalId));
-            modal.hide();
+            modal?.hide();
         },
     },
     computed: {

src/layouts/z-test-page-jg/z-test-page-jg.vue

@@ -14,7 +14,7 @@
                         here
                     </p>
                     
-                    <a href="#!" data-bs-toggle="modal" data-bs-target="#ModalName" aria-label="Modal window">Wow!!</a>
+                    <a id="test" href="#!" aria-label="Modal window">Wow!!</a>
                     <siteFooter
                         cmsWidgetName="SiteFooterWidget"
                         :isForwardActionDisabled="!meta.valid"
@@ -64,6 +64,21 @@ export default {
                 alert("you clicked me!");
             }
         },
+       /* mounted: (
+            () => {
+                const element = document.getElementById("test");
+                element.addEventListener("click", () => app.openModal("ModalName") )
+            }
+        ),
+        */
+        mounted() { 
+            console.log(document.getElementById("test")) 
+            console.log(this.openModal);
+            const element = document.getElementById("test");
+            const modalname = "ModalName";
+            const openModal = this.openModal;
+            element.addEventListener("click", () => openModal(modalname) )
+        },
         computed: {
             bodyText() {
                 return this.getCmsContent("ModalLink", "BodyText");