diff --git a/src/layouts/provider-preference/provider-preference.vue b/src/layouts/provider-preference/provider-preference.vue
index 352a8a1b..11d3792c 100644
--- a/src/layouts/provider-preference/provider-preference.vue
+++ b/src/layouts/provider-preference/provider-preference.vue
@@ -30,7 +30,7 @@
                         href="#"
                         @clickEvent="forwardButtonAction(options.TPA)" />
                     <siteFooter
-                        :ref="SITE_FOOTER_REF_NAME"
+                        :ref="componentRefs.SITE_FOOTER_REF_NAME"
                         class="mt-5"
                         cmsWidgetName="SiteFooterWidget"
                         :isForwardButtonHidden="true"
@@ -39,10 +39,10 @@
             </div>
         </div>
         <steeringModal
-            :ref="STEERING_MODAL_REF_NAME"
+            :ref="componentRefs.STEERING_MODAL_REF_NAME"
             cmsWidgetName="StateSteeringModal" />
         <tpaRecalModal
-            :ref="TPA_RECAL_MODAL_REF_NAME"
+            :ref="componentRefs.TPA_RECAL_MODAL_REF_NAME"
             cmsWidgetName="TPARecalModal"
             :ackError="ackError"
             @buttonClick="navigateWithTPAAck" />
@@ -111,11 +111,7 @@ export default {
         });
     },
     data() {
-        return {
-            STEERING_MODAL_REF_NAME,
-            TPA_RECAL_MODAL_REF_NAME,
-            SITE_FOOTER_REF_NAME
-        };
+
     },
     computed: {
         ackError() {
@@ -130,6 +126,14 @@ export default {
         // Expose options for use in the template
         options() {
             return options;
+        },
+        // Expose component refs for use in the template
+        componentRefs() {
+            return {
+                STEERING_MODAL_REF_NAME,
+                TPA_RECAL_MODAL_REF_NAME,
+                SITE_FOOTER_REF_NAME
+            };
         }
     },
     mounted() {