figured out that I needed to run the processing of the modal-links on the next tick.

src/helpers/cms-content-helper.js

@@ -173,8 +173,8 @@ function mapStringToModal(str) {
   
   let params = linkToReplace.substring((dynamicStrings.MODAL_LINK).length + 2, linkToReplace.length -1)
   let splitParams = params.split(",");
-  let bodyText = '<a href="#!" data-bs-toggle="modal" data-bs-target="#' + splitParams[0] + '" aria-label="Modal window">' + splitParams[1] +'</a>'
-  
+  //let bodyText = '<a href="#!" data-bs-toggle="modal" data-bs-target="#' + splitParams[0] + '" aria-label="Modal window">' + splitParams[1] +'</a>'
+  let bodyText = '<a modalTarget="' + splitParams[0] + '" class="modal-text" aria-label="Modal window">' + splitParams[1] + '</a>'
   return str.replace(linkToReplace, bodyText);
 }
 

src/layouts/coverage-statement/coverage-statement.vue

@@ -43,9 +43,8 @@
         />
       </div>
     </div>
-    <recalModal cmsWidgetName="RecalModal" />
+    <recalModal ref="RecalModal" cmsWidgetName="RecalModal" />
   </Form>
-
 </template>
 <script>
 
@@ -78,21 +77,21 @@ export default {
   },
   computed: {
     bodyText() {
-      if (useMainStore().order.damage.isRepair) {
-        return this.unverifiedNonADASRepairBodyText;
-      }
-      else {
-        let parts = useMainStore().order.lineItems.glassParts;
-
-        // if ADAS, display ADASNextSteps
-        if (parts.filter(part => part.requiresRecalibration).length > 0) {
-          return this.unverifiedADASNextStepsBodyText;
+        if (useMainStore().order.damage.isRepair) {
+          return this.unverifiedNonADASRepairBodyText;
         }
-        // if non-ADAS, display NonADASNextSteps
         else {
-          return this.unverifiedNonADASNextStepsBodyText;
+          let parts = useMainStore().order.lineItems.glassParts;
+
+          // if ADAS, display ADASNextSteps
+          if (parts.filter(part => part.requiresRecalibration).length > 0) {
+            return this.unverifiedADASNextStepsBodyText;
+          }
+          // if non-ADAS, display NonADASNextSteps
+          else {
+            return this.unverifiedNonADASNextStepsBodyText;
+          }
         }
-      }
     },
     continueWithSchedulingBodyText() {
       return this.getCmsContent("continueWithSchedulingCopy", "BodyText");
@@ -110,10 +109,23 @@ export default {
     var damageString = getDamageString();
     return damageString == "match" ? "" : damageString;
     },
-    openModal(name)
-    {
-      $refs[name].openModal();
-    },
+  },
+  mounted() { 
+    this.$nextTick(() => {
+        const elements = document.getElementsByClassName("modal-text")
+        console.log(elements); 
+        
+        for(let element of elements){
+          console.log(element); 
+          const target = element.getAttribute("modalTarget");
+          console.log("HERE!!!!" + target);
+          if(target)
+          {
+            console.log("HERE!!!!");
+            element.addEventListener("click", () => this.$refs[target].openModal() );
+          }
+        };
+      });
   },
   async beforeRouteEnter(to, from, next) {
     // Call APIs
@@ -178,4 +190,5 @@ p strong {
     color: #000000;
     font-weight: 500;
 }
+
 </style>

src/layouts/coverage-statement/recal-modal/recal-modal.vue

@@ -27,6 +27,14 @@ export default {
     props: {
         cmsWidgetName: String,
     },
+    methods: {
+        openModal() {
+            this.$refs[this.ModalName].openModal();
+        },
+        closeModal() {
+            this.$refs[this.ModalName].closeModal();
+        },
+    },
     computed: {
         ModalName() {
             return this.cmsWidgetName;

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

@@ -14,7 +14,7 @@
                         here
                     </p>
                     
-                    <a id="test" href="#!" aria-label="Modal window">Wow!!</a>
+                    <a modalTarget="ModalName" class="modal-text" href="#!" aria-label="Modal window">Wow!!</a>
                     <siteFooter
                         cmsWidgetName="SiteFooterWidget"
                         :isForwardActionDisabled="!meta.valid"
@@ -60,24 +60,19 @@ export default {
             openModal(modalName) {
                 this.$refs[modalName].openModal();
             },
-            clickModalButton() {
-                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) )
+            const elements = document.getElementsByClassName("modal-text")
+            const openModal = (modalName) => {
+                this.$refs[modalName].openModal();
+            };
+            Array.from(elements).forEach((element) => {
+                const target = element.getAttribute("modalTarget");
+                if(target)
+                {
+                    element.addEventListener("click", () => openModal(target) )
+                }
+            });
         },
         computed: {
             bodyText() {

src/styles/common-styles.scss

@@ -57,4 +57,10 @@ body {
       height: calc(100% - 72px);
     }
 
+    .modal-text {
+      display: inline;
+      color: $blue;
+      cursor: pointer;
+      text-decoration: underline;
+    }
   }