ui_migration fix(deps): --Preliminary-- Define reactivity, with markRaw function wrapper for components.

webapp/src/components/tabContentComponents/settingsContent.vue

@@ -65,17 +65,20 @@ import cameraSettings from "./settingsComponents/cameraSettings.vue";
 import CSMSettings from "./settingsComponents/CSMSettings.vue";
 import stageSettings from "./settingsComponents/stageSettings.vue";
 // Import generic components
-import tabIcon from "../genericComponents/tabIcon";
-import tabContent from "../genericComponents/tabContent";
+import tabIcon from "../genericComponents/tabIcon.vue";
+import tabContent from "../genericComponents/tabContent.vue";
+// vue3 migration
+import { markRaw } from "vue";
+
 
 // Export main app
 export default {
   name: "SettingsContent",
 
   components: {
-    tabIcon,
-    tabContent,
-    calibrationWizard,
+    tabIcon: markRaw(tabIcon),
+    tabContent: markRaw(tabContent),
+    calibrationWizard: markRaw(calibrationWizard),
   },
 
   data: function () {
@@ -87,14 +90,14 @@ export default {
           id: "display",
           title: "Display",
           requireConnection: false,
-          component: displaySettings,
+          component: markRaw(displaySettings),
           requiredThings: [],
         },
         {
           id: "stage-control",
           title: "Stage Control Preferences",
           requireConnection: false,
-          component: stageControlSettings,
+          component: markRaw(stageControlSettings),
           requiredThings: ["stage"],
         },
       ],
@@ -103,21 +106,21 @@ export default {
           id: "camera",
           title: "Camera",
           requireConnection: true,
-          component: cameraSettings,
+          component: markRaw(cameraSettings),
           requiredThings: [],
         },
         {
           id: "stage",
           title: "Stage",
           requireConnection: true,
-          component: stageSettings,
+          component: markRaw(stageSettings),
           requiredThings: ["stage"],
         },
         {
           id: "mapping",
           title: "Camera to Stage Mapping",
           requireConnection: true,
-          component: CSMSettings,
+          component: markRaw(CSMSettings),
           requiredThings: ["camera_stage_mapping"],
         },
       ],