Migrate to Vue 3 Migration Build (#6767)

* Replacing all instances of the new Vue() component creation pattern
* In Vue 3, components cannot be created on the fly and mounted off-DOM. The suggested fix from Vue is to use createApp, but in the context of Open MCT this means dozens of Vue apps being created and destroyed at any given moment. Instead, we have used a community hack for creating individual components.
* beforeDestroy() -> beforeUnmount()
* destroyed() -> unmounted()
* The addition of deep: true option on Array listeners is now required to detect Array changes
* Open MCT is now mounted on a child div instead of directly on document.body


---------

Co-authored-by: Scott Bell <scott@traclabs.com>
Co-authored-by: Andrew Henry <akhenry@gmail.com>
Co-authored-by: John Hill <john.c.hill@nasa.gov>

src/plugins/displayLayout/components/AlphanumericFormat.vue

@@ -61,7 +61,7 @@ export default {
     this.openmct.selection.on('change', this.handleSelection);
     this.handleSelection(this.openmct.selection.get());
   },
-  destroyed() {
+  unmounted() {
     this.openmct.editor.off('isEditing', this.toggleEdit);
     this.openmct.selection.off('change', this.handleSelection);
   },

src/plugins/displayLayout/components/BoxView.vue

@@ -115,7 +115,7 @@ export default {
       this.initSelect
     );
   },
-  destroyed() {
+  unmounted() {
     if (this.removeSelectable) {
       this.removeSelectable();
     }

src/plugins/displayLayout/components/DisplayLayout.vue

@@ -55,7 +55,7 @@
       :grid-size="gridSize"
       :init-select="initSelectIndex === index"
       :index="index"
-      :multi-select="selectedLayoutItems.length > 1"
+      :multi-select="selectedLayoutItems.length > 1 || null"
       :is-editing="isEditing"
       @contextClick="updateViewContext"
       @move="move"
@@ -161,16 +161,14 @@ export default {
       selection: [],
       showGrid: true,
       viewContext: {},
-      gridDimensions: [0, 0]
+      gridDimensions: [0, 0],
+      layoutItems: this.domainObject.configuration.items
     };
   },
   computed: {
     gridSize() {
       return this.domainObject.configuration.layoutGrid.map(Number);
     },
-    layoutItems() {
-      return this.domainObject.configuration.items;
-    },
     selectedLayoutItems() {
       return this.layoutItems.filter((item) => {
         return this.itemIsInCurrentSelection(item);
@@ -223,9 +221,13 @@ export default {
     this.composition.load();
     this.gridDimensions = [this.$el.offsetWidth, this.$el.scrollHeight];
 
+    this.openmct.objects.observe(this.domainObject, 'configuration.items', (items) => {
+      this.layoutItems = items;
+    });
+
     this.watchDisplayResize();
   },
-  destroyed: function () {
+  unmounted: function () {
     this.openmct.selection.off('change', this.setSelection);
     this.composition.off('add', this.addChild);
     this.composition.off('remove', this.removeChild);

src/plugins/displayLayout/components/EllipseView.vue

@@ -115,7 +115,7 @@ export default {
       this.initSelect
     );
   },
-  destroyed() {
+  unmounted() {
     if (this.removeSelectable) {
       this.removeSelectable();
     }

src/plugins/displayLayout/components/ImageView.vue

@@ -118,7 +118,7 @@ export default {
       this.initSelect
     );
   },
-  destroyed() {
+  unmounted() {
     if (this.removeSelectable) {
       this.removeSelectable();
     }

src/plugins/displayLayout/components/LineView.vue

@@ -24,13 +24,13 @@
   <div class="l-layout__frame c-frame no-frame c-line-view" :class="[styleClass]" :style="style">
     <svg width="100%" height="100%">
       <line
-        class="c-line-view__hover-indicator"
         v-bind="linePosition"
+        class="c-line-view__hover-indicator"
         vector-effect="non-scaling-stroke"
       />
       <line
-        class="c-line-view__line"
         v-bind="linePosition"
+        class="c-line-view__line"
         :stroke="stroke"
         vector-effect="non-scaling-stroke"
       />
@@ -257,7 +257,7 @@ export default {
       this.initSelect
     );
   },
-  destroyed() {
+  unmounted() {
     if (this.removeSelectable) {
       this.removeSelectable();
     }

src/plugins/displayLayout/components/SubobjectView.vue

@@ -133,7 +133,7 @@ export default {
       this.openmct.objects.get(this.item.identifier).then(this.setObject);
     }
   },
-  beforeDestroy() {
+  beforeUnmount() {
     if (this.removeSelectable) {
       this.removeSelectable();
     }

src/plugins/displayLayout/components/TelemetryView.vue

@@ -238,7 +238,7 @@ export default {
     this.status = this.openmct.status.get(this.item.identifier);
     this.removeStatusListener = this.openmct.status.observe(this.item.identifier, this.setStatus);
   },
-  beforeDestroy() {
+  beforeUnmount() {
     this.removeStatusListener();
 
     if (this.removeSelectable) {

src/plugins/displayLayout/components/TextView.vue

@@ -127,7 +127,7 @@ export default {
       this.initSelect
     );
   },
-  destroyed() {
+  unmounted() {
     if (this.removeSelectable) {
       this.removeSelectable();
     }

src/plugins/displayLayout/components/display-layout.scss

@@ -17,11 +17,6 @@
   flex-direction: column;
   overflow: auto;
 
-  &__grid-holder,
-  &__dimensions {
-    display: none;
-  }
-
   &__dimensions {
     $b: 1px dashed $editDimensionsColor;
     border-right: $b;

src/plugins/displayLayout/components/edit-marquee.scss

@@ -1,6 +1,5 @@
 .c-frame-edit {
   // In Layouts, this is the editing rect and handles
-  display: none; // Set to display: block in DisplayLayout.vue
   pointer-events: none;
   @include abs();
   border: $editMarqueeBorder;