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

webapp/src/components/tabContentComponents/settingsComponents/CSMSettings.vue

@@ -17,14 +17,16 @@
 <script>
 import CSMCalibrationSettings from "./CSMSettingsComponents/CSMCalibrationSettings.vue";
 import miniStreamDisplay from "../../genericComponents/miniStreamDisplay.vue";
+// vue3 migration
+import { markRaw } from "vue";
 
 // Export main app
 export default {
   name: "CSMSettings",
 
   components: {
-    CSMCalibrationSettings,
-    miniStreamDisplay,
+    CSMCalibrationSettings: markRaw(CSMCalibrationSettings),
+    miniStreamDisplay: markRaw(miniStreamDisplay),
   },
 };
 </script>

webapp/src/components/tabContentComponents/settingsComponents/CSMSettingsComponents/CSMCalibrationSettings.vue

@@ -57,14 +57,16 @@
 <script>
 import ActionButton from "@/components/labThingsComponents/actionButton.vue";
 import matrixDisplay from "@/components/ui/matrixDisplay.vue";
+// vue3 migration
+import { markRaw } from "vue";
 
 // Export main app
 export default {
   name: "CSMCalibrationSettings",
 
   components: {
-    ActionButton,
-    matrixDisplay,
+    ActionButton: markRaw(ActionButton),
+    matrixDisplay: markRaw(matrixDisplay),
   },
 
   props: {

webapp/src/components/tabContentComponents/settingsComponents/cameraSettings.vue

@@ -25,15 +25,17 @@
 import cameraCalibrationSettings from "./cameraSettingsComponents/cameraCalibrationSettings.vue";
 import miniStreamDisplay from "../../genericComponents/miniStreamDisplay.vue";
 import ServerSpecifiedPropertyControl from "../../labThingsComponents/serverSpecifiedPropertyControl.vue";
+// vue3 migration
+import { markRaw } from "vue";
 
 // Export main app
 export default {
   name: "CameraSettings",
 
   components: {
-    cameraCalibrationSettings,
-    miniStreamDisplay,
-    ServerSpecifiedPropertyControl,
+    cameraCalibrationSettings: markRaw(cameraCalibrationSettings),
+    miniStreamDisplay: markRaw(miniStreamDisplay),
+    ServerSpecifiedPropertyControl: markRaw(ServerSpecifiedPropertyControl),
   },
 
   data() {

webapp/src/components/tabContentComponents/settingsComponents/cameraSettingsComponents/cameraCalibrationSettings.vue

@@ -22,13 +22,15 @@
 
 <script>
 import ServerSpecifiedActionButton from "../../../labThingsComponents/serverSpecifiedActionButton.vue";
+// vue3 migration
+import { markRaw } from "vue";
 
 // Export main app
 export default {
   name: "CameraCalibrationSettings",
 
   components: {
-    ServerSpecifiedActionButton,
+    ServerSpecifiedActionButton: markRaw(ServerSpecifiedActionButton),
   },
 
   props: {

webapp/src/components/tabContentComponents/settingsComponents/displaySettings.vue

@@ -8,14 +8,15 @@
 <script>
 import appSettings from "./displaySetttingsComponents/appSettings.vue";
 import streamSettings from "./displaySetttingsComponents/streamSettings.vue";
+import { markRaw } from "vue";
 
 // Export main app
 export default {
   name: "DisplaySettings",
 
   components: {
-    streamSettings,
-    appSettings,
+    streamSettings: markRaw(streamSettings),
+    appSettings: markRaw(appSettings),
   },
 };
 </script>

webapp/src/components/tabContentComponents/settingsComponents/stageSettings.vue

@@ -29,12 +29,14 @@
 
 <script>
 import ActionButton from "../../labThingsComponents/actionButton.vue";
+// vue3 migration
+import { markRaw } from "vue";
 
 export default {
   name: "StageSettings",
 
   components: {
-    ActionButton,
+    ActionButton: markRaw(ActionButton),
   },
 
   data: function () {