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

webapp/src/components/labThingsComponents/actionButton.vue

@@ -28,10 +28,14 @@
 <script>
 import ActionProgressBar from "./actionProgressBar.vue";
 import ActionStatusModal from "./actionStatusModal.vue";
+import { markRaw } from "vue";
 
 export default {
   name: "ActionButton",
-  components: { ActionProgressBar, ActionStatusModal },
+  components: { 
+    ActionProgressBar: markRaw(ActionProgressBar),
+    ActionStatusModal: markRaw(ActionStatusModal)
+  },
 
   props: {
     action: {
@@ -161,7 +165,7 @@ export default {
     }
   },
 
-  beforeDestroy() {
+  beforeUnmount() {
     if (this.submitOnEvent) {
       this.$root.$off(this.submitOnEvent);
     }

webapp/src/components/labThingsComponents/actionStatusModal.vue

@@ -28,11 +28,15 @@
 import UIkit from "uikit";
 import ActionProgressBar from "./actionProgressBar.vue";
 import ActionLogDisplay from "./actionLogDisplay.vue";
+// vue3 migration
+import { markRaw } from "vue";
 
 export default {
   name: "ActionStatusModal",
-  components: { ActionProgressBar, ActionLogDisplay },
-
+  components: { 
+    ActionProgressBar: markRaw(ActionProgressBar),
+    ActionLogDisplay: markRaw(ActionLogDisplay)
+  },
   props: {
     title: {
       type: String,

webapp/src/components/labThingsComponents/inputFromSchema.vue

@@ -100,12 +100,14 @@
 
 <script>
 import syncPropertyButton from "./syncPropertyButton.vue";
+// vue3 migration
+import { markRaw } from "vue";
 
 export default {
   name: "InputFromSchema",
 
   components: {
-    syncPropertyButton,
+    syncPropertyButton: markRaw(syncPropertyButton),
   },
 
   props: {

webapp/src/components/labThingsComponents/propertyControl.vue

@@ -13,12 +13,14 @@
 <script>
 import { formatValue } from "@/js_utils/formatter.mjs";
 import InputFromSchema from "./inputFromSchema.vue";
+// vue3 migration
+import { markRaw } from "vue";
 
 export default {
   name: "PropertyControl",
 
   components: {
-    InputFromSchema,
+    InputFromSchema: markRaw(InputFromSchema),
   },
 
   props: {

webapp/src/components/labThingsComponents/serverSpecifiedActionButton.vue

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

webapp/src/components/labThingsComponents/serverSpecifiedPropertyControl.vue

@@ -11,13 +11,15 @@
 
 <script>
 import PropertyControl from "./propertyControl.vue";
+// vue3 migration
+import { markRaw } from "vue";
 
 // Export main app
 export default {
   name: "ServerSpecifiedPropertyControl",
 
   components: {
-    PropertyControl,
+    PropertyControl: markRaw(PropertyControl),
   },
 
   props: {