From 97b2ebc0bbb6da1570c6d4922ff150257e448075 Mon Sep 17 00:00:00 2001
From: David 'Epper' Marshall <epper.marshall@gmail.com>
Date: Tue, 10 Oct 2023 16:29:01 -0400
Subject: [PATCH] Fix remaining `vue-compat` warnings (#6966)

* PascalCase files

* emit warnings

* minor updates

* merge conflict resolve pt 1

* part 2

* update to eventbus

* eventbus spelling

* fix: import

* fix: eventBus injection

* fix: import

* fix(test): provide eventBus in overlay plot tests

* refactor: EventBus as composable

* chore: lint:fix

* chore: require vue event hyphenation

* fix: revert event renames

* refactor: use PascalCase name

* fix: ensure `$attrs` are properly bound

* fix: emit `click` event from SearchComponent

* chore: remove rules already included in `vue/vue3-recommended` ruleset

* fix: remove `Vue` import

* chore: remove unused files

* fix: fix lint scripts and make them cross-platform

* refactor: rename `DataImagery.vue` -> `ImageryInspectorView.vue`

* refactor: rename `NumericData.vue` -> `NumericDataInspectorView.vue`

* refactor: rename components

* refactor: rename `GeneralIndicators.vue` -> `StatusIndicators.vue`

* refactor: rename components

---------

Co-authored-by: Jesse Mazzella <jesse.d.mazzella@nasa.gov>
---
 .eslintrc.js                                  | 17 +++---
 example/simpleVuePlugin/HelloWorld.vue        | 19 -------
 example/simpleVuePlugin/plugin.js             | 36 -------------
 package.json                                  |  5 +-
 src/MCT.js                                    |  2 +-
 src/api/forms/FormController.js               |  6 +--
 src/api/forms/FormsAPI.js                     |  2 +-
 src/api/forms/components/FormProperties.vue   |  9 ++--
 src/api/forms/components/FormRow.vue          |  5 +-
 .../components/controls/AutoCompleteField.vue |  3 +-
 .../controls/ClockDisplayFormatField.vue      |  5 +-
 .../{Composite.vue => CompositeContainer.vue} |  5 +-
 .../components/controls/CompositeItem.vue     |  5 +-
 .../{Datetime.vue => DatetimeField.vue}       |  3 +-
 .../forms/components/controls/FileInput.vue   |  7 +--
 .../{Locator.vue => LocatorField.vue}         |  3 +-
 .../forms/components/controls/NumberField.vue |  3 +-
 .../forms/components/controls/SelectField.vue |  3 +-
 .../components/controls/TextAreaField.vue     |  3 +-
 .../forms/components/controls/TextField.vue   |  3 +-
 src/api/forms/toggle-check-box-mixin.js       |  3 +-
 .../{Menu.vue => MenuComponent.vue}           |  0
 src/api/menu/menu.js                          |  2 +-
 .../overlays/components/OverlayComponent.vue  |  1 +
 src/plugins/LADTable/components/LadRow.vue    |  3 +-
 src/plugins/LADTable/components/LadTable.vue  | 10 ++--
 src/plugins/charts/bar/BarGraphPlot.vue       |  1 +
 .../charts/bar/inspector/SeriesOptions.vue    |  2 +-
 .../charts/scatter/ScatterPlotForm.vue        |  3 +-
 .../scatter/ScatterPlotWithUnderlay.vue       |  1 +
 .../scatter/inspector/PlotOptionsEdit.vue     |  2 +-
 src/plugins/charts/scatter/plugin.js          |  2 +-
 src/plugins/clock/ClockViewProvider.js        |  2 +-
 .../{Clock.vue => ClockComponent.vue}         |  0
 .../components/ConditionCollection.vue        | 31 ++++++-----
 .../{Condition.vue => ConditionItem.vue}      | 22 +++++---
 .../condition/components/ConditionSet.vue     | 13 ++---
 .../{Criterion.vue => CriterionItem.vue}      |  1 +
 src/plugins/condition/components/TestData.vue |  3 +-
 .../components/inspector/StyleEditor.vue      |  1 +
 .../displayLayout/components/BoxView.vue      |  5 +-
 .../components/DisplayLayout.vue              | 10 ++--
 .../displayLayout/components/EditMarquee.vue  |  3 +-
 .../displayLayout/components/EllipseView.vue  |  5 +-
 .../displayLayout/components/ImageView.vue    |  5 +-
 .../displayLayout/components/LayoutFrame.vue  |  3 +-
 .../displayLayout/components/LineView.vue     |  5 +-
 .../components/SubobjectView.vue              |  5 +-
 .../components/TelemetryView.vue              |  9 ++--
 .../displayLayout/components/TextView.vue     |  5 +-
 .../FaultManagementListHeader.vue             |  7 +--
 .../FaultManagementListItem.vue               |  9 ++--
 .../FaultManagementListView.vue               | 18 +++----
 .../faultManagement/FaultManagementSearch.vue |  9 ++--
 .../FaultManagementToolbar.vue                |  5 +-
 .../filters/components/FilterField.vue        | 14 +++--
 .../filters/components/FilterObject.vue       | 19 +++----
 .../filters/components/FiltersView.vue        |  4 +-
 .../filters/components/GlobalFilters.vue      | 17 +++---
 .../{Container.vue => ContainerComponent.vue} |  3 +-
 .../flexibleLayout/components/DropHint.vue    |  1 +
 .../components/FlexibleLayout.vue             |  2 +-
 .../{Frame.vue => FrameComponent.vue}         |  0
 .../components/ResizeHandle.vue               |  1 +
 src/plugins/gauge/GaugePlugin.js              |  2 +-
 src/plugins/gauge/GaugeViewProvider.js        |  2 +-
 .../{Gauge.vue => GaugeComponent.vue}         |  1 -
 .../gauge/components/GaugeFormController.vue  |  5 +-
 .../{Compass.vue => CompassComponent.vue}     |  1 +
 .../imagery/components/Compass/pluginSpec.js  |  2 +-
 .../imagery/components/FilterSettings.vue     |  3 +-
 .../imagery/components/ImageControls.vue      | 40 ++++++++------
 .../imagery/components/ImageThumbnail.vue     |  1 +
 .../imagery/components/ImageryView.vue        | 21 ++++----
 .../imagery/components/LayerSettings.vue      |  3 +-
 .../imagery/components/ZoomSettings.vue       |  9 ++--
 .../DataVisualization.vue                     | 16 +++---
 .../{Imagery.vue => ImageryInspectorView.vue} |  0
 ...cData.vue => NumericDataInspectorView.vue} |  2 +-
 .../annotations/tags/TagEditor.vue            |  5 +-
 .../annotations/tags/TagSelection.vue         |  7 +--
 .../inspectorViews/elements/ElementItem.vue   |  1 +
 .../elements/ElementItemGroup.vue             |  1 +
 .../inspectorViews/elements/ElementsPool.vue  |  2 +-
 .../elements/PlotElementsPool.vue             |  2 +-
 .../{Location.vue => LocationComponent.vue}   |  0
 ...Properties.vue => PropertiesComponent.vue} |  2 +-
 .../properties/PropertiesViewProvider.js      |  2 +-
 .../inspectorViews/styles/FontStyleEditor.vue |  1 +
 .../styles/SavedStyleSelector.vue             |  1 +
 .../styles/StylesInspectorView.vue            |  4 +-
 .../{Licenses.vue => LicensesComponent.vue}   |  0
 src/plugins/licenses/plugin.js                |  2 +-
 src/plugins/notebook/NotebookViewProvider.js  |  2 +-
 .../{Notebook.vue => NotebookComponent.vue}   | 35 ++++++-------
 .../notebook/components/NotebookEmbed.vue     |  5 +-
 .../notebook/components/NotebookEntry.vue     | 21 +++++---
 .../components/NotebookSnapshotContainer.vue  |  2 +-
 .../notebook/components/PageCollection.vue    | 19 +++----
 .../notebook/components/PageComponent.vue     |  7 +--
 .../notebook/components/SearchResults.vue     | 17 +++---
 .../notebook/components/SectionCollection.vue | 15 +++---
 .../notebook/components/SectionComponent.vue  |  7 +--
 .../{Sidebar.vue => SidebarComponent.vue}     | 41 +++++++++------
 .../components/NotificationsList.vue          |  1 +
 src/plugins/plan/PlanViewProvider.js          |  2 +-
 .../components/{Plan.vue => PlanView.vue}     |  0
 src/plugins/plan/pluginSpec.js                |  2 +-
 src/plugins/plot/MctPlot.vue                  | 52 +++++++++++++------
 src/plugins/plot/MctTicks.vue                 |  3 +-
 src/plugins/plot/{Plot.vue => PlotView.vue}   | 40 ++++++++------
 src/plugins/plot/PlotViewProvider.js          |  2 +-
 src/plugins/plot/axis/XAxis.vue               |  5 +-
 src/plugins/plot/axis/YAxis.vue               |  9 ++--
 src/plugins/plot/chart/MctChart.vue           |  5 +-
 .../plot/inspector/PlotOptionsEdit.vue        |  4 +-
 .../plot/inspector/forms/SeriesForm.vue       |  9 ++--
 .../plot/inspector/forms/YAxisForm.vue        |  5 +-
 src/plugins/plot/legend/PlotLegend.vue        |  7 +--
 .../plot/legend/PlotLegendItemCollapsed.vue   |  3 +-
 .../plot/legend/PlotLegendItemExpanded.vue    |  3 +-
 .../overlayPlot/OverlayPlotViewProvider.js    |  2 +-
 src/plugins/plot/overlayPlot/pluginSpec.js    |  2 +-
 src/plugins/plot/pluginSpec.js                |  2 +-
 src/plugins/plot/stackedPlot/StackedPlot.vue  | 14 ++---
 .../plot/stackedPlot/StackedPlotItem.vue      | 37 ++++++++-----
 .../{Tabs.vue => TabsComponent.vue}           |  0
 src/plugins/tabs/tabs.js                      |  2 +-
 .../telemetryTable/TelemetryTableView.js      | 23 +++++++-
 .../telemetryTable/components/SizingRow.vue   |  1 +
 .../components/TableColumnHeader.vue          | 20 ++++---
 .../{Table.vue => TableComponent.vue}         | 30 ++++++-----
 .../telemetryTable/components/TableRow.vue    | 16 +++---
 src/plugins/timeConductor/ConductorAxis.vue   | 11 ++--
 src/plugins/timeConductor/ConductorClock.vue  |  3 +-
 .../{Conductor.vue => ConductorComponent.vue} | 18 +++----
 .../timeConductor/ConductorInputsFixed.vue    |  5 +-
 .../timeConductor/ConductorInputsRealtime.vue |  5 +-
 src/plugins/timeConductor/ConductorMode.vue   |  3 +-
 src/plugins/timeConductor/ConductorPopUp.vue  | 40 ++++++++------
 src/plugins/timeConductor/DatePicker.vue      |  1 +
 src/plugins/timeConductor/TimePopupFixed.vue  |  1 +
 .../timeConductor/TimePopupRealtime.vue       |  1 +
 .../independent/IndependentClock.vue          |  3 +-
 .../independent/IndependentMode.vue           |  3 +-
 .../independent/IndependentTimeConductor.vue  | 11 ++--
 src/plugins/timeConductor/plugin.js           |  2 +-
 .../{Timelist.vue => TimelistComponent.vue}   |  0
 src/plugins/timelist/TimelistViewProvider.js  |  2 +-
 .../timelist/inspector/EventProperties.vue    |  1 +
 .../{Filtering.vue => FilteringComponent.vue} |  1 +
 .../inspector/TimelistPropertiesView.vue      |  2 +-
 src/plugins/timer/TimerViewProvider.js        |  2 +-
 .../{Timer.vue => TimerComponent.vue}         |  0
 .../viewLargeAction/viewLargeAction.js        |  6 +--
 src/ui/color/ColorSwatch.vue                  |  3 +-
 src/ui/components/List/ListHeader.vue         |  1 +
 src/ui/components/ObjectView.vue              |  1 +
 .../{Search.vue => SearchComponent.vue}       | 31 +++++------
 src/ui/components/ToggleSwitch.vue            |  1 +
 src/ui/components/ViewControl.vue             |  1 +
 .../{Inspector.vue => InspectorPanel.vue}     |  0
 src/ui/inspector/InspectorTabs.vue            |  1 +
 src/ui/layout/{Layout.vue => AppLayout.vue}   | 18 +++----
 src/ui/layout/LayoutSpec.js                   |  2 +-
 src/ui/layout/MctTree.vue                     |  3 +-
 .../{Multipane.vue => MultipaneContainer.vue} |  0
 src/ui/layout/{Pane.vue => PaneContainer.vue} |  1 +
 src/ui/layout/RecentObjectsList.vue           |  9 ++--
 src/ui/layout/RecentObjectsListItem.vue       |  3 +-
 src/ui/layout/TreeItem.vue                    |  6 +++
 src/ui/layout/ViewSwitcher.vue                |  3 +-
 src/ui/layout/search/GrandSearch.vue          |  2 +-
 src/ui/layout/search/ObjectSearchResult.vue   |  1 +
 .../{Indicators.vue => StatusIndicators.vue}  |  0
 src/ui/preview/PreviewAction.js               |  6 +--
 .../{Preview.vue => PreviewContainer.vue}     |  0
 src/ui/preview/PreviewHeader.vue              |  3 +-
 .../{Toolbar.vue => ToolbarContainer.vue}     |  0
 src/ui/toolbar/components/ToolbarButton.vue   |  1 +
 src/ui/toolbar/components/ToolbarCheckbox.vue |  1 +
 .../toolbar/components/ToolbarColorPicker.vue |  1 +
 src/ui/toolbar/components/ToolbarInput.vue    |  1 +
 src/ui/toolbar/components/ToolbarMenu.vue     |  1 +
 .../toolbar/components/ToolbarSelectMenu.vue  |  1 +
 .../components/ToolbarToggleButton.vue        |  1 +
 src/utils/useEventBus.js                      | 19 +++++++
 187 files changed, 731 insertions(+), 533 deletions(-)
 delete mode 100644 example/simpleVuePlugin/HelloWorld.vue
 delete mode 100644 example/simpleVuePlugin/plugin.js
 rename src/api/forms/components/controls/{Composite.vue => CompositeContainer.vue} (94%)
 rename src/api/forms/components/controls/{Datetime.vue => DatetimeField.vue} (98%)
 rename src/api/forms/components/controls/{Locator.vue => LocatorField.vue} (96%)
 rename src/api/menu/components/{Menu.vue => MenuComponent.vue} (100%)
 rename src/plugins/clock/components/{Clock.vue => ClockComponent.vue} (100%)
 rename src/plugins/condition/components/{Condition.vue => ConditionItem.vue} (96%)
 rename src/plugins/condition/components/{Criterion.vue => CriterionItem.vue} (99%)
 rename src/plugins/flexibleLayout/components/{Container.vue => ContainerComponent.vue} (98%)
 rename src/plugins/flexibleLayout/components/{Frame.vue => FrameComponent.vue} (100%)
 rename src/plugins/gauge/components/{Gauge.vue => GaugeComponent.vue} (99%)
 rename src/plugins/imagery/components/Compass/{Compass.vue => CompassComponent.vue} (98%)
 rename src/plugins/inspectorDataVisualization/{Imagery.vue => ImageryInspectorView.vue} (100%)
 rename src/plugins/inspectorDataVisualization/{NumericData.vue => NumericDataInspectorView.vue} (99%)
 rename src/plugins/inspectorViews/properties/{Location.vue => LocationComponent.vue} (100%)
 rename src/plugins/inspectorViews/properties/{Properties.vue => PropertiesComponent.vue} (99%)
 rename src/plugins/licenses/{Licenses.vue => LicensesComponent.vue} (100%)
 rename src/plugins/notebook/components/{Notebook.vue => NotebookComponent.vue} (97%)
 rename src/plugins/notebook/components/{Sidebar.vue => SidebarComponent.vue} (88%)
 rename src/plugins/plan/components/{Plan.vue => PlanView.vue} (100%)
 rename src/plugins/plot/{Plot.vue => PlotView.vue} (88%)
 rename src/plugins/tabs/components/{Tabs.vue => TabsComponent.vue} (100%)
 rename src/plugins/telemetryTable/components/{Table.vue => TableComponent.vue} (97%)
 rename src/plugins/timeConductor/{Conductor.vue => ConductorComponent.vue} (96%)
 rename src/plugins/timelist/{Timelist.vue => TimelistComponent.vue} (100%)
 rename src/plugins/timelist/inspector/{Filtering.vue => FilteringComponent.vue} (99%)
 rename src/plugins/timer/components/{Timer.vue => TimerComponent.vue} (100%)
 rename src/ui/components/{Search.vue => SearchComponent.vue} (74%)
 rename src/ui/inspector/{Inspector.vue => InspectorPanel.vue} (100%)
 rename src/ui/layout/{Layout.vue => AppLayout.vue} (94%)
 rename src/ui/layout/{Multipane.vue => MultipaneContainer.vue} (100%)
 rename src/ui/layout/{Pane.vue => PaneContainer.vue} (99%)
 rename src/ui/layout/status-bar/{Indicators.vue => StatusIndicators.vue} (100%)
 rename src/ui/preview/{Preview.vue => PreviewContainer.vue} (100%)
 rename src/ui/toolbar/{Toolbar.vue => ToolbarContainer.vue} (100%)
 create mode 100644 src/utils/useEventBus.js

diff --git a/.eslintrc.js b/.eslintrc.js
index 66e1c13ae4..9408c0a069 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -145,29 +145,26 @@ module.exports = {
     'no-implicit-coercion': 'error',
     //https://eslint.org/docs/rules/no-unneeded-ternary
     'no-unneeded-ternary': 'error',
-    "unicorn/filename-case": [
-      "error",
+    'unicorn/filename-case': [
+      'error',
       {
-        "cases": {
-          "pascalCase": true
+        cases: {
+          pascalCase: true
         },
-        "ignore": [
-          "^.*\\.js$"
-        ]
+        ignore: ['^.*\\.js$']
       }
     ],
     'vue/first-attribute-linebreak': 'error',
     'vue/multiline-html-element-content-newline': 'off',
     'vue/singleline-html-element-content-newline': 'off',
-    'vue/multi-word-component-names': 'off', // TODO enable, align with conventions
-    'vue/no-mutating-props': 'off'
+    'vue/no-mutating-props': 'off' // TODO: Remove this rule and fix resulting errors
   },
   overrides: [
     {
       files: LEGACY_FILES,
       rules: {
         'no-unused-vars': [
-          'warn',
+          'error',
           {
             vars: 'all',
             args: 'none',
diff --git a/example/simpleVuePlugin/HelloWorld.vue b/example/simpleVuePlugin/HelloWorld.vue
deleted file mode 100644
index dc6b4272cc..0000000000
--- a/example/simpleVuePlugin/HelloWorld.vue
+++ /dev/null
@@ -1,19 +0,0 @@
-<template>
-  <div class="example">{{ msg }}</div>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      msg: 'Hello world!'
-    };
-  }
-};
-</script>
-
-<style>
-.example {
-  color: red;
-}
-</style>
diff --git a/example/simpleVuePlugin/plugin.js b/example/simpleVuePlugin/plugin.js
deleted file mode 100644
index 9ff73043f8..0000000000
--- a/example/simpleVuePlugin/plugin.js
+++ /dev/null
@@ -1,36 +0,0 @@
-import Vue from 'vue';
-
-import HelloWorld from './HelloWorld.vue';
-
-function SimpleVuePlugin() {
-  return function install(openmct) {
-    openmct.types.addType('hello-world', {
-      name: 'Hello World',
-      description: 'An introduction object',
-      creatable: true
-    });
-    openmct.objectViews.addProvider({
-      name: 'demo-provider',
-      key: 'hello-world',
-      cssClass: 'icon-packet',
-      canView: function (d) {
-        return d.type === 'hello-world';
-      },
-      view: function (domainObject) {
-        var vm;
-
-        return {
-          show: function (container) {
-            vm = new Vue(HelloWorld);
-            container.appendChild(vm.$mount().$el);
-          },
-          destroy: function (container) {
-            //vm.$destroy();
-          }
-        };
-      }
-    });
-  };
-}
-
-export default SimpleVuePlugin;
diff --git a/package.json b/package.json
index 0f18f327b0..7584141d5b 100644
--- a/package.json
+++ b/package.json
@@ -70,6 +70,7 @@
     "sass-loader": "13.3.2",
     "sinon": "15.1.0",
     "style-loader": "3.3.3",
+    "tiny-emitter": "2.1.0",
     "typescript": "5.2.2",
     "uuid": "9.0.0",
     "vue": "3.3.4",
@@ -85,8 +86,8 @@
     "start": "npx webpack serve --config ./.webpack/webpack.dev.js",
     "start:prod": "npx webpack serve --config ./.webpack/webpack.prod.js",
     "start:coverage": "npx webpack serve --config ./.webpack/webpack.coverage.js",
-    "lint:js": "eslint example src e2e --ext .js openmct.js --max-warnings=0",
-    "lint:vue": "eslint example src --ext .vue",
+    "lint:js": "eslint \"example/**/*.js\" \"src/**/*.js\" \"e2e/**/*.js\" \"openmct.js\" --max-warnings=0",
+    "lint:vue": "eslint \"src/**/*.vue\"",
     "lint:spelling": "cspell \"**/*.{js,md,vue}\" --show-context --gitignore --quiet",
     "lint": "run-p \"lint:js -- {1}\" \"lint:vue -- {1}\" \"lint:spelling -- {1}\" --",
     "lint:fix": "eslint example src e2e --ext .js,.vue openmct.js --fix",
diff --git a/src/MCT.js b/src/MCT.js
index 199e2f61fc..9fa755d7a3 100644
--- a/src/MCT.js
+++ b/src/MCT.js
@@ -33,7 +33,7 @@ define([
   './ui/registries/ToolbarRegistry',
   './ui/router/ApplicationRouter',
   './ui/router/Browse',
-  './ui/layout/Layout.vue',
+  './ui/layout/AppLayout.vue',
   './ui/preview/plugin',
   './api/Branding',
   './plugins/licenses/plugin',
diff --git a/src/api/forms/FormController.js b/src/api/forms/FormController.js
index eb608e0f7e..4c946573c9 100644
--- a/src/api/forms/FormController.js
+++ b/src/api/forms/FormController.js
@@ -3,9 +3,9 @@ import mount from 'utils/mount';
 import AutoCompleteField from './components/controls/AutoCompleteField.vue';
 import CheckBoxField from './components/controls/CheckBoxField.vue';
 import ClockDisplayFormatField from './components/controls/ClockDisplayFormatField.vue';
-import Datetime from './components/controls/Datetime.vue';
+import Datetime from './components/controls/DatetimeField.vue';
 import FileInput from './components/controls/FileInput.vue';
-import Locator from './components/controls/Locator.vue';
+import Locator from './components/controls/LocatorField.vue';
 import NumberField from './components/controls/NumberField.vue';
 import SelectField from './components/controls/SelectField.vue';
 import TextAreaField from './components/controls/TextAreaField.vue';
@@ -87,7 +87,7 @@ export default class FormControl {
                 onChange
               };
             },
-            template: `<FormControlComponent :model="model" @onChange="onChange"></FormControlComponent>`
+            template: `<FormControlComponent :model="model" @on-change="onChange"></FormControlComponent>`
           },
           {
             element,
diff --git a/src/api/forms/FormsAPI.js b/src/api/forms/FormsAPI.js
index 367aca18a1..0564a2cc1c 100644
--- a/src/api/forms/FormsAPI.js
+++ b/src/api/forms/FormsAPI.js
@@ -171,7 +171,7 @@ export default class FormsAPI {
           };
         },
         template:
-          '<FormProperties :model="formStructure" @onChange="onChange" @onCancel="onCancel" @onSave="onSave"></FormProperties>'
+          '<FormProperties :model="formStructure" @on-change="onChange" @on-cancel="onCancel" @on-save="onSave"></FormProperties>'
       },
       {
         element,
diff --git a/src/api/forms/components/FormProperties.vue b/src/api/forms/components/FormProperties.vue
index b4c0676b45..71fc0cb33f 100644
--- a/src/api/forms/components/FormProperties.vue
+++ b/src/api/forms/components/FormProperties.vue
@@ -44,7 +44,7 @@
           :css-class="row.cssClass"
           :first="index < 1"
           :row="row"
-          @onChange="onChange"
+          @on-change="onChange"
         />
       </div>
     </form>
@@ -94,6 +94,7 @@ export default {
       }
     }
   },
+  emits: ['on-change', 'on-save', 'on-cancel'],
   data() {
     return {
       invalidProperties: {},
@@ -144,13 +145,13 @@ export default {
     onChange(data) {
       this.invalidProperties[data.model.key] = data.invalid;
 
-      this.$emit('onChange', data);
+      this.$emit('on-change', data);
     },
     onCancel() {
-      this.$emit('onCancel');
+      this.$emit('on-cancel');
     },
     onSave() {
-      this.$emit('onSave');
+      this.$emit('on-save');
     }
   }
 };
diff --git a/src/api/forms/components/FormRow.vue b/src/api/forms/components/FormRow.vue
index ccff26a7fb..1cf2496825 100644
--- a/src/api/forms/components/FormRow.vue
+++ b/src/api/forms/components/FormRow.vue
@@ -21,7 +21,7 @@
 -->
 
 <template>
-  <div class="form-row c-form__row" :class="[{ first: first }, cssClass]" @onChange="onChange">
+  <div class="form-row c-form__row" :class="[{ first: first }, cssClass]" @on-change="onChange">
     <label class="c-form-row__label" :title="row.description" :for="`form-${row.key}`">
       {{ row.name }}
     </label>
@@ -51,6 +51,7 @@ export default {
       required: true
     }
   },
+  emits: ['on-change'],
   data() {
     return {
       formControl: this.openmct.forms.getFormControl(this.row.control),
@@ -101,7 +102,7 @@ export default {
       this.valid = this.validateRow(data);
       data.invalid = !this.valid;
 
-      this.$emit('onChange', data);
+      this.$emit('on-change', data);
     },
     validateRow(data) {
       let valid = true;
diff --git a/src/api/forms/components/controls/AutoCompleteField.vue b/src/api/forms/components/controls/AutoCompleteField.vue
index f902511471..ac5ac6f205 100644
--- a/src/api/forms/components/controls/AutoCompleteField.vue
+++ b/src/api/forms/components/controls/AutoCompleteField.vue
@@ -88,6 +88,7 @@ export default {
       }
     }
   },
+  emits: ['on-change'],
   data() {
     return {
       hideOptions: true,
@@ -138,7 +139,7 @@ export default {
           value: newValue
         };
 
-        this.$emit('onChange', data);
+        this.$emit('on-change', data);
       }
     },
     hideOptions(newValue) {
diff --git a/src/api/forms/components/controls/ClockDisplayFormatField.vue b/src/api/forms/components/controls/ClockDisplayFormatField.vue
index 960b15e1fa..bd52e37ab6 100644
--- a/src/api/forms/components/controls/ClockDisplayFormatField.vue
+++ b/src/api/forms/components/controls/ClockDisplayFormatField.vue
@@ -22,7 +22,7 @@
 
 <template>
   <div class="c-form-control--clock-display-format-fields">
-    <SelectField v-for="item in items" :key="item.key" :model="item" @onChange="onChange" />
+    <SelectField v-for="item in items" :key="item.key" :model="item" @on-change="onChange" />
   </div>
 </template>
 
@@ -39,6 +39,7 @@ export default {
       required: true
     }
   },
+  emits: ['on-change'],
   data() {
     return {
       items: []
@@ -55,7 +56,7 @@ export default {
   },
   methods: {
     onChange(data) {
-      this.$emit('onChange', data);
+      this.$emit('on-change', data);
     }
   }
 };
diff --git a/src/api/forms/components/controls/Composite.vue b/src/api/forms/components/controls/CompositeContainer.vue
similarity index 94%
rename from src/api/forms/components/controls/Composite.vue
rename to src/api/forms/components/controls/CompositeContainer.vue
index 5ae11bce4e..dc658c5989 100644
--- a/src/api/forms/components/controls/Composite.vue
+++ b/src/api/forms/components/controls/CompositeContainer.vue
@@ -28,7 +28,7 @@
       :first="index < 1"
       :value="JSON.stringify(model.value[index])"
       :item="item"
-      @onChange="onChange"
+      @on-change="onChange"
     />
   </span>
 </template>
@@ -46,12 +46,13 @@ export default {
       required: true
     }
   },
+  emits: ['on-change'],
   mounted() {
     this.model.items.forEach((item, index) => (item.key = `${this.model.key}.${index}`));
   },
   methods: {
     onChange(data) {
-      this.$emit('onChange', data);
+      this.$emit('on-change', data);
     }
   }
 };
diff --git a/src/api/forms/components/controls/CompositeItem.vue b/src/api/forms/components/controls/CompositeItem.vue
index 42ab07d025..c94b26d07e 100644
--- a/src/api/forms/components/controls/CompositeItem.vue
+++ b/src/api/forms/components/controls/CompositeItem.vue
@@ -22,7 +22,7 @@
 
 <template>
   <div :class="compositeCssClass">
-    <FormRow :css-class="item.cssClass" :first="first" :row="row" @onChange="onChange" />
+    <FormRow :css-class="item.cssClass" :first="first" :row="row" @on-change="onChange" />
     <span class="composite-control-label">
       {{ item.name }}
     </span>
@@ -50,6 +50,7 @@ export default {
       }
     }
   },
+  emits: ['on-change'],
   computed: {
     compositeCssClass() {
       return `l-composite-control l-${this.item.control}`;
@@ -63,7 +64,7 @@ export default {
   },
   methods: {
     onChange(data) {
-      this.$emit('onChange', data);
+      this.$emit('on-change', data);
     }
   }
 };
diff --git a/src/api/forms/components/controls/Datetime.vue b/src/api/forms/components/controls/DatetimeField.vue
similarity index 98%
rename from src/api/forms/components/controls/Datetime.vue
rename to src/api/forms/components/controls/DatetimeField.vue
index 017efc0058..04bf77b7ec 100644
--- a/src/api/forms/components/controls/Datetime.vue
+++ b/src/api/forms/components/controls/DatetimeField.vue
@@ -85,6 +85,7 @@ export default {
       required: true
     }
   },
+  emits: ['on-change'],
   data() {
     return {
       format: DATE_FORMAT,
@@ -139,7 +140,7 @@ export default {
         value: new Date(timestamp).toISOString()
       };
 
-      this.$emit('onChange', data);
+      this.$emit('on-change', data);
     },
     resetValues() {
       this.setDatetime();
diff --git a/src/api/forms/components/controls/FileInput.vue b/src/api/forms/components/controls/FileInput.vue
index c7afaba6a4..150d8f99ed 100644
--- a/src/api/forms/components/controls/FileInput.vue
+++ b/src/api/forms/components/controls/FileInput.vue
@@ -52,6 +52,7 @@ export default {
       required: true
     }
   },
+  emits: ['on-change'],
   data() {
     return {
       fileInfo: undefined
@@ -101,7 +102,7 @@ export default {
           model: self.model,
           value: fileInfo
         };
-        self.$emit('onChange', data);
+        self.$emit('on-change', data);
       };
 
       fileReader.onerror = function (error) {
@@ -123,7 +124,7 @@ export default {
         value: fileInfo
       };
 
-      this.$emit('onChange', data);
+      this.$emit('on-change', data);
     },
     selectFile() {
       this.$refs.fileInput.click();
@@ -135,7 +136,7 @@ export default {
         model: this.model,
         value: undefined
       };
-      this.$emit('onChange', data);
+      this.$emit('on-change', data);
     }
   }
 };
diff --git a/src/api/forms/components/controls/Locator.vue b/src/api/forms/components/controls/LocatorField.vue
similarity index 96%
rename from src/api/forms/components/controls/Locator.vue
rename to src/api/forms/components/controls/LocatorField.vue
index 371371015a..0137c28438 100644
--- a/src/api/forms/components/controls/Locator.vue
+++ b/src/api/forms/components/controls/LocatorField.vue
@@ -42,6 +42,7 @@ export default {
       required: true
     }
   },
+  emits: ['on-change'],
   methods: {
     handleItemSelection(item) {
       const data = {
@@ -49,7 +50,7 @@ export default {
         value: item.objectPath
       };
 
-      this.$emit('onChange', data);
+      this.$emit('on-change', data);
     }
   }
 };
diff --git a/src/api/forms/components/controls/NumberField.vue b/src/api/forms/components/controls/NumberField.vue
index 02cf8b92da..77a5dfbde8 100644
--- a/src/api/forms/components/controls/NumberField.vue
+++ b/src/api/forms/components/controls/NumberField.vue
@@ -46,6 +46,7 @@ export default {
       required: true
     }
   },
+  emits: ['on-change'],
   data() {
     return {
       field: this.model.value
@@ -61,7 +62,7 @@ export default {
         value: this.field
       };
 
-      this.$emit('onChange', data);
+      this.$emit('on-change', data);
     }
   }
 };
diff --git a/src/api/forms/components/controls/SelectField.vue b/src/api/forms/components/controls/SelectField.vue
index a170012f53..0b23278f7c 100644
--- a/src/api/forms/components/controls/SelectField.vue
+++ b/src/api/forms/components/controls/SelectField.vue
@@ -44,6 +44,7 @@ export default {
       required: true
     }
   },
+  emits: ['on-change'],
   data() {
     return {
       selected: this.model.value
@@ -56,7 +57,7 @@ export default {
         value: this.selected
       };
 
-      this.$emit('onChange', data);
+      this.$emit('on-change', data);
     }
   }
 };
diff --git a/src/api/forms/components/controls/TextAreaField.vue b/src/api/forms/components/controls/TextAreaField.vue
index 5fc5f8028e..35ba454f14 100644
--- a/src/api/forms/components/controls/TextAreaField.vue
+++ b/src/api/forms/components/controls/TextAreaField.vue
@@ -45,6 +45,7 @@ export default {
       required: true
     }
   },
+  emits: ['on-change'],
   data() {
     return {
       field: this.model.value
@@ -60,7 +61,7 @@ export default {
         value: this.field
       };
 
-      this.$emit('onChange', data);
+      this.$emit('on-change', data);
     }
   }
 };
diff --git a/src/api/forms/components/controls/TextField.vue b/src/api/forms/components/controls/TextField.vue
index 9a2d3460e2..7a3009d7df 100644
--- a/src/api/forms/components/controls/TextField.vue
+++ b/src/api/forms/components/controls/TextField.vue
@@ -45,6 +45,7 @@ export default {
       required: true
     }
   },
+  emits: ['on-change'],
   data() {
     return {
       field: this.model.value
@@ -60,7 +61,7 @@ export default {
         value: this.field
       };
 
-      this.$emit('onChange', data);
+      this.$emit('on-change', data);
     }
   }
 };
diff --git a/src/api/forms/toggle-check-box-mixin.js b/src/api/forms/toggle-check-box-mixin.js
index 48714f76b3..bb3429bcba 100644
--- a/src/api/forms/toggle-check-box-mixin.js
+++ b/src/api/forms/toggle-check-box-mixin.js
@@ -1,4 +1,5 @@
 export default {
+  emits: ['on-change'],
   data() {
     return {
       isChecked: false
@@ -13,7 +14,7 @@ export default {
         value: this.isChecked
       };
 
-      this.$emit('onChange', data);
+      this.$emit('on-change', data);
     }
   }
 };
diff --git a/src/api/menu/components/Menu.vue b/src/api/menu/components/MenuComponent.vue
similarity index 100%
rename from src/api/menu/components/Menu.vue
rename to src/api/menu/components/MenuComponent.vue
diff --git a/src/api/menu/menu.js b/src/api/menu/menu.js
index 215bc76644..dcff436648 100644
--- a/src/api/menu/menu.js
+++ b/src/api/menu/menu.js
@@ -23,7 +23,7 @@ import EventEmitter from 'EventEmitter';
 import mount from 'utils/mount';
 import { h } from 'vue';
 
-import MenuComponent from './components/Menu.vue';
+import MenuComponent from './components/MenuComponent.vue';
 import SuperMenuComponent from './components/SuperMenu.vue';
 
 export const MENU_PLACEMENT = {
diff --git a/src/api/overlays/components/OverlayComponent.vue b/src/api/overlays/components/OverlayComponent.vue
index 2cae0807d4..13b5c6b409 100644
--- a/src/api/overlays/components/OverlayComponent.vue
+++ b/src/api/overlays/components/OverlayComponent.vue
@@ -57,6 +57,7 @@
 <script>
 export default {
   inject: ['dismiss', 'element', 'buttons', 'dismissable'],
+  emits: ['destroy'],
   data: function () {
     return {
       focusIndex: -1
diff --git a/src/plugins/LADTable/components/LadRow.vue b/src/plugins/LADTable/components/LadRow.vue
index 0f0d25c459..1bc00008f6 100644
--- a/src/plugins/LADTable/components/LadRow.vue
+++ b/src/plugins/LADTable/components/LadRow.vue
@@ -79,6 +79,7 @@ export default {
       required: true
     }
   },
+  emits: ['row-context-click'],
   data() {
     return {
       datum: undefined,
@@ -232,7 +233,7 @@ export default {
       this.timestampKey = timeSystem.key;
     },
     updateViewContext() {
-      this.$emit('rowContextClick', {
+      this.$emit('row-context-click', {
         viewHistoricalData: true,
         viewDatumAction: true,
         getDatum: () => {
diff --git a/src/plugins/LADTable/components/LadTable.vue b/src/plugins/LADTable/components/LadTable.vue
index 12c589fbe4..a9980d3712 100644
--- a/src/plugins/LADTable/components/LadTable.vue
+++ b/src/plugins/LADTable/components/LadTable.vue
@@ -41,7 +41,7 @@
           :has-units="hasUnits"
           :is-stale="staleObjects.includes(ladRow.key)"
           :configuration="configuration"
-          @rowContextClick="updateViewContext"
+          @row-context-click="updateViewContext"
         />
       </tbody>
     </table>
@@ -49,10 +49,12 @@
 </template>
 
 <script>
-import Vue, { toRaw } from 'vue';
-import LadRow from './LadRow.vue';
+import { nextTick, toRaw } from 'vue';
+
 import stalenessMixin from '@/ui/mixins/staleness-mixin';
 
+import LadRow from './LadRow.vue';
+
 export default {
   components: {
     LadRow
@@ -127,7 +129,7 @@ export default {
     this.composition.on('remove', this.removeItem);
     this.composition.on('reorder', this.reorder);
     this.composition.load();
-    await Vue.nextTick();
+    await nextTick();
     this.viewActionsCollection = this.openmct.actions.getActionsCollection(
       this.objectPath,
       this.currentView
diff --git a/src/plugins/charts/bar/BarGraphPlot.vue b/src/plugins/charts/bar/BarGraphPlot.vue
index b77de35b02..2fe8b99cbf 100644
--- a/src/plugins/charts/bar/BarGraphPlot.vue
+++ b/src/plugins/charts/bar/BarGraphPlot.vue
@@ -67,6 +67,7 @@ export default {
       }
     }
   },
+  emits: ['subscribe', 'unsubscribe'],
   data() {
     return {
       isZoomed: false,
diff --git a/src/plugins/charts/bar/inspector/SeriesOptions.vue b/src/plugins/charts/bar/inspector/SeriesOptions.vue
index cb7449c86c..216adbebd7 100644
--- a/src/plugins/charts/bar/inspector/SeriesOptions.vue
+++ b/src/plugins/charts/bar/inspector/SeriesOptions.vue
@@ -43,7 +43,7 @@
           edit-title="Manually set the color for this bar graph series."
           view-title="The color for this bar graph series."
           short-label="Color"
-          @colorSet="setColor"
+          @color-set="setColor"
         />
       </li>
     </ul>
diff --git a/src/plugins/charts/scatter/ScatterPlotForm.vue b/src/plugins/charts/scatter/ScatterPlotForm.vue
index a776be661f..920c779c3f 100644
--- a/src/plugins/charts/scatter/ScatterPlotForm.vue
+++ b/src/plugins/charts/scatter/ScatterPlotForm.vue
@@ -84,6 +84,7 @@ export default {
       required: true
     }
   },
+  emits: ['on-change'],
   data() {
     return {
       rangeMax: this.model.value.rangeMax,
@@ -119,7 +120,7 @@ export default {
         this.model.validate(data);
       }
 
-      this.$emit('onChange', data);
+      this.$emit('on-change', data);
     }
   }
 };
diff --git a/src/plugins/charts/scatter/ScatterPlotWithUnderlay.vue b/src/plugins/charts/scatter/ScatterPlotWithUnderlay.vue
index 490c345b5f..8cea8828cc 100644
--- a/src/plugins/charts/scatter/ScatterPlotWithUnderlay.vue
+++ b/src/plugins/charts/scatter/ScatterPlotWithUnderlay.vue
@@ -71,6 +71,7 @@ export default {
       }
     }
   },
+  emits: ['subscribe', 'unsubscribe'],
   data() {
     return {
       isZoomed: false,
diff --git a/src/plugins/charts/scatter/inspector/PlotOptionsEdit.vue b/src/plugins/charts/scatter/inspector/PlotOptionsEdit.vue
index 1fb7d7cd02..15f1554d2f 100644
--- a/src/plugins/charts/scatter/inspector/PlotOptionsEdit.vue
+++ b/src/plugins/charts/scatter/inspector/PlotOptionsEdit.vue
@@ -59,7 +59,7 @@
         edit-title="Manually set the line and marker color for this plot."
         view-title="The line and marker color for this plot."
         short-label="Color"
-        @colorSet="setColor"
+        @color-set="setColor"
       />
     </ul>
   </div>
diff --git a/src/plugins/charts/scatter/plugin.js b/src/plugins/charts/scatter/plugin.js
index a802bb4b62..2c44664e13 100644
--- a/src/plugins/charts/scatter/plugin.js
+++ b/src/plugins/charts/scatter/plugin.js
@@ -118,7 +118,7 @@ export default function () {
                 onChange
               };
             },
-            template: `<scatter-plot-form :model="model" @onChange="onChange"></scatter-plot-form>`
+            template: `<scatter-plot-form :model="model" @on-change="onChange"></scatter-plot-form>`
           },
           {
             app: openmct.app,
diff --git a/src/plugins/clock/ClockViewProvider.js b/src/plugins/clock/ClockViewProvider.js
index 9f2da06968..93e6beb64c 100644
--- a/src/plugins/clock/ClockViewProvider.js
+++ b/src/plugins/clock/ClockViewProvider.js
@@ -22,7 +22,7 @@
 
 import mount from 'utils/mount';
 
-import Clock from './components/Clock.vue';
+import Clock from './components/ClockComponent.vue';
 
 export default function ClockViewProvider(openmct) {
   return {
diff --git a/src/plugins/clock/components/Clock.vue b/src/plugins/clock/components/ClockComponent.vue
similarity index 100%
rename from src/plugins/clock/components/Clock.vue
rename to src/plugins/clock/components/ClockComponent.vue
diff --git a/src/plugins/condition/components/ConditionCollection.vue b/src/plugins/condition/components/ConditionCollection.vue
index c52798aedb..92c54e0a18 100644
--- a/src/plugins/condition/components/ConditionCollection.vue
+++ b/src/plugins/condition/components/ConditionCollection.vue
@@ -66,12 +66,12 @@
           :is-editing="isEditing"
           :move-index="moveIndex"
           :is-dragging="isDragging"
-          @updateCondition="updateCondition"
-          @removeCondition="removeCondition"
-          @cloneCondition="cloneCondition"
-          @setMoveIndex="setMoveIndex"
-          @dragComplete="dragComplete"
-          @dropCondition="dropCondition"
+          @update-condition="updateCondition"
+          @remove-condition="removeCondition"
+          @clone-condition="cloneCondition"
+          @set-move-index="setMoveIndex"
+          @drag-complete="dragComplete"
+          @drop-condition="dropCondition"
         />
       </div>
     </div>
@@ -79,10 +79,11 @@
 </template>
 
 <script>
-import ConditionManager from '../ConditionManager';
-import Condition from './Condition.vue';
 import stalenessMixin from '@/ui/mixins/staleness-mixin';
 
+import ConditionManager from '../ConditionManager';
+import Condition from './ConditionItem.vue';
+
 export default {
   components: {
     Condition
@@ -102,6 +103,12 @@ export default {
       }
     }
   },
+  emits: [
+    'condition-set-result-updated',
+    'no-telemetry-objects',
+    'telemetry-updated',
+    'telemetry-staleness'
+  ],
   data() {
     return {
       expanded: true,
@@ -164,11 +171,11 @@ export default {
   methods: {
     handleConditionSetResultUpdated(data) {
       this.currentConditionId = data.conditionId;
-      this.$emit('conditionSetResultUpdated', data);
+      this.$emit('condition-set-result-updated', data);
     },
     emitNoTelemetryObjectEvent(data) {
       this.currentConditionId = '';
-      this.$emit('noTelemetryObjects');
+      this.$emit('no-telemetry-objects');
     },
     observeForChanges() {
       this.stopObservingForChanges = this.openmct.objects.observe(
@@ -225,7 +232,7 @@ export default {
       const keyString = this.openmct.objects.makeKeyString(domainObject.identifier);
 
       this.telemetryObjs.push(domainObject);
-      this.$emit('telemetryUpdated', this.telemetryObjs);
+      this.$emit('telemetry-updated', this.telemetryObjs);
 
       this.subscribeToStaleness(domainObject, (stalenessResponse) => {
         this.emitStaleness({
@@ -255,7 +262,7 @@ export default {
       }
     },
     emitStaleness(stalenessObject) {
-      this.$emit('telemetryStaleness', stalenessObject);
+      this.$emit('telemetry-staleness', stalenessObject);
     },
     addCondition() {
       this.conditionManager.addCondition();
diff --git a/src/plugins/condition/components/Condition.vue b/src/plugins/condition/components/ConditionItem.vue
similarity index 96%
rename from src/plugins/condition/components/Condition.vue
rename to src/plugins/condition/components/ConditionItem.vue
index e8f62bff14..381d7e4293 100644
--- a/src/plugins/condition/components/Condition.vue
+++ b/src/plugins/condition/components/ConditionItem.vue
@@ -189,7 +189,7 @@ import { v4 as uuid } from 'uuid';
 import { TRIGGER, TRIGGER_LABEL } from '@/plugins/condition/utils/constants';
 
 import ConditionDescription from './ConditionDescription.vue';
-import Criterion from './Criterion.vue';
+import Criterion from './CriterionItem.vue';
 
 export default {
   components: {
@@ -229,6 +229,14 @@ export default {
       default: 0
     }
   },
+  emits: [
+    'set-move-index',
+    'drag-complete',
+    'drop-condition',
+    'remove-condition',
+    'clone-condition',
+    'update-condition'
+  ],
   data() {
     return {
       currentCriteria: this.currentCriteria,
@@ -313,11 +321,11 @@ export default {
       event.dataTransfer.setData('dragging', event.target); // required for FF to initiate drag
       event.dataTransfer.effectAllowed = 'copyMove';
       event.dataTransfer.setDragImage(event.target.closest('.c-condition-h'), 0, 0);
-      this.$emit('setMoveIndex', this.conditionIndex);
+      this.$emit('set-move-index', this.conditionIndex);
     },
     dragEnd() {
       this.dragStarted = false;
-      this.$emit('dragComplete');
+      this.$emit('drag-complete');
     },
     dropCondition(event, targetIndex) {
       if (!this.isDragging) {
@@ -331,7 +339,7 @@ export default {
       if (this.isValidTarget(targetIndex)) {
         this.dragElement = undefined;
         this.draggingOver = false;
-        this.$emit('dropCondition', targetIndex);
+        this.$emit('drop-condition', targetIndex);
       }
     },
     dragEnter(event, targetIndex) {
@@ -359,10 +367,10 @@ export default {
     },
     destroy() {},
     removeCondition() {
-      this.$emit('removeCondition', this.condition.id);
+      this.$emit('remove-condition', this.condition.id);
     },
     cloneCondition() {
-      this.$emit('cloneCondition', {
+      this.$emit('clone-condition', {
         condition: this.condition,
         index: this.conditionIndex
       });
@@ -380,7 +388,7 @@ export default {
       this.persist();
     },
     persist() {
-      this.$emit('updateCondition', {
+      this.$emit('update-condition', {
         condition: this.condition
       });
     },
diff --git a/src/plugins/condition/components/ConditionSet.vue b/src/plugins/condition/components/ConditionSet.vue
index 6df8f851ab..184b53ebdb 100644
--- a/src/plugins/condition/components/ConditionSet.vue
+++ b/src/plugins/condition/components/ConditionSet.vue
@@ -39,25 +39,26 @@
         :is-editing="isEditing"
         :test-data="testData"
         :telemetry="telemetryObjs"
-        @updateTestData="updateTestData"
+        @update-test-data="updateTestData"
       />
       <ConditionCollection
         class="c-cs__conditions"
         :is-editing="isEditing"
         :test-data="testData"
-        @conditionSetResultUpdated="updateCurrentOutput"
-        @noTelemetryObjects="updateCurrentOutput('---')"
-        @telemetryUpdated="updateTelemetry"
-        @telemetryStaleness="handleStaleness"
+        @condition-set-result-updated="updateCurrentOutput"
+        @no-telemetry-objects="updateCurrentOutput('---')"
+        @telemetry-updated="updateTelemetry"
+        @telemetry-staleness="handleStaleness"
       />
     </div>
   </div>
 </template>
 
 <script>
+import stalenessMixin from '@/ui/mixins/staleness-mixin';
+
 import ConditionCollection from './ConditionCollection.vue';
 import TestData from './TestData.vue';
-import stalenessMixin from '@/ui/mixins/staleness-mixin';
 
 export default {
   components: {
diff --git a/src/plugins/condition/components/Criterion.vue b/src/plugins/condition/components/CriterionItem.vue
similarity index 99%
rename from src/plugins/condition/components/Criterion.vue
rename to src/plugins/condition/components/CriterionItem.vue
index 2050e10650..caebb455da 100644
--- a/src/plugins/condition/components/Criterion.vue
+++ b/src/plugins/condition/components/CriterionItem.vue
@@ -136,6 +136,7 @@ export default {
       required: true
     }
   },
+  emits: ['persist'],
   data() {
     return {
       telemetryMetadataOptions: [],
diff --git a/src/plugins/condition/components/TestData.vue b/src/plugins/condition/components/TestData.vue
index c76253412a..165e337929 100644
--- a/src/plugins/condition/components/TestData.vue
+++ b/src/plugins/condition/components/TestData.vue
@@ -127,6 +127,7 @@ export default {
       }
     }
   },
+  emits: ['update-test-data'],
   data() {
     return {
       expanded: true,
@@ -225,7 +226,7 @@ export default {
       this.updateTestData();
     },
     updateTestData() {
-      this.$emit('updateTestData', {
+      this.$emit('update-test-data', {
         applied: this.isApplied,
         conditionTestInputs: this.testInputs
       });
diff --git a/src/plugins/condition/components/inspector/StyleEditor.vue b/src/plugins/condition/components/inspector/StyleEditor.vue
index c2261891e1..377ddf4b0c 100644
--- a/src/plugins/condition/components/inspector/StyleEditor.vue
+++ b/src/plugins/condition/components/inspector/StyleEditor.vue
@@ -120,6 +120,7 @@ export default {
       required: true
     }
   },
+  emits: ['persist', 'save-style'],
   computed: {
     itemStyle() {
       return getStylesWithoutNoneValue(this.styleItem.style);
diff --git a/src/plugins/displayLayout/components/BoxView.vue b/src/plugins/displayLayout/components/BoxView.vue
index 81ed83bdff..b6cdf9c927 100644
--- a/src/plugins/displayLayout/components/BoxView.vue
+++ b/src/plugins/displayLayout/components/BoxView.vue
@@ -26,7 +26,7 @@
     :grid-size="gridSize"
     :is-editing="isEditing"
     @move="move"
-    @endMove="endMove"
+    @end-move="endMove"
   >
     <template #content>
       <div
@@ -78,6 +78,7 @@ export default {
       required: true
     }
   },
+  emits: ['move', 'end-move'],
   computed: {
     style() {
       if (this.itemStyle) {
@@ -127,7 +128,7 @@ export default {
       this.$emit('move', gridDelta);
     },
     endMove() {
-      this.$emit('endMove');
+      this.$emit('end-move');
     }
   }
 };
diff --git a/src/plugins/displayLayout/components/DisplayLayout.vue b/src/plugins/displayLayout/components/DisplayLayout.vue
index 16410c84d0..7527d57315 100644
--- a/src/plugins/displayLayout/components/DisplayLayout.vue
+++ b/src/plugins/displayLayout/components/DisplayLayout.vue
@@ -57,17 +57,17 @@
       :index="index"
       :multi-select="selectedLayoutItems.length > 1 || null"
       :is-editing="isEditing"
-      @contextClick="updateViewContext"
+      @context-click="updateViewContext"
       @move="move"
-      @endMove="endMove"
-      @endLineResize="endLineResize"
-      @formatChanged="updateTelemetryFormat"
+      @end-move="endMove"
+      @end-line-resize="endLineResize"
+      @format-changed="updateTelemetryFormat"
     />
     <edit-marquee
       v-if="showMarquee"
       :grid-size="gridSize"
       :selected-layout-items="selectedLayoutItems"
-      @endResize="endResize"
+      @end-resize="endResize"
     />
   </div>
 </template>
diff --git a/src/plugins/displayLayout/components/EditMarquee.vue b/src/plugins/displayLayout/components/EditMarquee.vue
index e0f28a52b9..68d7562510 100644
--- a/src/plugins/displayLayout/components/EditMarquee.vue
+++ b/src/plugins/displayLayout/components/EditMarquee.vue
@@ -58,6 +58,7 @@ export default {
       validator: (arr) => arr && arr.length === 2 && arr.every((el) => typeof el === 'number')
     }
   },
+  emits: ['end-resize'],
   data() {
     return {
       dragPosition: undefined
@@ -182,7 +183,7 @@ export default {
         y: marqueeEnd.y - marqueeStart.y
       };
 
-      this.$emit('endResize', scaleWidth, scaleHeight, marqueeStart, marqueeOffset);
+      this.$emit('end-resize', scaleWidth, scaleHeight, marqueeStart, marqueeOffset);
       this.dragPosition = undefined;
       this.initialPosition = undefined;
       this.marqueeStartPosition = undefined;
diff --git a/src/plugins/displayLayout/components/EllipseView.vue b/src/plugins/displayLayout/components/EllipseView.vue
index e03ff40fdc..3945949652 100644
--- a/src/plugins/displayLayout/components/EllipseView.vue
+++ b/src/plugins/displayLayout/components/EllipseView.vue
@@ -26,7 +26,7 @@
     :grid-size="gridSize"
     :is-editing="isEditing"
     @move="move"
-    @endMove="endMove"
+    @end-move="endMove"
   >
     <template #content>
       <div
@@ -78,6 +78,7 @@ export default {
       required: true
     }
   },
+  emits: ['move', 'end-move'],
   computed: {
     style() {
       if (this.itemStyle) {
@@ -127,7 +128,7 @@ export default {
       this.$emit('move', gridDelta);
     },
     endMove() {
-      this.$emit('endMove');
+      this.$emit('end-move');
     }
   }
 };
diff --git a/src/plugins/displayLayout/components/ImageView.vue b/src/plugins/displayLayout/components/ImageView.vue
index 50377081ab..0fffa96b76 100644
--- a/src/plugins/displayLayout/components/ImageView.vue
+++ b/src/plugins/displayLayout/components/ImageView.vue
@@ -26,7 +26,7 @@
     :grid-size="gridSize"
     :is-editing="isEditing"
     @move="move"
-    @endMove="endMove"
+    @end-move="endMove"
   >
     <template #content>
       <div class="c-image-view" :style="style"></div>
@@ -74,6 +74,7 @@ export default {
       required: true
     }
   },
+  emits: ['move', 'end-move'],
   computed: {
     style() {
       let backgroundImage = 'url(' + this.item.url + ')';
@@ -130,7 +131,7 @@ export default {
       this.$emit('move', gridDelta);
     },
     endMove() {
-      this.$emit('endMove');
+      this.$emit('end-move');
     }
   }
 };
diff --git a/src/plugins/displayLayout/components/LayoutFrame.vue b/src/plugins/displayLayout/components/LayoutFrame.vue
index db9bb98e2c..2898d79791 100644
--- a/src/plugins/displayLayout/components/LayoutFrame.vue
+++ b/src/plugins/displayLayout/components/LayoutFrame.vue
@@ -56,6 +56,7 @@ export default {
       required: true
     }
   },
+  emits: ['move', 'end-move'],
   computed: {
     size() {
       let { width, height } = this.item;
@@ -119,7 +120,7 @@ export default {
       document.body.removeEventListener('mousemove', this.continueMove);
       document.body.removeEventListener('mouseup', this.endMove);
       this.continueMove(event);
-      this.$emit('endMove');
+      this.$emit('end-move');
       this.dragPosition = undefined;
       this.initialPosition = undefined;
       this.delta = undefined;
diff --git a/src/plugins/displayLayout/components/LineView.vue b/src/plugins/displayLayout/components/LineView.vue
index 9659de3f9f..a0650b51f7 100644
--- a/src/plugins/displayLayout/components/LineView.vue
+++ b/src/plugins/displayLayout/components/LineView.vue
@@ -108,6 +108,7 @@ export default {
       required: true
     }
   },
+  emits: ['move', 'end-move', 'end-line-resize'],
   data() {
     return {
       dragPosition: undefined,
@@ -318,9 +319,9 @@ export default {
       document.body.removeEventListener('mouseup', this.endDrag);
       let { x, y, x2, y2 } = this.dragPosition;
       if (!this.dragging) {
-        this.$emit('endMove');
+        this.$emit('end-move');
       } else {
-        this.$emit('endLineResize', this.item, {
+        this.$emit('end-line-resize', this.item, {
           x,
           y,
           x2,
diff --git a/src/plugins/displayLayout/components/SubobjectView.vue b/src/plugins/displayLayout/components/SubobjectView.vue
index 689a1ff5b7..467aaa8cbe 100644
--- a/src/plugins/displayLayout/components/SubobjectView.vue
+++ b/src/plugins/displayLayout/components/SubobjectView.vue
@@ -25,7 +25,7 @@
     :grid-size="gridSize"
     :is-editing="isEditing"
     @move="move"
-    @endMove="endMove"
+    @end-move="endMove"
   >
     <template #content>
       <ObjectFrame
@@ -103,6 +103,7 @@ export default {
       required: true
     }
   },
+  emits: ['move', 'end-move'],
   data() {
     return {
       domainObject: undefined,
@@ -174,7 +175,7 @@ export default {
       this.$emit('move', gridDelta);
     },
     endMove() {
-      this.$emit('endMove');
+      this.$emit('end-move');
     }
   }
 };
diff --git a/src/plugins/displayLayout/components/TelemetryView.vue b/src/plugins/displayLayout/components/TelemetryView.vue
index 6b8e4680ae..42ed855ead 100644
--- a/src/plugins/displayLayout/components/TelemetryView.vue
+++ b/src/plugins/displayLayout/components/TelemetryView.vue
@@ -26,7 +26,7 @@
     :grid-size="gridSize"
     :is-editing="isEditing"
     @move="move"
-    @endMove="endMove"
+    @end-move="endMove"
   >
     <template #content>
       <div
@@ -126,6 +126,7 @@ export default {
       required: true
     }
   },
+  emits: ['move', 'end-move', 'format-changed', 'context-click'],
   data() {
     return {
       currentObjectPath: undefined,
@@ -344,10 +345,10 @@ export default {
     updateTelemetryFormat(format) {
       this.customStringformatter.setFormat(format);
 
-      this.$emit('formatChanged', this.item, format);
+      this.$emit('format-changed', this.item, format);
     },
     updateViewContext() {
-      this.$emit('contextClick', {
+      this.$emit('context-click', {
         viewHistoricalData: true,
         formattedValueForCopy: this.formattedValueForCopy
       });
@@ -400,7 +401,7 @@ export default {
       this.$emit('move', gridDelta);
     },
     endMove() {
-      this.$emit('endMove');
+      this.$emit('end-move');
     }
   }
 };
diff --git a/src/plugins/displayLayout/components/TextView.vue b/src/plugins/displayLayout/components/TextView.vue
index 37a68a093a..87a0228dfd 100644
--- a/src/plugins/displayLayout/components/TextView.vue
+++ b/src/plugins/displayLayout/components/TextView.vue
@@ -26,7 +26,7 @@
     :grid-size="gridSize"
     :is-editing="isEditing"
     @move="move"
-    @endMove="endMove"
+    @end-move="endMove"
   >
     <template #content>
       <div
@@ -86,6 +86,7 @@ export default {
       required: true
     }
   },
+  emits: ['move', 'end-move'],
   computed: {
     style() {
       let size;
@@ -139,7 +140,7 @@ export default {
       this.$emit('move', gridDelta);
     },
     endMove() {
-      this.$emit('endMove');
+      this.$emit('end-move');
     }
   }
 };
diff --git a/src/plugins/faultManagement/FaultManagementListHeader.vue b/src/plugins/faultManagement/FaultManagementListHeader.vue
index 9b84900025..06efff7428 100644
--- a/src/plugins/faultManagement/FaultManagementListHeader.vue
+++ b/src/plugins/faultManagement/FaultManagementListHeader.vue
@@ -43,7 +43,7 @@
           class="c-fault-mgmt-viewButton"
           title="Sort By"
           :model="model"
-          @onChange="onChange"
+          @on-change="onChange"
         />
       </div>
     </div>
@@ -74,6 +74,7 @@ export default {
       }
     }
   },
+  emits: ['sort-changed', 'select-all'],
   data() {
     return {
       model: {}
@@ -93,10 +94,10 @@ export default {
   },
   methods: {
     onChange(data) {
-      this.$emit('sortChanged', data);
+      this.$emit('sort-changed', data);
     },
     selectAll(e) {
-      this.$emit('selectAll', e.target.checked);
+      this.$emit('select-all', e.target.checked);
     }
   }
 };
diff --git a/src/plugins/faultManagement/FaultManagementListItem.vue b/src/plugins/faultManagement/FaultManagementListItem.vue
index 21cdce53aa..96997f2224 100644
--- a/src/plugins/faultManagement/FaultManagementListItem.vue
+++ b/src/plugins/faultManagement/FaultManagementListItem.vue
@@ -90,6 +90,7 @@ export default {
       }
     }
   },
+  emits: ['acknowledge-selected', 'shelve-selected', 'toggle-selected'],
   computed: {
     classesFromState() {
       const exclusiveStates = [
@@ -169,7 +170,7 @@ export default {
           name: 'Acknowledge',
           description: '',
           onItemClicked: (e) => {
-            this.$emit('acknowledgeSelected', [this.fault]);
+            this.$emit('acknowledge-selected', [this.fault]);
           }
         },
         {
@@ -177,7 +178,7 @@ export default {
           name: 'Shelve',
           description: '',
           onItemClicked: () => {
-            this.$emit('shelveSelected', [this.fault], { shelved: true });
+            this.$emit('shelve-selected', [this.fault], { shelved: true });
           }
         },
         {
@@ -186,7 +187,7 @@ export default {
           name: 'Unshelve',
           description: '',
           onItemClicked: () => {
-            this.$emit('shelveSelected', [this.fault], { shelved: false });
+            this.$emit('shelve-selected', [this.fault], { shelved: false });
           }
         }
       ];
@@ -199,7 +200,7 @@ export default {
         selected: event.target.checked
       };
 
-      this.$emit('toggleSelected', faultData);
+      this.$emit('toggle-selected', faultData);
     }
   }
 };
diff --git a/src/plugins/faultManagement/FaultManagementListView.vue b/src/plugins/faultManagement/FaultManagementListView.vue
index 2e217e828a..9b2ea3e17c 100644
--- a/src/plugins/faultManagement/FaultManagementListView.vue
+++ b/src/plugins/faultManagement/FaultManagementListView.vue
@@ -24,15 +24,15 @@
   <div class="c-faults-list-view">
     <FaultManagementSearch
       :search-term="searchTerm"
-      @filterChanged="updateFilter"
-      @updateSearchTerm="updateSearchTerm"
+      @filter-changed="updateFilter"
+      @update-search-term="updateSearchTerm"
     />
 
     <FaultManagementToolbar
       v-if="showToolbar"
       :selected-faults="selectedFaults"
-      @acknowledgeSelected="toggleAcknowledgeSelected"
-      @shelveSelected="toggleShelveSelected"
+      @acknowledge-selected="toggleAcknowledgeSelected"
+      @shelve-selected="toggleShelveSelected"
     />
 
     <div class="c-faults-list-view-header-item-container-wrapper">
@@ -41,8 +41,8 @@
           class="header"
           :selected-faults="Object.values(selectedFaults)"
           :total-faults-count="filteredFaultsList.length"
-          @selectAll="selectAll"
-          @sortChanged="sortChanged"
+          @select-all="selectAll"
+          @sort-changed="sortChanged"
         />
 
         <div class="c-faults-list-view-item-body">
@@ -52,9 +52,9 @@
               :key="fault.id"
               :fault="fault"
               :is-selected="isSelected(fault)"
-              @toggleSelected="toggleSelected"
-              @acknowledgeSelected="toggleAcknowledgeSelected"
-              @shelveSelected="toggleShelveSelected"
+              @toggle-selected="toggleSelected"
+              @acknowledge-selected="toggleAcknowledgeSelected"
+              @shelve-selected="toggleShelveSelected"
             />
           </template>
         </div>
diff --git a/src/plugins/faultManagement/FaultManagementSearch.vue b/src/plugins/faultManagement/FaultManagementSearch.vue
index 13221819b9..b9830fadc7 100644
--- a/src/plugins/faultManagement/FaultManagementSearch.vue
+++ b/src/plugins/faultManagement/FaultManagementSearch.vue
@@ -33,14 +33,14 @@
       class="c-fault-mgmt-viewButton"
       title="View Filter"
       :model="model"
-      @onChange="onChange"
+      @on-change="onChange"
     />
   </div>
 </template>
 
 <script>
 import SelectField from '@/api/forms/components/controls/SelectField.vue';
-import Search from '@/ui/components/Search.vue';
+import Search from '@/ui/components/SearchComponent.vue';
 
 import { FILTER_ITEMS } from './constants';
 
@@ -56,6 +56,7 @@ export default {
       default: ''
     }
   },
+  emits: ['filter-changed', 'update-search-term'],
   data() {
     return {
       items: []
@@ -79,10 +80,10 @@ export default {
   },
   methods: {
     onChange(data) {
-      this.$emit('filterChanged', data);
+      this.$emit('filter-changed', data);
     },
     updateSearchTerm(searchTerm) {
-      this.$emit('updateSearchTerm', searchTerm);
+      this.$emit('update-search-term', searchTerm);
     }
   }
 };
diff --git a/src/plugins/faultManagement/FaultManagementToolbar.vue b/src/plugins/faultManagement/FaultManagementToolbar.vue
index 68cfd58b27..cadf794803 100644
--- a/src/plugins/faultManagement/FaultManagementToolbar.vue
+++ b/src/plugins/faultManagement/FaultManagementToolbar.vue
@@ -53,6 +53,7 @@ export default {
       }
     }
   },
+  emits: ['acknowledge-selected', 'shelve-selected'],
   data() {
     return {
       disableAcknowledge: true,
@@ -82,10 +83,10 @@ export default {
   },
   methods: {
     acknowledgeSelected() {
-      this.$emit('acknowledgeSelected');
+      this.$emit('acknowledge-selected');
     },
     shelveSelected() {
-      this.$emit('shelveSelected');
+      this.$emit('shelve-selected');
     }
   }
 };
diff --git a/src/plugins/filters/components/FilterField.vue b/src/plugins/filters/components/FilterField.vue
index 4644307391..010d873bc4 100644
--- a/src/plugins/filters/components/FilterField.vue
+++ b/src/plugins/filters/components/FilterField.vue
@@ -125,6 +125,12 @@ export default {
       }
     }
   },
+  emits: [
+    'filter-text-value-changed',
+    'filter-selected',
+    'clear-filters',
+    'filter-single-selected'
+  ],
   data() {
     return {
       isEditing: this.openmct.editor.isEditing()
@@ -151,16 +157,16 @@ export default {
       return this.persistedFilters && this.persistedFilters[comparator];
     },
     updateFilterValueFromString(event, comparator) {
-      this.$emit('filterTextValueChanged', this.filterField.key, comparator, event.target.value);
+      this.$emit('filter-text-value-changed', this.filterField.key, comparator, event.target.value);
     },
     updateFilterValueFromCheckbox(event, comparator, value) {
-      this.$emit('filterSelected', this.filterField.key, comparator, value, event.target.checked);
+      this.$emit('filter-selected', this.filterField.key, comparator, value, event.target.checked);
     },
     updateFilterValueFromDropdown(event, comparator, value) {
       if (value === 'NONE') {
-        this.$emit('clearFilters', this.filterField.key);
+        this.$emit('clear-filters', this.filterField.key);
       } else {
-        this.$emit('filterSingleSelected', this.filterField.key, comparator, value);
+        this.$emit('filter-single-selected', this.filterField.key, comparator, value);
       }
     },
     getFilterLabels(filter) {
diff --git a/src/plugins/filters/components/FilterObject.vue b/src/plugins/filters/components/FilterObject.vue
index 9d9a5f72c8..d6d8b2e42d 100644
--- a/src/plugins/filters/components/FilterObject.vue
+++ b/src/plugins/filters/components/FilterObject.vue
@@ -64,10 +64,10 @@
           :use-global="persistedFilters.useGlobal"
           :persisted-filters="updatedFilters[metadatum.key]"
           label="Specific Filter"
-          @filterSelected="updateMultipleFiltersWithSelectedValue"
-          @filterTextValueChanged="updateFiltersWithTextValue"
-          @filterSingleSelected="updateSingleSelection"
-          @clearFilters="clearFilters"
+          @filter-selected="updateMultipleFiltersWithSelectedValue"
+          @filter-text-value-changed="updateFiltersWithTextValue"
+          @filter-single-selected="updateSingleSelection"
+          @clear-filters="clearFilters"
         />
       </ul>
     </div>
@@ -98,6 +98,7 @@ export default {
       }
     }
   },
+  emits: ['update-filters'],
   data() {
     return {
       expanded: false,
@@ -161,11 +162,11 @@ export default {
         this.updatedFilters[key][comparator] = [valueName];
       }
 
-      this.$emit('updateFilters', this.keyString, this.updatedFilters);
+      this.$emit('update-filters', this.keyString, this.updatedFilters);
     },
     clearFilters(key) {
       this.updatedFilters[key] = {};
-      this.$emit('updateFilters', this.keyString, this.updatedFilters);
+      this.$emit('update-filters', this.keyString, this.updatedFilters);
     },
     updateFiltersWithTextValue(key, comparator, value) {
       if (value.trim() === '') {
@@ -174,15 +175,15 @@ export default {
         this.updatedFilters[key][comparator] = value;
       }
 
-      this.$emit('updateFilters', this.keyString, this.updatedFilters);
+      this.$emit('update-filters', this.keyString, this.updatedFilters);
     },
     updateSingleSelection(key, comparator, value) {
       this.updatedFilters[key][comparator] = [value];
-      this.$emit('updateFilters', this.keyString, this.updatedFilters);
+      this.$emit('update-filters', this.keyString, this.updatedFilters);
     },
     useGlobalFilter(checked) {
       this.updatedFilters.useGlobal = checked;
-      this.$emit('updateFilters', this.keyString, this.updatedFilters, checked);
+      this.$emit('update-filters', this.keyString, this.updatedFilters, checked);
     },
     toggleIsEditing(isEditing) {
       this.isEditing = isEditing;
diff --git a/src/plugins/filters/components/FiltersView.vue b/src/plugins/filters/components/FiltersView.vue
index 256a34fba2..96eb777430 100644
--- a/src/plugins/filters/components/FiltersView.vue
+++ b/src/plugins/filters/components/FiltersView.vue
@@ -28,14 +28,14 @@
     <global-filters
       :global-filters="globalFilters"
       :global-metadata="globalMetadata"
-      @persistGlobalFilters="persistGlobalFilters"
+      @persist-global-filters="persistGlobalFilters"
     />
     <filter-object
       v-for="(child, key) in children"
       :key="key"
       :filter-object="child"
       :persisted-filters="persistedFilters[key]"
-      @updateFilters="persistFilters"
+      @update-filters="persistFilters"
     />
   </ul>
 </template>
diff --git a/src/plugins/filters/components/GlobalFilters.vue b/src/plugins/filters/components/GlobalFilters.vue
index 23c694b1f9..57f2830fe6 100644
--- a/src/plugins/filters/components/GlobalFilters.vue
+++ b/src/plugins/filters/components/GlobalFilters.vue
@@ -44,10 +44,10 @@
         :filter-field="metadatum"
         :persisted-filters="updatedFilters[metadatum.key]"
         label="Global Filter"
-        @filterSelected="updateFiltersWithSelectedValue"
-        @filterTextValueChanged="updateFiltersWithTextValue"
-        @filterSingleSelected="updateSingleSelection"
-        @clearFilters="clearFilters"
+        @filter-selected="updateFiltersWithSelectedValue"
+        @filter-text-value-changed="updateFiltersWithTextValue"
+        @filter-single-selected="updateSingleSelection"
+        @clear-filters="clearFilters"
       />
     </ul>
   </li>
@@ -73,6 +73,7 @@ export default {
       }
     }
   },
+  emits: ['persist-global-filters'],
   data() {
     return {
       expanded: false,
@@ -102,7 +103,7 @@ export default {
     },
     clearFilters(key) {
       this.updatedFilters[key] = {};
-      this.$emit('persistGlobalFilters', key, this.updatedFilters);
+      this.$emit('persist-global-filters', key, this.updatedFilters);
     },
     updateFiltersWithSelectedValue(key, comparator, valueName, value) {
       let filterValue = this.updatedFilters[key];
@@ -121,11 +122,11 @@ export default {
         this.updatedFilters[key][comparator] = [valueName];
       }
 
-      this.$emit('persistGlobalFilters', key, this.updatedFilters);
+      this.$emit('persist-global-filters', key, this.updatedFilters);
     },
     updateSingleSelection(key, comparator, value) {
       this.updatedFilters[key][comparator] = [value];
-      this.$emit('persistGlobalFilters', key, this.updatedFilters);
+      this.$emit('persist-global-filters', key, this.updatedFilters);
     },
     updateFiltersWithTextValue(key, comparator, value) {
       if (value.trim() === '') {
@@ -134,7 +135,7 @@ export default {
         this.updatedFilters[key][comparator] = value;
       }
 
-      this.$emit('persistGlobalFilters', key, this.updatedFilters);
+      this.$emit('persist-global-filters', key, this.updatedFilters);
     }
   }
 };
diff --git a/src/plugins/flexibleLayout/components/Container.vue b/src/plugins/flexibleLayout/components/ContainerComponent.vue
similarity index 98%
rename from src/plugins/flexibleLayout/components/Container.vue
rename to src/plugins/flexibleLayout/components/ContainerComponent.vue
index e2de07a724..15ae0823c7 100644
--- a/src/plugins/flexibleLayout/components/Container.vue
+++ b/src/plugins/flexibleLayout/components/ContainerComponent.vue
@@ -76,7 +76,7 @@
 
 <script>
 import DropHint from './DropHint.vue';
-import FrameComponent from './Frame.vue';
+import FrameComponent from './FrameComponent.vue';
 import ResizeHandle from './ResizeHandle.vue';
 
 const MIN_FRAME_SIZE = 5;
@@ -111,6 +111,7 @@ export default {
       required: true
     }
   },
+  emits: ['new-frame', 'move-frame', 'persist'],
   computed: {
     frames() {
       return this.container.frames;
diff --git a/src/plugins/flexibleLayout/components/DropHint.vue b/src/plugins/flexibleLayout/components/DropHint.vue
index 0cd25d6df0..764ceae30a 100644
--- a/src/plugins/flexibleLayout/components/DropHint.vue
+++ b/src/plugins/flexibleLayout/components/DropHint.vue
@@ -45,6 +45,7 @@ export default {
       required: true
     }
   },
+  emits: ['object-drop-to'],
   data() {
     return {
       isMouseOver: false,
diff --git a/src/plugins/flexibleLayout/components/FlexibleLayout.vue b/src/plugins/flexibleLayout/components/FlexibleLayout.vue
index 938b091f69..6e92ef00e7 100644
--- a/src/plugins/flexibleLayout/components/FlexibleLayout.vue
+++ b/src/plugins/flexibleLayout/components/FlexibleLayout.vue
@@ -81,7 +81,7 @@
 <script>
 import Container from '../utils/container';
 import Frame from '../utils/frame';
-import ContainerComponent from './Container.vue';
+import ContainerComponent from './ContainerComponent.vue';
 import DropHint from './DropHint.vue';
 import ResizeHandle from './ResizeHandle.vue';
 
diff --git a/src/plugins/flexibleLayout/components/Frame.vue b/src/plugins/flexibleLayout/components/FrameComponent.vue
similarity index 100%
rename from src/plugins/flexibleLayout/components/Frame.vue
rename to src/plugins/flexibleLayout/components/FrameComponent.vue
diff --git a/src/plugins/flexibleLayout/components/ResizeHandle.vue b/src/plugins/flexibleLayout/components/ResizeHandle.vue
index c961933833..ea9c9aff8e 100644
--- a/src/plugins/flexibleLayout/components/ResizeHandle.vue
+++ b/src/plugins/flexibleLayout/components/ResizeHandle.vue
@@ -45,6 +45,7 @@ export default {
       default: false
     }
   },
+  emits: ['move', 'init-move', 'end-move'],
   data() {
     return {
       initialPos: 0,
diff --git a/src/plugins/gauge/GaugePlugin.js b/src/plugins/gauge/GaugePlugin.js
index 0baedd45f0..af9777f5a6 100644
--- a/src/plugins/gauge/GaugePlugin.js
+++ b/src/plugins/gauge/GaugePlugin.js
@@ -187,7 +187,7 @@ export default function () {
                 onChange
               };
             },
-            template: `<GaugeFormController :model="model" @onChange="onChange"></GaugeFormController>`
+            template: `<GaugeFormController :model="model" @on-change="onChange"></GaugeFormController>`
           },
           {
             app: openmct.app,
diff --git a/src/plugins/gauge/GaugeViewProvider.js b/src/plugins/gauge/GaugeViewProvider.js
index c224923387..d2103b41a6 100644
--- a/src/plugins/gauge/GaugeViewProvider.js
+++ b/src/plugins/gauge/GaugeViewProvider.js
@@ -22,7 +22,7 @@
 
 import mount from 'utils/mount';
 
-import GaugeComponent from './components/Gauge.vue';
+import GaugeComponent from './components/GaugeComponent.vue';
 
 export default function GaugeViewProvider(openmct) {
   return {
diff --git a/src/plugins/gauge/components/Gauge.vue b/src/plugins/gauge/components/GaugeComponent.vue
similarity index 99%
rename from src/plugins/gauge/components/Gauge.vue
rename to src/plugins/gauge/components/GaugeComponent.vue
index 369082ab0c..3f4bec4ff8 100644
--- a/src/plugins/gauge/components/Gauge.vue
+++ b/src/plugins/gauge/components/GaugeComponent.vue
@@ -338,7 +338,6 @@ const LIMIT_PADDING_IN_PERCENT = 10;
 const DEFAULT_CURRENT_VALUE = '--';
 
 export default {
-  name: 'Gauge',
   mixins: [stalenessMixin, tooltipHelpers],
   inject: ['openmct', 'domainObject', 'composition'],
   data() {
diff --git a/src/plugins/gauge/components/GaugeFormController.vue b/src/plugins/gauge/components/GaugeFormController.vue
index ac2e6babf2..700480a992 100644
--- a/src/plugins/gauge/components/GaugeFormController.vue
+++ b/src/plugins/gauge/components/GaugeFormController.vue
@@ -97,6 +97,7 @@ export default {
       required: true
     }
   },
+  emits: ['on-change'],
   data() {
     this.changes = {};
 
@@ -140,7 +141,7 @@ export default {
         });
       }
 
-      this.$emit('onChange', data);
+      this.$emit('on-change', data);
     },
     toggleUseTelemetryLimits() {
       this.isUseTelemetryLimits = !this.isUseTelemetryLimits;
@@ -150,7 +151,7 @@ export default {
         },
         value: this.isUseTelemetryLimits
       };
-      this.$emit('onChange', data);
+      this.$emit('on-change', data);
     }
   }
 };
diff --git a/src/plugins/imagery/components/Compass/Compass.vue b/src/plugins/imagery/components/Compass/CompassComponent.vue
similarity index 98%
rename from src/plugins/imagery/components/Compass/Compass.vue
rename to src/plugins/imagery/components/Compass/CompassComponent.vue
index d65477333d..9fb14b0d3b 100644
--- a/src/plugins/imagery/components/Compass/Compass.vue
+++ b/src/plugins/imagery/components/Compass/CompassComponent.vue
@@ -66,6 +66,7 @@ export default {
       required: true
     }
   },
+  emits: ['toggle-lock-compass'],
   computed: {
     hasGimble() {
       return this.cameraAzimuth !== undefined;
diff --git a/src/plugins/imagery/components/Compass/pluginSpec.js b/src/plugins/imagery/components/Compass/pluginSpec.js
index 2dfd7c60b0..d9e285cac3 100644
--- a/src/plugins/imagery/components/Compass/pluginSpec.js
+++ b/src/plugins/imagery/components/Compass/pluginSpec.js
@@ -21,7 +21,7 @@
  *****************************************************************************/
 import Vue from 'vue';
 
-import Compass from './Compass.vue';
+import Compass from './CompassComponent.vue';
 
 const COMPASS_ROSE_CLASS = '.c-direction-rose';
 const COMPASS_HUD_CLASS = '.c-compass__hud';
diff --git a/src/plugins/imagery/components/FilterSettings.vue b/src/plugins/imagery/components/FilterSettings.vue
index a96e1484b3..56b1fb3959 100644
--- a/src/plugins/imagery/components/FilterSettings.vue
+++ b/src/plugins/imagery/components/FilterSettings.vue
@@ -63,6 +63,7 @@
 <script>
 export default {
   inject: ['openmct'],
+  emits: ['filter-changed'],
   data() {
     return {
       filters: {
@@ -79,7 +80,7 @@ export default {
       }
     },
     notifyFiltersChanged() {
-      this.$emit('filterChanged', this.filters);
+      this.$emit('filter-changed', this.filters);
     },
     resetFilters() {
       this.filters = {
diff --git a/src/plugins/imagery/components/ImageControls.vue b/src/plugins/imagery/components/ImageControls.vue
index 33e0e9bb3d..592635310d 100644
--- a/src/plugins/imagery/components/ImageControls.vue
+++ b/src/plugins/imagery/components/ImageControls.vue
@@ -27,21 +27,21 @@
     aria-label="Image controls"
   >
     <imagery-view-menu-switcher :icon-class="'icon-brightness'" :title="'Brightness and contrast'">
-      <filter-settings @filterChanged="updateFilterValues" />
+      <filter-settings @filter-changed="updateFilterValues" />
     </imagery-view-menu-switcher>
 
     <imagery-view-menu-switcher v-if="layers.length" :icon-class="'icon-layers'" :title="'Layers'">
-      <layer-settings :layers="layers" @toggleLayerVisibility="toggleLayerVisibility" />
+      <layer-settings :layers="layers" @toggle-layer-visibility="toggleLayerVisibility" />
     </imagery-view-menu-switcher>
 
     <zoom-settings
       class="--hide-if-less-than-220"
       :pan-zoom-locked="panZoomLocked"
       :zoom-factor="zoomFactor"
-      @zoomOut="zoomOut"
-      @zoomIn="zoomIn"
-      @toggleZoomLock="toggleZoomLock"
-      @handleResetImage="handleResetImage"
+      @zoom-out="zoomOut"
+      @zoom-in="zoomIn"
+      @toggle-zoom-lock="toggleZoomLock"
+      @handle-reset-image="handleResetImage"
     />
 
     <imagery-view-menu-switcher
@@ -54,10 +54,10 @@
         :class="'c-control-menu c-menu--has-close-btn'"
         :zoom-factor="zoomFactor"
         :is-menu="true"
-        @zoomOut="zoomOut"
-        @zoomIn="zoomIn"
-        @toggleZoomLock="toggleZoomLock"
-        @handleResetImage="handleResetImage"
+        @zoom-out="zoomOut"
+        @zoom-in="zoomIn"
+        @toggle-zoom-lock="toggleZoomLock"
+        @handle-reset-image="handleResetImage"
       />
     </imagery-view-menu-switcher>
   </div>
@@ -105,6 +105,14 @@ export default {
       }
     }
   },
+  emits: [
+    'cursors-updated',
+    'reset-image',
+    'pan-zoom-updated',
+    'filters-updated',
+    'start-pan',
+    'toggle-layer-visibility'
+  ],
   data() {
     return {
       altPressed: false,
@@ -141,7 +149,7 @@ export default {
       }
     },
     cursorStates(states) {
-      this.$emit('cursorsUpdated', states);
+      this.$emit('cursors-updated', states);
     }
   },
   mounted() {
@@ -155,16 +163,16 @@ export default {
   },
   methods: {
     handleResetImage() {
-      this.$emit('resetImage');
+      this.$emit('reset-image');
     },
     handleUpdatePanZoom(options) {
-      this.$emit('panZoomUpdated', options);
+      this.$emit('pan-zoom-updated', options);
     },
     toggleZoomLock() {
       this.panZoomLocked = !this.panZoomLocked;
     },
     notifyFiltersChanged() {
-      this.$emit('filtersUpdated', this.filters);
+      this.$emit('filters-updated', this.filters);
     },
     handleResetFilters() {
       this.filters = { ...DEFAULT_FILTER_VALUES };
@@ -251,7 +259,7 @@ export default {
     // attached to onClick listener in ImageryView
     handlePanZoomClick(e) {
       if (this.altPressed) {
-        return this.$emit('startPan', e);
+        return this.$emit('start-pan', e);
       }
 
       if (!(this.metaPressed && e.button === 0)) {
@@ -262,7 +270,7 @@ export default {
       this.zoomImage(newScaleFactor, e.clientX, e.clientY);
     },
     toggleLayerVisibility(index) {
-      this.$emit('toggleLayerVisibility', index);
+      this.$emit('toggle-layer-visibility', index);
     },
     updateFilterValues(filters) {
       this.filters = filters;
diff --git a/src/plugins/imagery/components/ImageThumbnail.vue b/src/plugins/imagery/components/ImageThumbnail.vue
index a082aee4b8..73f0f176cd 100644
--- a/src/plugins/imagery/components/ImageThumbnail.vue
+++ b/src/plugins/imagery/components/ImageThumbnail.vue
@@ -85,6 +85,7 @@ export default {
       }
     }
   },
+  emits: ['click'],
   data() {
     return {
       imgWidth: 0,
diff --git a/src/plugins/imagery/components/ImageryView.vue b/src/plugins/imagery/components/ImageryView.vue
index 182706166b..80bdd2b78e 100644
--- a/src/plugins/imagery/components/ImageryView.vue
+++ b/src/plugins/imagery/components/ImageryView.vue
@@ -39,12 +39,12 @@
         :zoom-factor="zoomFactor"
         :image-url="imageUrl"
         :layers="layers"
-        @resetImage="resetImage"
-        @panZoomUpdated="handlePanZoomUpdate"
-        @filtersUpdated="setFilters"
-        @cursorsUpdated="setCursorStates"
-        @startPan="startPan"
-        @toggleLayerVisibility="toggleLayerVisibility"
+        @reset-image="resetImage"
+        @pan-zoom-updated="handlePanZoomUpdate"
+        @filters-updated="setFilters"
+        @cursors-updated="setCursorStates"
+        @start-pan="startPan"
+        @toggle-layer-visibility="toggleLayerVisibility"
       />
       <div ref="imageBG" class="c-imagery__main-image__bg" @click="expand">
         <div v-if="zoomFactor > 1" class="c-imagery__hints">
@@ -202,13 +202,13 @@
 <script>
 import _ from 'lodash';
 import moment from 'moment';
-import Vue from 'vue';
+import { nextTick } from 'vue';
 
 import { TIME_CONTEXT_EVENTS } from '../../../api/time/constants';
 import imageryData from '../../imagery/mixins/imageryData';
 import eventHelpers from '../lib/eventHelpers';
 import AnnotationsCanvas from './AnnotationsCanvas.vue';
-import Compass from './Compass/Compass.vue';
+import Compass from './Compass/CompassComponent.vue';
 import ImageControls from './ImageControls.vue';
 import ImageThumbnail from './ImageThumbnail.vue';
 import RelatedTelemetry from './RelatedTelemetry/RelatedTelemetry';
@@ -264,6 +264,7 @@ export default {
       }
     }
   },
+  emits: ['update:focused-image-timestamp'],
   data() {
     let timeSystem = this.openmct.time.getTimeSystem();
     this.metadata = {};
@@ -1081,7 +1082,7 @@ export default {
         return;
       }
 
-      await Vue.nextTick();
+      await nextTick();
       if (this.$refs.thumbsWrapper) {
         this.$refs.thumbsWrapper.scrollLeft = scrollWidth;
       }
@@ -1105,7 +1106,7 @@ export default {
       this.setPreviousFocusedImage(index);
     },
     setPreviousFocusedImage(index) {
-      this.$emit('update:focusedImageTimestamp', undefined);
+      this.$emit('update:focused-image-timestamp', undefined);
       this.previousFocusedImage = this.imageHistory[index]
         ? JSON.parse(JSON.stringify(this.imageHistory[index]))
         : undefined;
diff --git a/src/plugins/imagery/components/LayerSettings.vue b/src/plugins/imagery/components/LayerSettings.vue
index a0b5304e7d..d5cf1b5005 100644
--- a/src/plugins/imagery/components/LayerSettings.vue
+++ b/src/plugins/imagery/components/LayerSettings.vue
@@ -54,6 +54,7 @@ export default {
       }
     }
   },
+  emits: ['toggle-layer-visibility'],
   methods: {
     handleClose(e) {
       const closeButton = e.target.classList.contains('c-switcher-menu__close-button');
@@ -62,7 +63,7 @@ export default {
       }
     },
     toggleLayerVisibility(index) {
-      this.$emit('toggleLayerVisibility', index);
+      this.$emit('toggle-layer-visibility', index);
     }
   }
 };
diff --git a/src/plugins/imagery/components/ZoomSettings.vue b/src/plugins/imagery/components/ZoomSettings.vue
index 858a4c148e..cf0b444c36 100644
--- a/src/plugins/imagery/components/ZoomSettings.vue
+++ b/src/plugins/imagery/components/ZoomSettings.vue
@@ -70,6 +70,7 @@ export default {
       required: false
     }
   },
+  emits: ['handle-reset-image', 'toggle-zoom-lock', 'zoom-in', 'zoom-out'],
   data() {
     return {};
   },
@@ -86,16 +87,16 @@ export default {
       }
     },
     handleResetImage() {
-      this.$emit('handleResetImage');
+      this.$emit('handle-reset-image');
     },
     toggleZoomLock() {
-      this.$emit('toggleZoomLock');
+      this.$emit('toggle-zoom-lock');
     },
     zoomIn() {
-      this.$emit('zoomIn');
+      this.$emit('zoom-in');
     },
     zoomOut() {
-      this.$emit('zoomOut');
+      this.$emit('zoom-out');
     }
   }
 };
diff --git a/src/plugins/inspectorDataVisualization/DataVisualization.vue b/src/plugins/inspectorDataVisualization/DataVisualization.vue
index fa7deae5c4..4ee24295bd 100644
--- a/src/plugins/inspectorDataVisualization/DataVisualization.vue
+++ b/src/plugins/inspectorDataVisualization/DataVisualization.vue
@@ -68,26 +68,30 @@
     </div>
 
     <template v-if="selectedBounds !== undefined">
-      <NumericData
+      <NumericDataInspectorView
         :bounds="selectedBounds"
         :telemetry-keys="plotTelemetryKeys"
         :no-numeric-data-text="noNumericDataText"
       />
-      <Imagery v-if="hasImagery" :bounds="selectedBounds" :telemetry-keys="imageryTelemetryKeys" />
+      <ImageryInspectorView
+        v-if="hasImagery"
+        :bounds="selectedBounds"
+        :telemetry-keys="imageryTelemetryKeys"
+      />
     </template>
   </div>
 </template>
 <script>
-import Imagery from './Imagery.vue';
-import NumericData from './NumericData.vue';
+import ImageryInspectorView from './ImageryInspectorView.vue';
+import NumericDataInspectorView from './NumericDataInspectorView.vue';
 
 const TIMESTAMP_VIEW_BUFFER = 30 * 1000;
 const timestampBufferText = `${TIMESTAMP_VIEW_BUFFER / 1000} seconds`;
 
 export default {
   components: {
-    NumericData,
-    Imagery
+    NumericDataInspectorView,
+    ImageryInspectorView
   },
   inject: ['timeFormatter', 'placeholderText', 'plotOptions', 'imageryOptions'],
   props: {
diff --git a/src/plugins/inspectorDataVisualization/Imagery.vue b/src/plugins/inspectorDataVisualization/ImageryInspectorView.vue
similarity index 100%
rename from src/plugins/inspectorDataVisualization/Imagery.vue
rename to src/plugins/inspectorDataVisualization/ImageryInspectorView.vue
diff --git a/src/plugins/inspectorDataVisualization/NumericData.vue b/src/plugins/inspectorDataVisualization/NumericDataInspectorView.vue
similarity index 99%
rename from src/plugins/inspectorDataVisualization/NumericData.vue
rename to src/plugins/inspectorDataVisualization/NumericDataInspectorView.vue
index 107e18a37e..6f4b828744 100644
--- a/src/plugins/inspectorDataVisualization/NumericData.vue
+++ b/src/plugins/inspectorDataVisualization/NumericDataInspectorView.vue
@@ -35,7 +35,7 @@
 <script>
 import mount from 'utils/mount';
 
-import Plot from '../plot/Plot.vue';
+import Plot from '../plot/PlotView.vue';
 import TelemetryFrame from './TelemetryFrame.vue';
 
 export default {
diff --git a/src/plugins/inspectorViews/annotations/tags/TagEditor.vue b/src/plugins/inspectorViews/annotations/tags/TagEditor.vue
index 97e71b29e3..e6df4bf895 100644
--- a/src/plugins/inspectorViews/annotations/tags/TagEditor.vue
+++ b/src/plugins/inspectorViews/annotations/tags/TagEditor.vue
@@ -29,8 +29,8 @@
       :selected-tag="addedTag.newTag ? null : addedTag"
       :new-tag="addedTag.newTag"
       :added-tags="addedTags"
-      @tagRemoved="tagRemoved"
-      @tagAdded="tagAdded"
+      @tag-removed="tagRemoved"
+      @tag-added="tagAdded"
     />
     <button
       v-show="!userAddingTag && !maxTagsAdded"
@@ -84,6 +84,7 @@ export default {
       default: null
     }
   },
+  emits: ['tags-updated'],
   data() {
     return {
       addedTags: [],
diff --git a/src/plugins/inspectorViews/annotations/tags/TagSelection.vue b/src/plugins/inspectorViews/annotations/tags/TagSelection.vue
index 692e2357ba..40d380b5d3 100644
--- a/src/plugins/inspectorViews/annotations/tags/TagSelection.vue
+++ b/src/plugins/inspectorViews/annotations/tags/TagSelection.vue
@@ -30,7 +30,7 @@
         :place-holder-text="'Type to select tag'"
         class="c-tag-selection"
         :item-css-class="'icon-circle'"
-        @onChange="tagSelected"
+        @on-change="tagSelected"
       />
     </template>
     <template v-else>
@@ -86,6 +86,7 @@ export default {
       }
     }
   },
+  emits: ['tag-removed', 'tag-added'],
   data() {
     return {};
   },
@@ -144,7 +145,7 @@ export default {
       });
     },
     removeTag() {
-      this.$emit('tagRemoved', this.selectedTag);
+      this.$emit('tag-removed', this.selectedTag);
     },
     tagSelected(autoField) {
       const tagAdded = autoField.model.options.find((option) => {
@@ -155,7 +156,7 @@ export default {
         return false;
       });
       if (tagAdded) {
-        this.$emit('tagAdded', tagAdded.id);
+        this.$emit('tag-added', tagAdded.id);
       }
     }
   }
diff --git a/src/plugins/inspectorViews/elements/ElementItem.vue b/src/plugins/inspectorViews/elements/ElementItem.vue
index 3902573cd6..5c8cc391bd 100644
--- a/src/plugins/inspectorViews/elements/ElementItem.vue
+++ b/src/plugins/inspectorViews/elements/ElementItem.vue
@@ -74,6 +74,7 @@ export default {
       type: Boolean
     }
   },
+  emits: ['drop-custom', 'dragstart-custom'],
   data() {
     const isAlias =
       this.elementObject.location !==
diff --git a/src/plugins/inspectorViews/elements/ElementItemGroup.vue b/src/plugins/inspectorViews/elements/ElementItemGroup.vue
index a79ed5b812..c169987365 100644
--- a/src/plugins/inspectorViews/elements/ElementItemGroup.vue
+++ b/src/plugins/inspectorViews/elements/ElementItemGroup.vue
@@ -71,6 +71,7 @@ export default {
       type: Boolean
     }
   },
+  emits: ['drop-group'],
   data() {
     return {
       dragCounter: 0
diff --git a/src/plugins/inspectorViews/elements/ElementsPool.vue b/src/plugins/inspectorViews/elements/ElementsPool.vue
index 14295e7453..c414a9a131 100644
--- a/src/plugins/inspectorViews/elements/ElementsPool.vue
+++ b/src/plugins/inspectorViews/elements/ElementsPool.vue
@@ -53,7 +53,7 @@
 <script>
 import _ from 'lodash';
 
-import Search from '../../../ui/components/Search.vue';
+import Search from '../../../ui/components/SearchComponent.vue';
 import ElementItem from './ElementItem.vue';
 
 export default {
diff --git a/src/plugins/inspectorViews/elements/PlotElementsPool.vue b/src/plugins/inspectorViews/elements/PlotElementsPool.vue
index 7c6b54d436..b1972f3e97 100644
--- a/src/plugins/inspectorViews/elements/PlotElementsPool.vue
+++ b/src/plugins/inspectorViews/elements/PlotElementsPool.vue
@@ -71,7 +71,7 @@
 <script>
 import _ from 'lodash';
 
-import Search from '../../../ui/components/Search.vue';
+import Search from '../../../ui/components/SearchComponent.vue';
 import configStore from '../../plot/configuration/ConfigStore';
 import ElementItem from './ElementItem.vue';
 import ElementItemGroup from './ElementItemGroup.vue';
diff --git a/src/plugins/inspectorViews/properties/Location.vue b/src/plugins/inspectorViews/properties/LocationComponent.vue
similarity index 100%
rename from src/plugins/inspectorViews/properties/Location.vue
rename to src/plugins/inspectorViews/properties/LocationComponent.vue
diff --git a/src/plugins/inspectorViews/properties/Properties.vue b/src/plugins/inspectorViews/properties/PropertiesComponent.vue
similarity index 99%
rename from src/plugins/inspectorViews/properties/Properties.vue
rename to src/plugins/inspectorViews/properties/PropertiesComponent.vue
index 4a7563c207..a84fc5f0d0 100644
--- a/src/plugins/inspectorViews/properties/Properties.vue
+++ b/src/plugins/inspectorViews/properties/PropertiesComponent.vue
@@ -49,7 +49,7 @@
 import Moment from 'moment';
 
 import DetailText from './DetailText.vue';
-import Location from './Location.vue';
+import Location from './LocationComponent.vue';
 
 export default {
   components: {
diff --git a/src/plugins/inspectorViews/properties/PropertiesViewProvider.js b/src/plugins/inspectorViews/properties/PropertiesViewProvider.js
index b963219970..7b9c91530b 100644
--- a/src/plugins/inspectorViews/properties/PropertiesViewProvider.js
+++ b/src/plugins/inspectorViews/properties/PropertiesViewProvider.js
@@ -22,7 +22,7 @@
 
 import mount from 'utils/mount';
 
-import Properties from './Properties.vue';
+import Properties from './PropertiesComponent.vue';
 
 export default function PropertiesViewProvider(openmct) {
   return {
diff --git a/src/plugins/inspectorViews/styles/FontStyleEditor.vue b/src/plugins/inspectorViews/styles/FontStyleEditor.vue
index 2b3eec68ea..4d9d5cd127 100644
--- a/src/plugins/inspectorViews/styles/FontStyleEditor.vue
+++ b/src/plugins/inspectorViews/styles/FontStyleEditor.vue
@@ -51,6 +51,7 @@ export default {
       }
     }
   },
+  emits: ['set-font-property'],
   computed: {
     fontTypeLabel() {
       const fontType = FONTS.find((f) => f.value === this.fontStyle.font);
diff --git a/src/plugins/inspectorViews/styles/SavedStyleSelector.vue b/src/plugins/inspectorViews/styles/SavedStyleSelector.vue
index e06cb3cf50..3702e698a6 100644
--- a/src/plugins/inspectorViews/styles/SavedStyleSelector.vue
+++ b/src/plugins/inspectorViews/styles/SavedStyleSelector.vue
@@ -83,6 +83,7 @@ export default {
       required: true
     }
   },
+  emits: ['delete-style'],
   data() {
     return {
       expanded: false
diff --git a/src/plugins/inspectorViews/styles/StylesInspectorView.vue b/src/plugins/inspectorViews/styles/StylesInspectorView.vue
index a220464709..b35d047df9 100644
--- a/src/plugins/inspectorViews/styles/StylesInspectorView.vue
+++ b/src/plugins/inspectorViews/styles/StylesInspectorView.vue
@@ -36,8 +36,8 @@
 <script>
 import StylesView from '@/plugins/condition/components/inspector/StylesView.vue';
 
-import Multipane from '../../../ui/layout/Multipane.vue';
-import Pane from '../../../ui/layout/Pane.vue';
+import Multipane from '../../../ui/layout/MultipaneContainer.vue';
+import Pane from '../../../ui/layout/PaneContainer.vue';
 import SavedStylesInspectorView from './SavedStylesInspectorView.vue';
 
 export default {
diff --git a/src/plugins/licenses/Licenses.vue b/src/plugins/licenses/LicensesComponent.vue
similarity index 100%
rename from src/plugins/licenses/Licenses.vue
rename to src/plugins/licenses/LicensesComponent.vue
diff --git a/src/plugins/licenses/plugin.js b/src/plugins/licenses/plugin.js
index fc6e5876ea..f2f251de19 100644
--- a/src/plugins/licenses/plugin.js
+++ b/src/plugins/licenses/plugin.js
@@ -21,7 +21,7 @@
  *****************************************************************************/
 import mount from 'utils/mount';
 
-import Licenses from './Licenses.vue';
+import Licenses from './LicensesComponent.vue';
 
 export default function () {
   return function install(openmct) {
diff --git a/src/plugins/notebook/NotebookViewProvider.js b/src/plugins/notebook/NotebookViewProvider.js
index d58d44af60..4d3585c488 100644
--- a/src/plugins/notebook/NotebookViewProvider.js
+++ b/src/plugins/notebook/NotebookViewProvider.js
@@ -24,7 +24,7 @@ import mount from 'utils/mount';
 
 import Agent from '@/utils/agent/Agent';
 
-import Notebook from './components/Notebook.vue';
+import Notebook from './components/NotebookComponent.vue';
 
 export default class NotebookViewProvider {
   constructor(openmct, name, key, type, cssClass, snapshotContainer, entryUrlWhitelist) {
diff --git a/src/plugins/notebook/components/Notebook.vue b/src/plugins/notebook/components/NotebookComponent.vue
similarity index 97%
rename from src/plugins/notebook/components/Notebook.vue
rename to src/plugins/notebook/components/NotebookComponent.vue
index eb4edde72f..1593988583 100644
--- a/src/plugins/notebook/components/Notebook.vue
+++ b/src/plugins/notebook/components/NotebookComponent.vue
@@ -34,10 +34,10 @@
       ref="searchResults"
       :domain-object="domainObject"
       :results="searchResults"
-      @cancelEdit="cancelTransaction"
-      @editingEntry="startTransaction"
-      @changeSectionPage="changeSelectedSection"
-      @updateEntries="updateEntries"
+      @cancel-edit="cancelTransaction"
+      @editing-entry="startTransaction"
+      @change-section-page="changeSelectedSection"
+      @update-entries="updateEntries"
     />
     <div v-if="!search.length" class="c-notebook__body">
       <Sidebar
@@ -53,13 +53,13 @@
         :section-title="domainObject.configuration.sectionTitle"
         :sections="sections"
         :sidebar-covers-entries="sidebarCoversEntries"
-        @defaultPageDeleted="cleanupDefaultNotebook"
-        @defaultSectionDeleted="cleanupDefaultNotebook"
-        @pagesChanged="pagesChanged"
-        @selectPage="selectPage"
-        @sectionsChanged="sectionsChanged"
-        @selectSection="selectSection"
-        @toggleNav="toggleNav"
+        @default-page-deleted="cleanupDefaultNotebook"
+        @default-section-deleted="cleanupDefaultNotebook"
+        @pages-changed="pagesChanged"
+        @select-page="selectPage"
+        @sections-changed="sectionsChanged"
+        @select-section="selectSection"
+        @toggle-nav="toggleNav"
       />
       <div
         class="c-notebook__page-view"
@@ -135,10 +135,10 @@
             :read-only="false"
             :is-locked="selectedPage.isLocked"
             :selected-entry-id="selectedEntryId"
-            @cancelEdit="cancelTransaction"
-            @editingEntry="startTransaction"
-            @deleteEntry="deleteEntry"
-            @updateEntry="updateEntry"
+            @cancel-edit="cancelTransaction"
+            @editing-entry="startTransaction"
+            @delete-entry="deleteEntry"
+            @update-entry="updateEntry"
             @entry-selection="entrySelection(entry)"
           />
         </div>
@@ -162,7 +162,7 @@
 <script>
 import { debounce } from 'lodash';
 
-import Search from '@/ui/components/Search.vue';
+import Search from '@/ui/components/SearchComponent.vue';
 
 import ProgressBar from '../../../ui/components/ProgressBar.vue';
 import objectLink from '../../../ui/mixins/object-link';
@@ -189,8 +189,7 @@ import {
 } from '../utils/notebook-storage';
 import NotebookEntry from './NotebookEntry.vue';
 import SearchResults from './SearchResults.vue';
-import Sidebar from './Sidebar.vue';
-
+import Sidebar from './SidebarComponent.vue';
 function objectCopy(obj) {
   return JSON.parse(JSON.stringify(obj));
 }
diff --git a/src/plugins/notebook/components/NotebookEmbed.vue b/src/plugins/notebook/components/NotebookEmbed.vue
index 46de1d9ca9..7a1d5346a8 100644
--- a/src/plugins/notebook/components/NotebookEmbed.vue
+++ b/src/plugins/notebook/components/NotebookEmbed.vue
@@ -90,6 +90,7 @@ export default {
       }
     }
   },
+  emits: ['update-embed', 'remove-embed'],
   data() {
     return {
       menuActions: []
@@ -401,10 +402,10 @@ export default {
         return;
       }
 
-      this.$emit('removeEmbed', this.embed.id);
+      this.$emit('remove-embed', this.embed.id);
     },
     updateEmbed(embed) {
-      this.$emit('updateEmbed', embed);
+      this.$emit('update-embed', embed);
     },
     updateSnapshot(snapshotObject) {
       this.embed.snapshot.thumbnailImage = snapshotObject.thumbnailImage;
diff --git a/src/plugins/notebook/components/NotebookEntry.vue b/src/plugins/notebook/components/NotebookEntry.vue
index 3101a2df3e..99c93498e7 100644
--- a/src/plugins/notebook/components/NotebookEntry.vue
+++ b/src/plugins/notebook/components/NotebookEntry.vue
@@ -119,8 +119,8 @@
               :key="embed.id"
               :embed="embed"
               :is-locked="isLocked"
-              @removeEmbed="removeEmbed"
-              @updateEmbed="updateEmbed"
+              @remove-embed="removeEmbed"
+              @update-embed="updateEmbed"
             />
           </div>
         </div>
@@ -268,6 +268,13 @@ export default {
       }
     }
   },
+  emits: [
+    'delete-entry',
+    'change-section-page',
+    'update-entry',
+    'editing-entry',
+    'entry-selection'
+  ],
   data() {
     return {
       editMode: false,
@@ -429,7 +436,7 @@ export default {
       }
     },
     deleteEntry() {
-      this.$emit('deleteEntry', this.entry.id);
+      this.$emit('delete-entry', this.entry.id);
     },
     manageEmbedLayout() {
       if (this.$refs.embeds) {
@@ -503,13 +510,13 @@ export default {
       return Moment.utc(unixTime).format(timeFormat);
     },
     navigateToPage() {
-      this.$emit('changeSectionPage', {
+      this.$emit('change-section-page', {
         sectionId: this.result.section.id,
         pageId: this.result.page.id
       });
     },
     navigateToSection() {
-      this.$emit('changeSectionPage', {
+      this.$emit('change-section-page', {
         sectionId: this.result.section.id,
         pageId: null
       });
@@ -551,7 +558,7 @@ export default {
 
       this.entry.modified = this.openmct.time.now();
 
-      this.$emit('updateEntry', this.entry);
+      this.$emit('update-entry', this.entry);
     },
     editingEntry(event) {
       this.selectAndEmitEntry(event, this.entry);
@@ -560,7 +567,7 @@ export default {
         this.selectAndEmitEntry(event, this.entry);
         this.editMode = true;
         this.adjustTextareaHeight();
-        this.$emit('editingEntry');
+        this.$emit('editing-entry');
       }
     },
     updateEntryValue($event) {
diff --git a/src/plugins/notebook/components/NotebookSnapshotContainer.vue b/src/plugins/notebook/components/NotebookSnapshotContainer.vue
index 4a0d71a1bb..cac83a9869 100644
--- a/src/plugins/notebook/components/NotebookSnapshotContainer.vue
+++ b/src/plugins/notebook/components/NotebookSnapshotContainer.vue
@@ -52,7 +52,7 @@
           :embed="snapshot.embedObject"
           :is-snapshot-container="true"
           :remove-action-string="'Delete Snapshot'"
-          @removeEmbed="removeSnapshot"
+          @remove-embed="removeSnapshot"
         />
       </span>
       <div v-if="!snapshots.length > 0" class="hint">
diff --git a/src/plugins/notebook/components/PageCollection.vue b/src/plugins/notebook/components/PageCollection.vue
index 76ba2e27bd..1af8d2b27f 100644
--- a/src/plugins/notebook/components/PageCollection.vue
+++ b/src/plugins/notebook/components/PageCollection.vue
@@ -28,9 +28,9 @@
         :selected-page-id="selectedPageId"
         :page="page"
         :page-title="pageTitle"
-        @deletePage="deletePage"
-        @renamePage="updatePage"
-        @selectPage="selectPage"
+        @delete-page="deletePage"
+        @rename-page="updatePage"
+        @select-page="selectPage"
       />
     </li>
   </ul>
@@ -88,6 +88,7 @@ export default {
       }
     }
   },
+  emits: ['default-page-deleted', 'update-page', 'select-page', 'toggle-nav'],
   watch: {
     pages: {
       handler(val, oldVal) {
@@ -125,31 +126,31 @@ export default {
       }
 
       if (isPageDefault) {
-        this.$emit('defaultPageDeleted');
+        this.$emit('default-page-deleted');
       }
 
       if (pages.length && isPageSelected && (!defaultPageId || isPageDefault)) {
         selectedPageId = pages[0].id;
       }
 
-      this.$emit('updatePage', {
+      this.$emit('update-page', {
         pages,
         id
       });
-      this.$emit('selectPage', selectedPageId);
+      this.$emit('select-page', selectedPageId);
     },
     selectPage(id) {
-      this.$emit('selectPage', id);
+      this.$emit('select-page', id);
 
       // Add test here for whether or not to toggle the nav
       if (this.sidebarCoversEntries) {
-        this.$emit('toggleNav');
+        this.$emit('toggle-nav');
       }
     },
     updatePage(newPage) {
       const id = newPage.id;
       const pages = this.pages.map((page) => (page.id === id ? newPage : page));
-      this.$emit('updatePage', {
+      this.$emit('update-page', {
         pages,
         id
       });
diff --git a/src/plugins/notebook/components/PageComponent.vue b/src/plugins/notebook/components/PageComponent.vue
index adc9f12277..280835edf8 100644
--- a/src/plugins/notebook/components/PageComponent.vue
+++ b/src/plugins/notebook/components/PageComponent.vue
@@ -90,6 +90,7 @@ export default {
       }
     }
   },
+  emits: ['delete-page', 'select-page', 'rename-page'],
   data() {
     return {
       popupMenuItems: [],
@@ -122,7 +123,7 @@ export default {
         return;
       }
 
-      this.$emit('deletePage', this.page.id);
+      this.$emit('delete-page', this.page.id);
     },
     getRemoveDialog() {
       const message =
@@ -146,7 +147,7 @@ export default {
         return;
       }
 
-      this.$emit('selectPage', id);
+      this.$emit('select-page', id);
     },
     renamePage(target) {
       if (!target) {
@@ -161,7 +162,7 @@ export default {
         return;
       }
 
-      this.$emit('renamePage', Object.assign(this.page, { name: target.textContent }));
+      this.$emit('rename-page', Object.assign(this.page, { name: target.textContent }));
     },
     updateName(event) {
       const { target, keyCode, type } = event;
diff --git a/src/plugins/notebook/components/SearchResults.vue b/src/plugins/notebook/components/SearchResults.vue
index 8b09489cb3..8d69468243 100644
--- a/src/plugins/notebook/components/SearchResults.vue
+++ b/src/plugins/notebook/components/SearchResults.vue
@@ -34,10 +34,10 @@
         :selected-page="result.page"
         :selected-section="result.section"
         :is-locked="result.page.isLocked"
-        @editingEntry="editingEntry"
-        @cancelEdit="cancelEdit"
-        @changeSectionPage="changeSectionPage"
-        @updateEntries="updateEntries"
+        @editing-entry="editingEntry"
+        @cancel-edit="cancelEdit"
+        @change-section-page="changeSectionPage"
+        @update-entries="updateEntries"
       />
     </div>
   </div>
@@ -65,18 +65,19 @@ export default {
       }
     }
   },
+  emits: ['editing-entry', 'cancel-edit', 'change-section-page', 'update-entries'],
   methods: {
     editingEntry() {
-      this.$emit('editingEntry');
+      this.$emit('editing-entry');
     },
     cancelEdit() {
-      this.$emit('cancelEdit');
+      this.$emit('cancel-edit');
     },
     changeSectionPage(data) {
-      this.$emit('changeSectionPage', data);
+      this.$emit('change-section-page', data);
     },
     updateEntries(entries) {
-      this.$emit('updateEntries', entries);
+      this.$emit('update-entries', entries);
     }
   }
 };
diff --git a/src/plugins/notebook/components/SectionCollection.vue b/src/plugins/notebook/components/SectionCollection.vue
index 195344f319..83e2fda61b 100644
--- a/src/plugins/notebook/components/SectionCollection.vue
+++ b/src/plugins/notebook/components/SectionCollection.vue
@@ -28,9 +28,9 @@
         :selected-section-id="selectedSectionId"
         :section="section"
         :section-title="sectionTitle"
-        @deleteSection="deleteSection"
-        @renameSection="updateSection"
-        @selectSection="selectSection"
+        @delete-section="deleteSection"
+        @rename-section="updateSection"
+        @select-section="selectSection"
       />
     </li>
   </ul>
@@ -77,6 +77,7 @@ export default {
       }
     }
   },
+  emits: ['select-section', 'default-section-deleted', 'update-section'],
   watch: {
     sections: {
       handler(val, oldVal) {
@@ -112,25 +113,25 @@ export default {
       }
 
       if (isSectionDefault) {
-        this.$emit('defaultSectionDeleted');
+        this.$emit('default-section-deleted');
       }
 
       if (sections.length && isSectionSelected && (!defaultSectionId || isSectionDefault)) {
         sections[0].isSelected = true;
       }
 
-      this.$emit('updateSection', {
+      this.$emit('update-section', {
         sections,
         id
       });
     },
     selectSection(id) {
-      this.$emit('selectSection', id);
+      this.$emit('select-section', id);
     },
     updateSection(newSection) {
       const id = newSection.id;
       const sections = this.sections.map((section) => (section.id === id ? newSection : section));
-      this.$emit('updateSection', {
+      this.$emit('update-section', {
         sections,
         id
       });
diff --git a/src/plugins/notebook/components/SectionComponent.vue b/src/plugins/notebook/components/SectionComponent.vue
index 6b0a7b5fc4..65299ccd7a 100644
--- a/src/plugins/notebook/components/SectionComponent.vue
+++ b/src/plugins/notebook/components/SectionComponent.vue
@@ -72,6 +72,7 @@ export default {
       }
     }
   },
+  emits: ['delete-section', 'rename-section', 'select-section'],
   data() {
     return {
       popupMenuItems: [],
@@ -104,7 +105,7 @@ export default {
         return;
       }
 
-      this.$emit('deleteSection', this.section.id);
+      this.$emit('delete-section', this.section.id);
     },
     getRemoveDialog() {
       const message =
@@ -129,7 +130,7 @@ export default {
         return;
       }
 
-      this.$emit('selectSection', id);
+      this.$emit('select-section', id);
     },
     renameSection(target) {
       if (!target) {
@@ -144,7 +145,7 @@ export default {
         return;
       }
 
-      this.$emit('renameSection', Object.assign(this.section, { name: target.textContent }));
+      this.$emit('rename-section', Object.assign(this.section, { name: target.textContent }));
     },
     updateName(event) {
       const { target, keyCode, type } = event;
diff --git a/src/plugins/notebook/components/Sidebar.vue b/src/plugins/notebook/components/SidebarComponent.vue
similarity index 88%
rename from src/plugins/notebook/components/Sidebar.vue
rename to src/plugins/notebook/components/SidebarComponent.vue
index 40af7ab195..9acefebb2e 100644
--- a/src/plugins/notebook/components/Sidebar.vue
+++ b/src/plugins/notebook/components/SidebarComponent.vue
@@ -42,9 +42,9 @@
           :domain-object="domainObject"
           :sections="sections"
           :section-title="sectionTitle"
-          @defaultSectionDeleted="defaultSectionDeleted"
-          @updateSection="sectionsChanged"
-          @selectSection="selectSection"
+          @default-section-deleted="defaultSectionDeleted"
+          @update-section="sectionsChanged"
+          @select-section="selectSection"
         />
       </div>
     </div>
@@ -74,10 +74,10 @@
           :sections="sections"
           :sidebar-covers-entries="sidebarCoversEntries"
           :page-title="pageTitle"
-          @defaultPageDeleted="defaultPageDeleted"
-          @toggleNav="toggleNav"
-          @updatePage="pagesChanged"
-          @selectPage="selectPage"
+          @default-page-deleted="defaultPageDeleted"
+          @toggle-nav="toggleNav"
+          @update-page="pagesChanged"
+          @select-page="selectPage"
         />
       </div>
     </div>
@@ -156,6 +156,15 @@ export default {
       }
     }
   },
+  emits: [
+    'select-page',
+    'select-section',
+    'toggle-nav',
+    'default-section-deleted',
+    'default-page-deleted',
+    'pages-changed',
+    'sections-changed'
+  ],
   computed: {
     pages() {
       const selectedSection = this.sections.find(
@@ -197,7 +206,7 @@ export default {
         pages,
         id: newPage.id
       });
-      this.$emit('selectPage', newPage.id);
+      this.$emit('select-page', newPage.id);
     },
     addSection() {
       const newSection = this.createNewSection();
@@ -208,7 +217,7 @@ export default {
         id: newSection.id
       });
 
-      this.$emit('selectSection', newSection.id);
+      this.$emit('select-section', newSection.id);
     },
     addNewPage(newPage) {
       this.pages.forEach((page) => {
@@ -254,28 +263,28 @@ export default {
       };
     },
     defaultPageDeleted() {
-      this.$emit('defaultPageDeleted');
+      this.$emit('default-page-deleted');
     },
     defaultSectionDeleted() {
-      this.$emit('defaultSectionDeleted');
+      this.$emit('default-section-deleted');
     },
     toggleNav() {
-      this.$emit('toggleNav');
+      this.$emit('toggle-nav');
     },
     pagesChanged({ pages, id }) {
-      this.$emit('pagesChanged', {
+      this.$emit('pages-changed', {
         pages,
         id
       });
     },
     selectPage(pageId) {
-      this.$emit('selectPage', pageId);
+      this.$emit('select-page', pageId);
     },
     selectSection(sectionId) {
-      this.$emit('selectSection', sectionId);
+      this.$emit('select-section', sectionId);
     },
     sectionsChanged({ sections, id }) {
-      this.$emit('sectionsChanged', {
+      this.$emit('sections-changed', {
         sections,
         id
       });
diff --git a/src/plugins/notificationIndicator/components/NotificationsList.vue b/src/plugins/notificationIndicator/components/NotificationsList.vue
index 0ae6c270ef..374eb4efbc 100644
--- a/src/plugins/notificationIndicator/components/NotificationsList.vue
+++ b/src/plugins/notificationIndicator/components/NotificationsList.vue
@@ -53,6 +53,7 @@ export default {
       required: true
     }
   },
+  emits: ['close', 'clear-all'],
   data() {
     return {};
   },
diff --git a/src/plugins/plan/PlanViewProvider.js b/src/plugins/plan/PlanViewProvider.js
index 7a4bbd21f5..15c1b1059c 100644
--- a/src/plugins/plan/PlanViewProvider.js
+++ b/src/plugins/plan/PlanViewProvider.js
@@ -22,7 +22,7 @@
 
 import mount from 'utils/mount';
 
-import Plan from './components/Plan.vue';
+import Plan from './components/PlanView.vue';
 
 export default function PlanViewProvider(openmct) {
   function isCompactView(objectPath) {
diff --git a/src/plugins/plan/components/Plan.vue b/src/plugins/plan/components/PlanView.vue
similarity index 100%
rename from src/plugins/plan/components/Plan.vue
rename to src/plugins/plan/components/PlanView.vue
diff --git a/src/plugins/plan/pluginSpec.js b/src/plugins/plan/pluginSpec.js
index 703001a9b9..abdb0aeee3 100644
--- a/src/plugins/plan/pluginSpec.js
+++ b/src/plugins/plan/pluginSpec.js
@@ -23,7 +23,7 @@
 import { createOpenMct, resetApplicationState } from 'utils/testing';
 import Vue from 'vue';
 
-import Properties from '../inspectorViews/properties/Properties.vue';
+import Properties from '../inspectorViews/properties/PropertiesComponent.vue';
 import PlanPlugin from '../plan/plugin';
 
 describe('the plugin', function () {
diff --git a/src/plugins/plot/MctPlot.vue b/src/plugins/plot/MctPlot.vue
index 296cbf77b6..ef047e9f5e 100644
--- a/src/plugins/plot/MctPlot.vue
+++ b/src/plugins/plot/MctPlot.vue
@@ -39,9 +39,9 @@
           :tick-width="yAxis.tickWidth"
           :used-tick-width="plotFirstLeftTickWidth"
           :plot-left-tick-width="yAxis.id > 2 ? yAxis.tickWidth : plotLeftTickWidth"
-          @yKeyChanged="setYAxisKey"
-          @plotYTickWidth="onYTickWidthChange"
-          @toggleAxisVisibility="toggleSeriesForYAxis"
+          @y-key-changed="setYAxisKey"
+          @plot-y-tick-width="onYTickWidthChange"
+          @toggle-axis-visibility="toggleSeriesForYAxis"
         />
       </div>
       <div class="gl-plot-wrapper-display-area-and-x-axis" :style="xAxisStyle">
@@ -66,7 +66,7 @@
             :axis-type="'yAxis'"
             :position="'bottom'"
             :axis-id="yAxis.id"
-            @plotTickWidth="onYTickWidthChange"
+            @plot-tick-width="onYTickWidthChange"
           />
 
           <div
@@ -82,8 +82,8 @@
               :annotation-selections-by-series="annotationSelectionsBySeries"
               :hidden-y-axis-ids="hiddenYAxisIds"
               :annotation-viewing-and-editing-allowed="annotationViewingAndEditingAllowed"
-              @plotReinitializeCanvas="initCanvas"
-              @chartLoaded="initialize"
+              @plot-reinitialize-canvas="initCanvas"
+              @chart-loaded="initialize"
             />
           </div>
 
@@ -177,6 +177,7 @@
 <script>
 import Flatbush from 'flatbush';
 import _ from 'lodash';
+import { useEventBus } from 'utils/useEventBus';
 
 import XAxis from './axis/XAxis.vue';
 import YAxis from './axis/YAxis.vue';
@@ -242,6 +243,23 @@ export default {
       }
     }
   },
+  emits: [
+    'config-loaded',
+    'cursor-guide',
+    'grid-lines',
+    'loading-complete',
+    'loading-updated',
+    'plot-y-tick-width',
+    'highlights',
+    'lock-highlight-point',
+    'status-updated'
+  ],
+  setup() {
+    const { EventBus } = useEventBus();
+    return {
+      EventBus
+    };
+  },
   data() {
     return {
       altPressed: false,
@@ -376,7 +394,7 @@ export default {
       );
     }
 
-    this.$emit('configLoaded', true);
+    this.$emit('config-loaded', true);
 
     this.listenTo(this.config.series, 'add', this.addSeries, this);
     this.listenTo(this.config.series, 'remove', this.removeSeries, this);
@@ -394,7 +412,7 @@ export default {
     );
 
     this.openmct.objectViews.on('clearData', this.clearData);
-    this.$on('loadingComplete', this.loadAnnotationsIfAllowed);
+    this.EventBus.$on('loading-complete', this.loadAnnotationsIfAllowed);
     this.openmct.selection.on('change', this.updateSelection);
     this.yAxisListWithRange = [this.config.yAxis, ...this.config.additionalYAxes];
 
@@ -409,7 +427,7 @@ export default {
     document.removeEventListener('keydown', this.handleKeyDown);
     document.removeEventListener('keyup', this.handleKeyUp);
     document.body.removeEventListener('click', this.cancelSelection);
-    this.$off('loadingComplete', this.loadAnnotationsIfAllowed);
+    this.EventBus.$off('loading-complete', this.loadAnnotationsIfAllowed);
     this.destroy();
   },
   methods: {
@@ -464,7 +482,7 @@ export default {
         const currentXaxis = this.config.xAxis.get('displayRange');
         const currentYaxis = this.config.yAxis.get('displayRange');
         if (!currentXaxis || !currentYaxis) {
-          this.$once('loadingComplete', resolve);
+          this.EventBus.$once('loading-complete', resolve);
         } else {
           resolve();
         }
@@ -698,12 +716,12 @@ export default {
       this.pending -= 1;
       this.updateLoading();
       if (this.pending === 0) {
-        this.$emit('loadingComplete');
+        this.EventBus.$emit('loading-complete');
       }
     },
 
     updateLoading() {
-      this.$emit('loadingUpdated', this.pending > 0);
+      this.$emit('loading-updated', this.pending > 0);
     },
 
     updateFiltersAndResubscribe(updatedFilters) {
@@ -1022,7 +1040,7 @@ export default {
             return previous + current.tickWidth;
           }, 0);
         this.$emit(
-          'plotYTickWidth',
+          'plot-y-tick-width',
           {
             hasMultipleLeftAxes: this.hasMultipleLeftAxes,
             leftTickWidth,
@@ -1175,7 +1193,7 @@ export default {
 
       if (this.isMouseClick() && event.shiftKey) {
         this.lockHighlightPoint = !this.lockHighlightPoint;
-        this.$emit('lockHighlightPoint', this.lockHighlightPoint);
+        this.$emit('lock-highlight-point', this.lockHighlightPoint);
       }
 
       if (this.pan) {
@@ -1904,7 +1922,7 @@ export default {
       this.openmct.objectViews.off('clearData', this.clearData);
     },
     updateStatus(status) {
-      this.$emit('statusUpdated', status);
+      this.$emit('status-updated', status);
     },
     handleWindowResize() {
       const { plotWrapper } = this.$parent.$refs;
@@ -1922,11 +1940,11 @@ export default {
     },
     toggleCursorGuide() {
       this.cursorGuide = !this.cursorGuide;
-      this.$emit('cursorGuide', this.cursorGuide);
+      this.$emit('cursor-guide', this.cursorGuide);
     },
     toggleGridLines() {
       this.gridLines = !this.gridLines;
-      this.$emit('gridLines', this.gridLines);
+      this.$emit('grid-lines', this.gridLines);
     }
   }
 };
diff --git a/src/plugins/plot/MctTicks.vue b/src/plugins/plot/MctTicks.vue
index 70b7ac5656..7f26e90077 100644
--- a/src/plugins/plot/MctTicks.vue
+++ b/src/plugins/plot/MctTicks.vue
@@ -108,6 +108,7 @@ export default {
       }
     }
   },
+  emits: ['plot-tick-width'],
   data() {
     return {
       ticks: []
@@ -271,7 +272,7 @@ export default {
           );
 
           this.tickWidth = tickWidth;
-          this.$emit('plotTickWidth', {
+          this.$emit('plot-tick-width', {
             width: tickWidth,
             yAxisId: this.axisType === 'yAxis' ? this.axisId : ''
           });
diff --git a/src/plugins/plot/Plot.vue b/src/plugins/plot/PlotView.vue
similarity index 88%
rename from src/plugins/plot/Plot.vue
rename to src/plugins/plot/PlotView.vue
index c6e7d6538f..0962103840 100644
--- a/src/plugins/plot/Plot.vue
+++ b/src/plugins/plot/PlotView.vue
@@ -39,20 +39,20 @@
         :limit-line-labels="limitLineLabelsProp"
         :parent-y-tick-width="parentYTickWidth"
         :color-palette="colorPalette"
-        @loadingUpdated="loadingUpdated"
-        @statusUpdated="setStatus"
-        @configLoaded="updateReady"
-        @lockHighlightPoint="lockHighlightPointUpdated"
+        @loading-updated="loadingUpdated"
+        @status-updated="setStatus"
+        @config-loaded="updateReady"
+        @lock-highlight-point="lockHighlightPointUpdated"
         @highlights="highlightsUpdated"
-        @plotYTickWidth="onYTickWidthChange"
-        @cursorGuide="onCursorGuideChange"
-        @gridLines="onGridLinesChange"
+        @plot-y-tick-width="onYTickWidthChange"
+        @cursor-guide="onCursorGuideChange"
+        @grid-lines="onGridLinesChange"
       >
         <plot-legend
           v-if="configReady && hideLegend === false"
           :cursor-locked="lockHighlightPoint"
           :highlights="highlights"
-          @legendHoverChanged="legendHoverChanged"
+          @legend-hover-changed="legendHoverChanged"
           @expanded="updateExpanded"
           @position="updatePosition"
         />
@@ -62,12 +62,13 @@
 </template>
 
 <script>
+import stalenessMixin from '@/ui/mixins/staleness-mixin';
+
 import ImageExporter from '../../exporters/ImageExporter';
 import ProgressBar from '../../ui/components/ProgressBar.vue';
 import PlotLegend from './legend/PlotLegend.vue';
 import eventHelpers from './lib/eventHelpers';
 import MctPlot from './MctPlot.vue';
-import stalenessMixin from '@/ui/mixins/staleness-mixin';
 
 export default {
   components: {
@@ -127,6 +128,15 @@ export default {
       }
     }
   },
+  emits: [
+    'loading-updated',
+    'lock-highlight-point',
+    'grid-lines',
+    'highlights',
+    'config-loaded',
+    'plot-y-tick-width',
+    'cursor-guide'
+  ],
   data() {
     return {
       loading: false,
@@ -192,7 +202,7 @@ export default {
     },
     loadingUpdated(loading) {
       this.loading = loading;
-      this.$emit('loadingUpdated', ...arguments);
+      this.$emit('loading-updated', ...arguments);
     },
     destroy() {
       if (this.compositionCollection) {
@@ -222,7 +232,7 @@ export default {
     },
     lockHighlightPointUpdated(data) {
       this.lockHighlightPoint = data;
-      this.$emit('lockHighlightPoint', ...arguments);
+      this.$emit('lock-highlight-point', ...arguments);
     },
     highlightsUpdated(data) {
       this.highlights = data;
@@ -239,16 +249,16 @@ export default {
     },
     updateReady(ready) {
       this.configReady = ready;
-      this.$emit('configLoaded', ...arguments);
+      this.$emit('config-loaded', ...arguments);
     },
     onYTickWidthChange() {
-      this.$emit('plotYTickWidth', ...arguments);
+      this.$emit('plot-y-tick-width', ...arguments);
     },
     onCursorGuideChange() {
-      this.$emit('cursorGuide', ...arguments);
+      this.$emit('cursor-guide', ...arguments);
     },
     onGridLinesChange() {
-      this.$emit('gridLines', ...arguments);
+      this.$emit('grid-lines', ...arguments);
     }
   }
 };
diff --git a/src/plugins/plot/PlotViewProvider.js b/src/plugins/plot/PlotViewProvider.js
index 83c87a1339..a2fcedce02 100644
--- a/src/plugins/plot/PlotViewProvider.js
+++ b/src/plugins/plot/PlotViewProvider.js
@@ -22,7 +22,7 @@
 
 import mount from 'utils/mount';
 
-import Plot from './Plot.vue';
+import Plot from './PlotView.vue';
 
 export default function PlotViewProvider(openmct) {
   function hasNumericTelemetry(domainObject) {
diff --git a/src/plugins/plot/axis/XAxis.vue b/src/plugins/plot/axis/XAxis.vue
index 722535dfcd..af64395047 100644
--- a/src/plugins/plot/axis/XAxis.vue
+++ b/src/plugins/plot/axis/XAxis.vue
@@ -22,7 +22,7 @@
 
 <template>
   <div v-if="loaded" class="gl-plot-axis-area gl-plot-x has-local-controls">
-    <mct-ticks :axis-type="'xAxis'" :position="'left'" @plotTickWidth="onTickWidthChange" />
+    <mct-ticks :axis-type="'xAxis'" :position="'left'" @plot-tick-width="onTickWidthChange" />
 
     <div class="gl-plot-label gl-plot-x-label" :class="{ 'icon-gear': isEnabledXKeyToggle() }">
       {{ xAxisLabel }}
@@ -59,6 +59,7 @@ export default {
       }
     }
   },
+  emits: ['plot-x-tick-width'],
   data() {
     return {
       selectedXKeyOptionKey: '',
@@ -138,7 +139,7 @@ export default {
         this.xKeyOptions.length > 0 ? this.getXKeyOption(xAxisKey).key : xAxisKey;
     },
     onTickWidthChange(width) {
-      this.$emit('plotXTickWidth', width);
+      this.$emit('plot-x-tick-width', width);
     }
   }
 };
diff --git a/src/plugins/plot/axis/YAxis.vue b/src/plugins/plot/axis/YAxis.vue
index 27175e1de6..5b552e7d35 100644
--- a/src/plugins/plot/axis/YAxis.vue
+++ b/src/plugins/plot/axis/YAxis.vue
@@ -65,7 +65,7 @@
       :axis-type="'yAxis'"
       class="gl-plot-ticks"
       :position="'top'"
-      @plotTickWidth="onTickWidthChange"
+      @plot-tick-width="onTickWidthChange"
     />
   </div>
 </template>
@@ -120,6 +120,7 @@ export default {
       }
     }
   },
+  emits: ['plot-y-tick-width', 'toggle-axis-visibility', 'y-key-changed'],
   data() {
     return {
       yAxisLabel: 'none',
@@ -259,19 +260,19 @@ export default {
       let yAxisObject = this.yKeyOptions.filter((o) => o.name === this.yAxisLabel)[0];
 
       if (yAxisObject) {
-        this.$emit('yKeyChanged', yAxisObject.key, this.id);
+        this.$emit('y-key-changed', yAxisObject.key, this.id);
         this.yAxis.set('label', this.yAxisLabel);
       }
     },
     onTickWidthChange(data) {
-      this.$emit('plotYTickWidth', {
+      this.$emit('plot-y-tick-width', {
         width: data.width,
         yAxisId: this.id
       });
     },
     toggleSeriesVisibility() {
       this.visible = !this.visible;
-      this.$emit('toggleAxisVisibility', {
+      this.$emit('toggle-axis-visibility', {
         id: this.id,
         visible: this.visible
       });
diff --git a/src/plugins/plot/chart/MctChart.vue b/src/plugins/plot/chart/MctChart.vue
index adafaf15aa..0cd706f9c1 100644
--- a/src/plugins/plot/chart/MctChart.vue
+++ b/src/plugins/plot/chart/MctChart.vue
@@ -144,6 +144,7 @@ export default {
       required: true
     }
   },
+  emits: ['chart-loaded', 'plot-reinitialize-canvas'],
   data() {
     return {
       canvasTemplate:
@@ -245,7 +246,7 @@ export default {
     this.listenTo(this.config.xAxis, 'change:displayRange', this.scheduleDraw);
     this.listenTo(this.config.xAxis, 'change', this.redrawIfNotAlreadyHandled);
     this.config.series.forEach(this.onSeriesAdd, this);
-    this.$emit('chartLoaded');
+    this.$emit('chart-loaded');
   },
   beforeUnmount() {
     this.destroy();
@@ -495,7 +496,7 @@ export default {
       this.overlay.parentNode.replaceChild(overlayCanvas, this.overlay);
       this.overlay = overlayCanvas;
       this.drawAPI = DrawLoader.getFallbackDrawAPI(this.canvas, this.overlay);
-      this.$emit('plotReinitializeCanvas');
+      this.$emit('plot-reinitialize-canvas');
     },
     removeChartElement(series) {
       const elements = this.seriesElements.get(toRaw(series));
diff --git a/src/plugins/plot/inspector/PlotOptionsEdit.vue b/src/plugins/plot/inspector/PlotOptionsEdit.vue
index 020c85e58a..5a50e9088d 100644
--- a/src/plugins/plot/inspector/PlotOptionsEdit.vue
+++ b/src/plugins/plot/inspector/PlotOptionsEdit.vue
@@ -24,7 +24,7 @@
     <ul v-if="!isStackedPlotObject" class="c-tree" aria-label="Plot Series Properties">
       <h2 class="--first" title="Display properties for this object">Plot Series</h2>
       <li v-for="series in plotSeries" :key="series.key">
-        <series-form :series="series" @seriesUpdated="updateSeriesConfigForObject" />
+        <series-form :series="series" @series-updated="updateSeriesConfigForObject" />
       </li>
     </ul>
     <y-axis-form
@@ -33,7 +33,7 @@
       :key="`yAxis-${index}`"
       class="grid-properties js-yaxis-grid-properties"
       :y-axis="config.yAxis"
-      @seriesUpdated="updateSeriesConfigForObject"
+      @series-updated="updateSeriesConfigForObject"
     />
     <ul
       v-if="isStackedPlotObject || !isStackedPlotNestedObject"
diff --git a/src/plugins/plot/inspector/forms/SeriesForm.vue b/src/plugins/plot/inspector/forms/SeriesForm.vue
index f41209a64a..11d98ed85c 100644
--- a/src/plugins/plot/inspector/forms/SeriesForm.vue
+++ b/src/plugins/plot/inspector/forms/SeriesForm.vue
@@ -115,7 +115,7 @@
           edit-title="Manually set the plot line and marker color for this series."
           view-title="The plot line and marker color for this series."
           short-label="Color"
-          @colorSet="setColor"
+          @color-set="setColor"
         />
       </li>
     </ul>
@@ -143,6 +143,7 @@ export default {
       }
     }
   },
+  emits: ['series-updated'],
   data() {
     return {
       expanded: false,
@@ -276,7 +277,7 @@ export default {
       this.series.set('color', color);
 
       if (!this.domainObject.configuration || !this.domainObject.configuration.series) {
-        this.$emit('seriesUpdated', {
+        this.$emit('series-updated', {
           identifier: this.domainObject.identifier,
           path: `series.color`,
           value: color.asHexString()
@@ -292,7 +293,7 @@ export default {
         otherSeriesWithColor.set('color', oldColor);
 
         if (!this.domainObject.configuration || !this.domainObject.configuration.series) {
-          this.$emit('seriesUpdated', {
+          this.$emit('series-updated', {
             identifier: this.domainObject.identifier,
             path: `series.color`,
             value: oldColor.asHexString()
@@ -331,7 +332,7 @@ export default {
         this.series.set(formKey, coerce(newVal, formField.coerce));
         if (path) {
           if (!this.domainObject.configuration || !this.domainObject.configuration.series) {
-            this.$emit('seriesUpdated', {
+            this.$emit('series-updated', {
               identifier: this.domainObject.identifier,
               path: `series.${formKey}`,
               value: coerce(newVal, formField.coerce)
diff --git a/src/plugins/plot/inspector/forms/YAxisForm.vue b/src/plugins/plot/inspector/forms/YAxisForm.vue
index a185198372..a7209644fe 100644
--- a/src/plugins/plot/inspector/forms/YAxisForm.vue
+++ b/src/plugins/plot/inspector/forms/YAxisForm.vue
@@ -126,6 +126,7 @@ export default {
       required: true
     }
   },
+  emits: ['series-updated'],
   data() {
     return {
       yAxis: null,
@@ -302,7 +303,7 @@ export default {
                 newVal
               );
             } else {
-              this.$emit('seriesUpdated', {
+              this.$emit('series-updated', {
                 identifier: this.domainObject.identifier,
                 path: `${this.getPrefix()}.${formKey}`,
                 id: this.id,
@@ -317,7 +318,7 @@ export default {
                 newVal
               );
             } else {
-              this.$emit('seriesUpdated', {
+              this.$emit('series-updated', {
                 identifier: this.domainObject.identifier,
                 path: `${this.getPrefix()}.${formKey}`,
                 value: newVal
diff --git a/src/plugins/plot/legend/PlotLegend.vue b/src/plugins/plot/legend/PlotLegend.vue
index 3465314e5b..c62689b0cf 100644
--- a/src/plugins/plot/legend/PlotLegend.vue
+++ b/src/plugins/plot/legend/PlotLegend.vue
@@ -46,7 +46,7 @@
           :highlights="highlights"
           :value-to-show-when-collapsed="valueToShowWhenCollapsed"
           :series-key-string="seriesObject.keyString"
-          @legendHoverChanged="legendHoverChanged"
+          @legend-hover-changed="legendHoverChanged"
         />
       </div>
       <!-- EXPANDED PLOT LEGEND -->
@@ -74,7 +74,7 @@
               :key="`${seriesObject.keyString}-${seriesIndex}-expanded`"
               :series-key-string="seriesObject.keyString"
               :highlights="highlights"
-              @legendHoverChanged="legendHoverChanged"
+              @legend-hover-changed="legendHoverChanged"
             />
           </tbody>
         </table>
@@ -108,6 +108,7 @@ export default {
       }
     }
   },
+  emits: ['legend-hover-changed', 'position', 'expanded'],
   data() {
     return {
       isLegendExpanded: false,
@@ -214,7 +215,7 @@ export default {
       this.$emit('expanded', this.isLegendExpanded);
     },
     legendHoverChanged(data) {
-      this.$emit('legendHoverChanged', data);
+      this.$emit('legend-hover-changed', data);
     },
     updatePosition() {
       this.$emit('position', this.legend.get('position'));
diff --git a/src/plugins/plot/legend/PlotLegendItemCollapsed.vue b/src/plugins/plot/legend/PlotLegendItemCollapsed.vue
index 6824442c5f..112b75d251 100644
--- a/src/plugins/plot/legend/PlotLegendItemCollapsed.vue
+++ b/src/plugins/plot/legend/PlotLegendItemCollapsed.vue
@@ -82,6 +82,7 @@ export default {
       }
     }
   },
+  emits: ['legend-hover-changed'],
   data() {
     return {
       isMissing: false,
@@ -216,7 +217,7 @@ export default {
     toggleHover(hover) {
       this.hover = hover;
       this.$emit(
-        'legendHoverChanged',
+        'legend-hover-changed',
         this.hover
           ? {
               seriesKey: this.seriesKeyString
diff --git a/src/plugins/plot/legend/PlotLegendItemExpanded.vue b/src/plugins/plot/legend/PlotLegendItemExpanded.vue
index f9c38b4b32..052ee147b8 100644
--- a/src/plugins/plot/legend/PlotLegendItemExpanded.vue
+++ b/src/plugins/plot/legend/PlotLegendItemExpanded.vue
@@ -97,6 +97,7 @@ export default {
       }
     }
   },
+  emits: ['legend-hover-changed'],
   data() {
     return {
       isMissing: false,
@@ -238,7 +239,7 @@ export default {
     },
     toggleHover(hover) {
       this.hover = hover;
-      this.$emit('legendHoverChanged', {
+      this.$emit('legend-hover-changed', {
         seriesKey: this.hover ? this.seriesKeyString : ''
       });
     },
diff --git a/src/plugins/plot/overlayPlot/OverlayPlotViewProvider.js b/src/plugins/plot/overlayPlot/OverlayPlotViewProvider.js
index 07227064ef..e37346e295 100644
--- a/src/plugins/plot/overlayPlot/OverlayPlotViewProvider.js
+++ b/src/plugins/plot/overlayPlot/OverlayPlotViewProvider.js
@@ -21,7 +21,7 @@
  *****************************************************************************/
 import mount from 'utils/mount';
 
-import Plot from '../Plot.vue';
+import Plot from '../PlotView.vue';
 
 export default function OverlayPlotViewProvider(openmct) {
   function isCompactView(objectPath) {
diff --git a/src/plugins/plot/overlayPlot/pluginSpec.js b/src/plugins/plot/overlayPlot/pluginSpec.js
index 283302dd35..0d07432094 100644
--- a/src/plugins/plot/overlayPlot/pluginSpec.js
+++ b/src/plugins/plot/overlayPlot/pluginSpec.js
@@ -32,7 +32,7 @@ import { nextTick } from 'vue';
 
 import configStore from '../configuration/ConfigStore';
 import PlotOptions from '../inspector/PlotOptions.vue';
-import Plot from '../Plot.vue';
+import Plot from '../PlotView.vue';
 import PlotVuePlugin from '../plugin';
 
 describe('the plugin', function () {
diff --git a/src/plugins/plot/pluginSpec.js b/src/plugins/plot/pluginSpec.js
index f34fcc61ba..868f4ff281 100644
--- a/src/plugins/plot/pluginSpec.js
+++ b/src/plugins/plot/pluginSpec.js
@@ -447,7 +447,7 @@ describe('the plugin', function () {
         expect(plotSeries.model.yKey).toBe('some-key');
       });
 
-      yAxisElement.$emit('yKeyChanged', TEST_KEY_ID, 1);
+      yAxisElement.$emit('y-key-changed', TEST_KEY_ID, 1);
       config.yAxis.seriesCollection.models.forEach((plotSeries) => {
         expect(plotSeries.model.yKey).toBe(TEST_KEY_ID);
       });
diff --git a/src/plugins/plot/stackedPlot/StackedPlot.vue b/src/plugins/plot/stackedPlot/StackedPlot.vue
index cadc45d776..d38ec05fd9 100644
--- a/src/plugins/plot/stackedPlot/StackedPlot.vue
+++ b/src/plugins/plot/stackedPlot/StackedPlot.vue
@@ -31,7 +31,7 @@
       :cursor-locked="!!lockHighlightPoint"
       :highlights="highlights"
       class="js-stacked-plot-legend"
-      @legendHoverChanged="legendHoverChanged"
+      @legend-hover-changed="legendHoverChanged"
       @expanded="updateExpanded"
       @position="updatePosition"
     />
@@ -48,13 +48,13 @@
         :show-limit-line-labels="showLimitLineLabels"
         :parent-y-tick-width="maxTickWidth"
         :hide-legend="showLegendsForChildren === false"
-        @plotYTickWidth="onYTickWidthChange"
-        @loadingUpdated="loadingUpdated"
-        @cursorGuide="onCursorGuideChange"
-        @gridLines="onGridLinesChange"
-        @lockHighlightPoint="lockHighlightPointUpdated"
+        @plot-y-tick-width="onYTickWidthChange"
+        @loading-updated="loadingUpdated"
+        @cursor-guide="onCursorGuideChange"
+        @grid-lines="onGridLinesChange"
+        @lock-highlight-point="lockHighlightPointUpdated"
         @highlights="highlightsUpdated"
-        @configLoaded="configLoadedForObject(objectWrapper.keyString)"
+        @config-loaded="configLoadedForObject(objectWrapper.keyString)"
       />
     </div>
   </div>
diff --git a/src/plugins/plot/stackedPlot/StackedPlotItem.vue b/src/plugins/plot/stackedPlot/StackedPlotItem.vue
index a734071fa6..cd29211a0a 100644
--- a/src/plugins/plot/stackedPlot/StackedPlotItem.vue
+++ b/src/plugins/plot/stackedPlot/StackedPlotItem.vue
@@ -29,7 +29,7 @@ import configStore from '@/plugins/plot/configuration/ConfigStore';
 import PlotConfigurationModel from '@/plugins/plot/configuration/PlotConfigurationModel';
 import stalenessMixin from '@/ui/mixins/staleness-mixin';
 
-import Plot from '../Plot.vue';
+import Plot from '../PlotView.vue';
 import conditionalStylesMixin from './mixins/objectStyles-mixin';
 
 export default {
@@ -89,6 +89,19 @@ export default {
       }
     }
   },
+  emits: [
+    'lock-highlight-point',
+    'highlights',
+    'config-loaded',
+    'cursor-guide',
+    'grid-lines',
+    'plot-y-tick-width'
+  ],
+  data() {
+    return {
+      staleObjects: []
+    };
+  },
   watch: {
     gridLines(newGridLines) {
       this.updateComponentProp('gridLines', newGridLines);
@@ -234,13 +247,13 @@ export default {
                       :options="options"
                       :parent-y-tick-width="parentYTickWidth"
                       :color-palette="colorPalette"
-                      @loadingUpdated="loadingUpdated"
-                      @configLoaded="onConfigLoaded"
-                      @lockHighlightPoint="onLockHighlightPointUpdated"
+                      @loading-updated="loadingUpdated"
+                      @config-loaded="onConfigLoaded"
+                      @lock-highlight-point="onLockHighlightPointUpdated"
                       @highlights="onHighlightsUpdated"
-                      @plotYTickWidth="onYTickWidthChange"
-                      @cursorGuide="onCursorGuideChange"
-                      @gridLines="onGridLinesChange"/>`
+                      @plot-y-tick-width="onYTickWidthChange"
+                      @cursor-guide="onCursorGuideChange"
+                      @grid-lines="onGridLinesChange"/>`
         },
         {
           app: this.openmct.app,
@@ -255,22 +268,22 @@ export default {
       }
     },
     onLockHighlightPointUpdated() {
-      this.$emit('lockHighlightPoint', ...arguments);
+      this.$emit('lock-highlight-point', ...arguments);
     },
     onHighlightsUpdated() {
       this.$emit('highlights', ...arguments);
     },
     onConfigLoaded() {
-      this.$emit('configLoaded', ...arguments);
+      this.$emit('config-loaded', ...arguments);
     },
     onYTickWidthChange() {
-      this.$emit('plotYTickWidth', ...arguments);
+      this.$emit('plot-y-tick-width', ...arguments);
     },
     onCursorGuideChange() {
-      this.$emit('cursorGuide', ...arguments);
+      this.$emit('cursor-guide', ...arguments);
     },
     onGridLinesChange() {
-      this.$emit('gridLines', ...arguments);
+      this.$emit('grid-lines', ...arguments);
     },
     setSelection() {
       let childContext = {};
diff --git a/src/plugins/tabs/components/Tabs.vue b/src/plugins/tabs/components/TabsComponent.vue
similarity index 100%
rename from src/plugins/tabs/components/Tabs.vue
rename to src/plugins/tabs/components/TabsComponent.vue
diff --git a/src/plugins/tabs/tabs.js b/src/plugins/tabs/tabs.js
index 392acf39d6..7da2e04ab0 100644
--- a/src/plugins/tabs/tabs.js
+++ b/src/plugins/tabs/tabs.js
@@ -22,7 +22,7 @@
 
 import mount from 'utils/mount';
 
-import TabsComponent from './components/Tabs.vue';
+import TabsComponent from './components/TabsComponent.vue';
 
 const TABS_KEY = 'tabs';
 export default class Tabs {
diff --git a/src/plugins/telemetryTable/TelemetryTableView.js b/src/plugins/telemetryTable/TelemetryTableView.js
index f734625602..b3321fa482 100644
--- a/src/plugins/telemetryTable/TelemetryTableView.js
+++ b/src/plugins/telemetryTable/TelemetryTableView.js
@@ -1,6 +1,27 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2023, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
 import mount from 'utils/mount';
 
-import TableComponent from './components/Table.vue';
+import TableComponent from './components/TableComponent.vue';
 import TelemetryTable from './TelemetryTable';
 
 export default class TelemetryTableView {
diff --git a/src/plugins/telemetryTable/components/SizingRow.vue b/src/plugins/telemetryTable/components/SizingRow.vue
index 4580e940db..496c7a787f 100644
--- a/src/plugins/telemetryTable/components/SizingRow.vue
+++ b/src/plugins/telemetryTable/components/SizingRow.vue
@@ -33,6 +33,7 @@ export default {
       default: false
     }
   },
+  emits: ['change-height'],
   watch: {
     isEditing: function (isEditing) {
       if (isEditing) {
diff --git a/src/plugins/telemetryTable/components/TableColumnHeader.vue b/src/plugins/telemetryTable/components/TableColumnHeader.vue
index 085ad06fb3..3fbcc1443a 100644
--- a/src/plugins/telemetryTable/components/TableColumnHeader.vue
+++ b/src/plugins/telemetryTable/components/TableColumnHeader.vue
@@ -79,6 +79,14 @@ export default {
     hotzone: Boolean,
     isEditing: Boolean
   },
+  emits: [
+    'resize-column-end',
+    'resize-column',
+    'drop-target-offset-changed',
+    'drop-target-active',
+    'reorder-column',
+    'sort'
+  ],
   computed: {
     isSortable() {
       return this.sortOptions !== undefined;
@@ -103,14 +111,14 @@ export default {
       event.preventDefault();
       event.stopPropagation();
 
-      this.$emit('resizeColumnEnd');
+      this.$emit('resize-column-end');
     },
     resizeColumn(event) {
       let delta = event.clientX - this.resizeStartX;
       let newWidth = this.resizeStartWidth + delta;
       let minWidth = parseInt(window.getComputedStyle(this.$el).minWidth, 10);
       if (newWidth > minWidth) {
-        this.$emit('resizeColumn', this.headerKey, newWidth);
+        this.$emit('resize-column', this.headerKey, newWidth);
       }
     },
     columnMoveStart(event) {
@@ -138,11 +146,11 @@ export default {
         dropOffsetLeft = element.offsetLeft + element.offsetWidth;
       }
 
-      this.$emit('dropTargetOffsetChanged', dropOffsetLeft);
-      this.$emit('dropTargetActive', true);
+      this.$emit('drop-target-offset-changed', dropOffsetLeft);
+      this.$emit('drop-target-active', true);
     },
     hideDropTarget() {
-      this.$emit('dropTargetActive', false);
+      this.$emit('drop-target-active', false);
     },
     columnMoveEnd(event) {
       if (this.isColumnMoveEvent(event)) {
@@ -159,7 +167,7 @@ export default {
         }
 
         if (toIndex !== fromIndex) {
-          this.$emit('reorderColumn', fromIndex, toIndex);
+          this.$emit('reorder-column', fromIndex, toIndex);
         }
       }
     },
diff --git a/src/plugins/telemetryTable/components/Table.vue b/src/plugins/telemetryTable/components/TableComponent.vue
similarity index 97%
rename from src/plugins/telemetryTable/components/Table.vue
rename to src/plugins/telemetryTable/components/TableComponent.vue
index b86e8c62c5..a8fca6c4a4 100644
--- a/src/plugins/telemetryTable/components/Table.vue
+++ b/src/plugins/telemetryTable/components/TableComponent.vue
@@ -157,11 +157,11 @@
                 :sort-options="sortOptions"
                 :is-editing="isEditing"
                 @sort="allowSorting && sortBy(key)"
-                @resizeColumn="resizeColumn"
-                @dropTargetOffsetChanged="setDropTargetOffset"
-                @dropTargetActive="dropTargetActive"
-                @reorderColumn="reorderColumn"
-                @resizeColumnEnd="updateConfiguredColumnWidths"
+                @resize-column="resizeColumn"
+                @drop-target-offset-changed="setDropTargetOffset"
+                @drop-target-active="dropTargetActive"
+                @reorder-column="reorderColumn"
+                @resize-column-end="updateConfiguredColumnWidths"
               >
                 <span class="c-telemetry-table__headers__label">{{ title }}</span>
               </table-column-header>
@@ -174,11 +174,11 @@
                 :header-index="headerIndex"
                 :column-width="columnWidths[key]"
                 :is-editing="isEditing"
-                @resizeColumn="resizeColumn"
-                @dropTargetOffsetChanged="setDropTargetOffset"
-                @dropTargetActive="dropTargetActive"
-                @reorderColumn="reorderColumn"
-                @resizeColumnEnd="updateConfiguredColumnWidths"
+                @resize-column="resizeColumn"
+                @drop-target-offset-changed="setDropTargetOffset"
+                @drop-target-active="dropTargetActive"
+                @reorder-column="reorderColumn"
+                @resize-column-end="updateConfiguredColumnWidths"
               >
                 <search
                   v-model="filters[key]"
@@ -227,8 +227,8 @@
               :marked="row.marked"
               @mark="markRow"
               @unmark="unmarkRow"
-              @markMultipleConcurrent="markMultipleConcurrentRows"
-              @rowContextClick="updateViewContext"
+              @mark-multiple-concurrent="markMultipleConcurrentRows"
+              @row-context-click="updateViewContext"
             />
           </tbody>
         </table>
@@ -259,7 +259,7 @@
           :column-widths="configuredColumnWidths"
           :row="sizingRowData"
           :object-path="objectPath"
-          @rowContextClick="updateViewContext"
+          @row-context-click="updateViewContext"
         />
       </table>
       <table-footer-indicator
@@ -275,11 +275,12 @@
 <script>
 import _ from 'lodash';
 import { toRaw } from 'vue';
+
 import stalenessMixin from '@/ui/mixins/staleness-mixin';
 
 import CSVExporter from '../../../exporters/CSVExporter.js';
 import ProgressBar from '../../../ui/components/ProgressBar.vue';
-import Search from '../../../ui/components/Search.vue';
+import Search from '../../../ui/components/SearchComponent.vue';
 import ToggleSwitch from '../../../ui/components/ToggleSwitch.vue';
 import SizingRow from './SizingRow.vue';
 import TableColumnHeader from './TableColumnHeader.vue';
@@ -338,6 +339,7 @@ export default {
       default: false
     }
   },
+  emits: ['marked-rows-updated', 'filter'],
   data() {
     let configuration = this.table.configuration.getConfiguration();
 
diff --git a/src/plugins/telemetryTable/components/TableRow.vue b/src/plugins/telemetryTable/components/TableRow.vue
index e5562e9e86..2157def619 100644
--- a/src/plugins/telemetryTable/components/TableRow.vue
+++ b/src/plugins/telemetryTable/components/TableRow.vue
@@ -31,11 +31,7 @@
       v-for="(title, key) in headers"
       :key="key"
       :column-key="key"
-      :style="
-        columnWidths[key] === undefined
-          ? {}
-          : { width: columnWidths[key] + 'px', 'max-width': columnWidths[key] + 'px' }
-      "
+      :style="rowStyle(key)"
       :class="[cellLimitClasses[key], selectableColumns[key] ? 'is-selectable' : '']"
       :object-path="objectPath"
       :row="row"
@@ -89,6 +85,7 @@ export default {
       default: false
     }
   },
+  emits: ['mark-multiple-concurrent', 'unmark', 'mark', 'row-context-click'],
   data: function () {
     return {
       rowTop: (this.rowOffset + this.rowIndex) * this.rowHeight + 'px',
@@ -145,7 +142,7 @@ export default {
       }
 
       if (event.shiftKey) {
-        this.$emit('markMultipleConcurrent', this.rowIndex);
+        this.$emit('mark-multiple-concurrent', this.rowIndex);
       } else {
         if (this.marked) {
           this.$emit('unmark', this.rowIndex, keyCtrlModifier);
@@ -182,6 +179,11 @@ export default {
     getDatum() {
       return this.row.fullDatum;
     },
+    rowStyle(key) {
+      return this.columnWidths[key] === undefined
+        ? {}
+        : { width: this.columnWidths[key] + 'px', 'max-width': this.columnWidths[key] + 'px' };
+    },
     showContextMenu: async function (event) {
       event.preventDefault();
 
@@ -212,7 +214,7 @@ export default {
       }
     },
     updateViewContext() {
-      this.$emit('rowContextClick', {
+      this.$emit('row-context-click', {
         viewHistoricalData: true,
         viewDatumAction: true,
         getDatum: this.getDatum
diff --git a/src/plugins/timeConductor/ConductorAxis.vue b/src/plugins/timeConductor/ConductorAxis.vue
index b06f330b7a..71672be46d 100644
--- a/src/plugins/timeConductor/ConductorAxis.vue
+++ b/src/plugins/timeConductor/ConductorAxis.vue
@@ -55,6 +55,7 @@ export default {
       required: true
     }
   },
+  emits: ['pan-axis', 'end-pan', 'zoom-axis', 'end-zoom'],
   data() {
     return {
       inPanMode: false,
@@ -206,11 +207,11 @@ export default {
     },
     pan() {
       const panBounds = this.getPanBounds();
-      this.$emit('panAxis', panBounds);
+      this.$emit('pan-axis', panBounds);
     },
     endPan() {
       const panBounds = this.isChangingViewBounds() ? this.getPanBounds() : undefined;
-      this.$emit('endPan', panBounds);
+      this.$emit('end-pan', panBounds);
       this.inPanMode = false;
     },
     getPanBounds() {
@@ -232,7 +233,7 @@ export default {
         left: `${this.dragStartX - this.left}px`
       };
 
-      this.$emit('zoomAxis', {
+      this.$emit('zoom-axis', {
         start: x,
         end: x
       });
@@ -245,7 +246,7 @@ export default {
         width: `${zoomRange.end - zoomRange.start}px`
       };
 
-      this.$emit('zoomAxis', {
+      this.$emit('zoom-axis', {
         start: this.scaleToBounds(zoomRange.start),
         end: this.scaleToBounds(zoomRange.end)
       });
@@ -261,7 +262,7 @@ export default {
       }
 
       this.zoomStyle = {};
-      this.$emit('endZoom', zoomBounds);
+      this.$emit('end-zoom', zoomBounds);
     },
     getZoomRange() {
       const leftBound = this.left;
diff --git a/src/plugins/timeConductor/ConductorClock.vue b/src/plugins/timeConductor/ConductorClock.vue
index 7463203618..81c5c0562b 100644
--- a/src/plugins/timeConductor/ConductorClock.vue
+++ b/src/plugins/timeConductor/ConductorClock.vue
@@ -58,6 +58,7 @@ export default {
       }
     }
   },
+  emits: ['clock-updated'],
   data() {
     const activeClock = this.getActiveClock();
 
@@ -109,7 +110,7 @@ export default {
       const offsets = this.openmct.time.getClockOffsets() ?? configuration.clockOffsets;
       option.offsets = offsets;
 
-      this.$emit('clockUpdated', option);
+      this.$emit('clock-updated', option);
     },
     getMatchingConfig(options) {
       const matchers = {
diff --git a/src/plugins/timeConductor/Conductor.vue b/src/plugins/timeConductor/ConductorComponent.vue
similarity index 96%
rename from src/plugins/timeConductor/Conductor.vue
rename to src/plugins/timeConductor/ConductorComponent.vue
index ec0e25d758..f39c6d5212 100644
--- a/src/plugins/timeConductor/Conductor.vue
+++ b/src/plugins/timeConductor/ConductorComponent.vue
@@ -44,10 +44,10 @@
       :view-bounds="viewBounds"
       :is-fixed="isFixed"
       :alt-pressed="altPressed"
-      @endPan="endPan"
-      @endZoom="endZoom"
-      @panAxis="pan"
-      @zoomAxis="zoom"
+      @end-pan="endPan"
+      @end-zoom="endZoom"
+      @pan-axis="pan"
+      @zoom-axis="zoom"
     />
     <div
       role="button"
@@ -62,11 +62,11 @@
       :position-x="positionX"
       :position-y="positionY"
       :is-fixed="isFixed"
-      @popupLoaded="initializePopup"
-      @modeUpdated="saveMode"
-      @clockUpdated="saveClock"
-      @fixedBoundsUpdated="saveFixedBounds"
-      @clockOffsetsUpdated="saveClockOffsets"
+      @popup-loaded="initializePopup"
+      @mode-updated="saveMode"
+      @clock-updated="saveClock"
+      @fixed-bounds-updated="saveFixedBounds"
+      @clock-offsets-updated="saveClockOffsets"
       @dismiss="clearPopup"
     />
   </div>
diff --git a/src/plugins/timeConductor/ConductorInputsFixed.vue b/src/plugins/timeConductor/ConductorInputsFixed.vue
index 6dcb65cb6e..15d130528a 100644
--- a/src/plugins/timeConductor/ConductorInputsFixed.vue
+++ b/src/plugins/timeConductor/ConductorInputsFixed.vue
@@ -84,6 +84,7 @@ export default {
       }
     }
   },
+  emits: ['bounds-updated', 'dismiss-inputs-fixed'],
   data() {
     const timeSystem = this.openmct.time.getTimeSystem();
     const timeFormatter = this.getFormatter(timeSystem.timeFormat);
@@ -166,13 +167,13 @@ export default {
       }).formatter;
     },
     setBoundsFromView(bounds) {
-      this.$emit('boundsUpdated', {
+      this.$emit('bounds-updated', {
         start: bounds.start,
         end: bounds.end
       });
     },
     dismiss() {
-      this.$emit('dismissInputsFixed');
+      this.$emit('dismiss-inputs-fixed');
     }
   }
 };
diff --git a/src/plugins/timeConductor/ConductorInputsRealtime.vue b/src/plugins/timeConductor/ConductorInputsRealtime.vue
index 189048fb84..bc0c8dba81 100644
--- a/src/plugins/timeConductor/ConductorInputsRealtime.vue
+++ b/src/plugins/timeConductor/ConductorInputsRealtime.vue
@@ -93,6 +93,7 @@ export default {
       }
     }
   },
+  emits: ['offsets-updated', 'dismiss-inputs-realtime'],
   data() {
     const timeSystem = this.openmct.time.getTimeSystem();
     const durationFormatter = this.getFormatter(
@@ -240,13 +241,13 @@ export default {
       let startOffset = 0 - this.durationFormatter.parse(this.offsets.start);
       let endOffset = this.durationFormatter.parse(this.offsets.end);
 
-      this.$emit('offsetsUpdated', {
+      this.$emit('offsets-updated', {
         start: startOffset,
         end: endOffset
       });
     },
     dismiss() {
-      this.$emit('dismissInputsRealtime');
+      this.$emit('dismiss-inputs-realtime');
     },
     copy(object) {
       return JSON.parse(JSON.stringify(object));
diff --git a/src/plugins/timeConductor/ConductorMode.vue b/src/plugins/timeConductor/ConductorMode.vue
index 20dfd41911..b4edb83f95 100644
--- a/src/plugins/timeConductor/ConductorMode.vue
+++ b/src/plugins/timeConductor/ConductorMode.vue
@@ -64,6 +64,7 @@ export default {
       }
     }
   },
+  emits: ['mode-updated'],
   data() {
     const mode = this.openmct.time.getMode();
 
@@ -101,7 +102,7 @@ export default {
     setMode(mode) {
       this.setViewFromMode(mode);
 
-      this.$emit('modeUpdated', mode);
+      this.$emit('mode-updated', mode);
     }
   }
 };
diff --git a/src/plugins/timeConductor/ConductorPopUp.vue b/src/plugins/timeConductor/ConductorPopUp.vue
index d70c75d8ff..10ea1c6d05 100644
--- a/src/plugins/timeConductor/ConductorPopUp.vue
+++ b/src/plugins/timeConductor/ConductorPopUp.vue
@@ -6,14 +6,14 @@
         class="c-conductor__mode-select"
         title="Sets the Time Conductor's mode."
         :mode="timeOptionMode"
-        @independentModeUpdated="saveIndependentMode"
+        @independent-mode-updated="saveIndependentMode"
       />
       <ConductorMode
         v-else
         class="c-conductor__mode-select"
         title="Sets the Time Conductor's mode."
         :button-css-class="'c-icon-button'"
-        @modeUpdated="saveMode"
+        @mode-updated="saveMode"
       />
       <IndependentClock
         v-if="isIndependent"
@@ -21,14 +21,14 @@
         title="Sets the Time Conductor's clock."
         :clock="timeOptionClock"
         :button-css-class="'c-icon-button'"
-        @independentClockUpdated="saveIndependentClock"
+        @independent-clock-updated="saveIndependentClock"
       />
       <ConductorClock
         v-else
         class="c-conductor__mode-select"
         title="Sets the Time Conductor's clock."
         :button-css-class="'c-icon-button'"
-        @clockUpdated="saveClock"
+        @clock-updated="saveClock"
       />
       <!-- TODO: Time system and history must work even with ITC later -->
       <ConductorTimeSystem
@@ -48,15 +48,15 @@
       v-if="isFixed"
       :input-bounds="bounds"
       :object-path="objectPath"
-      @boundsUpdated="saveFixedBounds"
-      @dismissInputsFixed="dismiss"
+      @bounds-updated="saveFixedBounds"
+      @dismiss-inputs-fixed="dismiss"
     />
     <conductor-inputs-realtime
       v-else
       :input-bounds="bounds"
       :object-path="objectPath"
-      @offsetsUpdated="saveClockOffsets"
-      @dismissInputsRealtime="dismiss"
+      @offsets-updated="saveClockOffsets"
+      @dismiss-inputs-realtime="dismiss"
     />
   </div>
 </template>
@@ -128,6 +128,16 @@ export default {
       }
     }
   },
+  emits: [
+    'popup-loaded',
+    'dismiss',
+    'independent-clock-updated',
+    'fixed-bounds-updated',
+    'clock-offsets-updated',
+    'clock-updated',
+    'mode-updated',
+    'independent-mode-updated'
+  ],
   data() {
     const bounds = this.openmct.time.getBounds();
     const timeSystem = this.openmct.time.getTimeSystem();
@@ -181,7 +191,7 @@ export default {
     }
   },
   mounted() {
-    this.$emit('popupLoaded');
+    this.$emit('popup-loaded');
     this.setTimeContext();
   },
   beforeUnmount() {
@@ -216,22 +226,22 @@ export default {
       }
     },
     saveFixedBounds(bounds) {
-      this.$emit('fixedBoundsUpdated', bounds);
+      this.$emit('fixed-bounds-updated', bounds);
     },
     saveClockOffsets(offsets) {
-      this.$emit('clockOffsetsUpdated', offsets);
+      this.$emit('clock-offsets-updated', offsets);
     },
     saveClock(clockOptions) {
-      this.$emit('clockUpdated', clockOptions);
+      this.$emit('clock-updated', clockOptions);
     },
     saveMode(mode) {
-      this.$emit('modeUpdated', mode);
+      this.$emit('mode-updated', mode);
     },
     saveIndependentMode(mode) {
-      this.$emit('independentModeUpdated', mode);
+      this.$emit('independent-mode-updated', mode);
     },
     saveIndependentClock(clockKey) {
-      this.$emit('independentClockUpdated', clockKey);
+      this.$emit('independent-clock-updated', clockKey);
     },
     dismiss() {
       this.$emit('dismiss');
diff --git a/src/plugins/timeConductor/DatePicker.vue b/src/plugins/timeConductor/DatePicker.vue
index 8306225adf..48dbdae625 100644
--- a/src/plugins/timeConductor/DatePicker.vue
+++ b/src/plugins/timeConductor/DatePicker.vue
@@ -118,6 +118,7 @@ export default {
       }
     }
   },
+  emits: ['date-selected'],
   data: function () {
     return {
       picker: {
diff --git a/src/plugins/timeConductor/TimePopupFixed.vue b/src/plugins/timeConductor/TimePopupFixed.vue
index abc7d5cd6e..3eb1912424 100644
--- a/src/plugins/timeConductor/TimePopupFixed.vue
+++ b/src/plugins/timeConductor/TimePopupFixed.vue
@@ -115,6 +115,7 @@ export default {
       required: true
     }
   },
+  emits: ['update', 'dismiss'],
   data() {
     let timeSystem = this.openmct.time.getTimeSystem();
     let durationFormatter = this.getFormatter(
diff --git a/src/plugins/timeConductor/TimePopupRealtime.vue b/src/plugins/timeConductor/TimePopupRealtime.vue
index 6c7be6b440..248995dea4 100644
--- a/src/plugins/timeConductor/TimePopupRealtime.vue
+++ b/src/plugins/timeConductor/TimePopupRealtime.vue
@@ -150,6 +150,7 @@ export default {
       required: true
     }
   },
+  emits: ['update', 'dismiss'],
   data() {
     return {
       startInputHrs: '00',
diff --git a/src/plugins/timeConductor/independent/IndependentClock.vue b/src/plugins/timeConductor/independent/IndependentClock.vue
index e7c1298e59..869e0206e5 100644
--- a/src/plugins/timeConductor/independent/IndependentClock.vue
+++ b/src/plugins/timeConductor/independent/IndependentClock.vue
@@ -57,6 +57,7 @@ export default {
       }
     }
   },
+  emits: ['independent-clock-updated'],
   data() {
     const activeClock = this.getActiveClock();
 
@@ -114,7 +115,7 @@ export default {
     setClock(clockKey) {
       this.setViewFromClock(clockKey);
 
-      this.$emit('independentClockUpdated', clockKey);
+      this.$emit('independent-clock-updated', clockKey);
     },
     setViewFromClock(clockOrKey) {
       let clock = clockOrKey;
diff --git a/src/plugins/timeConductor/independent/IndependentMode.vue b/src/plugins/timeConductor/independent/IndependentMode.vue
index 9b82f9223b..ec8b1fb3bf 100644
--- a/src/plugins/timeConductor/independent/IndependentMode.vue
+++ b/src/plugins/timeConductor/independent/IndependentMode.vue
@@ -55,6 +55,7 @@ export default {
       }
     }
   },
+  emits: ['independent-mode-updated'],
   data: function () {
     return {
       selectedMode: this.getModeMetadata(this.mode),
@@ -94,7 +95,7 @@ export default {
     setMode(mode) {
       this.setViewFromMode(mode);
 
-      this.$emit('independentModeUpdated', mode);
+      this.$emit('independent-mode-updated', mode);
     }
   }
 };
diff --git a/src/plugins/timeConductor/independent/IndependentTimeConductor.vue b/src/plugins/timeConductor/independent/IndependentTimeConductor.vue
index 7103025c34..42cf887dfe 100644
--- a/src/plugins/timeConductor/independent/IndependentTimeConductor.vue
+++ b/src/plugins/timeConductor/independent/IndependentTimeConductor.vue
@@ -70,11 +70,11 @@
       :bottom="true"
       :position-x="positionX"
       :position-y="positionY"
-      @popupLoaded="initializePopup"
-      @independentModeUpdated="saveMode"
-      @independentClockUpdated="saveClock"
-      @fixedBoundsUpdated="saveFixedBounds"
-      @clockOffsetsUpdated="saveClockOffsets"
+      @popup-loaded="initializePopup"
+      @independent-mode-updated="saveMode"
+      @independent-clock-updated="saveClock"
+      @fixed-bounds-updated="saveFixedBounds"
+      @clock-offsets-updated="saveClockOffsets"
       @dismiss="clearPopup"
     />
   </div>
@@ -116,6 +116,7 @@ export default {
       required: true
     }
   },
+  emits: ['updated'],
   data() {
     const fixedOffsets = this.openmct.time.getBounds();
     const clockOffsets = this.openmct.time.getClockOffsets();
diff --git a/src/plugins/timeConductor/plugin.js b/src/plugins/timeConductor/plugin.js
index e10cf0bb72..6dbab7074a 100644
--- a/src/plugins/timeConductor/plugin.js
+++ b/src/plugins/timeConductor/plugin.js
@@ -23,7 +23,7 @@
 import { markRaw } from 'vue';
 
 import { FIXED_MODE_KEY, REALTIME_MODE_KEY } from '../../api/time/constants';
-import Conductor from './Conductor.vue';
+import Conductor from './ConductorComponent.vue';
 
 function isTruthy(a) {
   return Boolean(a);
diff --git a/src/plugins/timelist/Timelist.vue b/src/plugins/timelist/TimelistComponent.vue
similarity index 100%
rename from src/plugins/timelist/Timelist.vue
rename to src/plugins/timelist/TimelistComponent.vue
diff --git a/src/plugins/timelist/TimelistViewProvider.js b/src/plugins/timelist/TimelistViewProvider.js
index ebba8e6af0..b4813282e0 100644
--- a/src/plugins/timelist/TimelistViewProvider.js
+++ b/src/plugins/timelist/TimelistViewProvider.js
@@ -23,7 +23,7 @@
 import mount from 'utils/mount';
 
 import { TIMELIST_TYPE } from './constants';
-import Timelist from './Timelist.vue';
+import Timelist from './TimelistComponent.vue';
 
 export default function TimelistViewProvider(openmct) {
   return {
diff --git a/src/plugins/timelist/inspector/EventProperties.vue b/src/plugins/timelist/inspector/EventProperties.vue
index 0e98f3b890..2d17073a17 100644
--- a/src/plugins/timelist/inspector/EventProperties.vue
+++ b/src/plugins/timelist/inspector/EventProperties.vue
@@ -73,6 +73,7 @@ export default {
       required: true
     }
   },
+  emits: ['updated'],
   data() {
     return {
       index: this.domainObject.configuration[`${this.prefix}Index`],
diff --git a/src/plugins/timelist/inspector/Filtering.vue b/src/plugins/timelist/inspector/FilteringComponent.vue
similarity index 99%
rename from src/plugins/timelist/inspector/Filtering.vue
rename to src/plugins/timelist/inspector/FilteringComponent.vue
index 87a2409991..996a5c91f5 100644
--- a/src/plugins/timelist/inspector/Filtering.vue
+++ b/src/plugins/timelist/inspector/FilteringComponent.vue
@@ -43,6 +43,7 @@
 <script>
 export default {
   inject: ['openmct', 'domainObject'],
+  emits: ['updated'],
   data() {
     return {
       isEditing: this.openmct.editor.isEditing(),
diff --git a/src/plugins/timelist/inspector/TimelistPropertiesView.vue b/src/plugins/timelist/inspector/TimelistPropertiesView.vue
index 5637b08e13..30dc2db066 100644
--- a/src/plugins/timelist/inspector/TimelistPropertiesView.vue
+++ b/src/plugins/timelist/inspector/TimelistPropertiesView.vue
@@ -69,7 +69,7 @@
 <script>
 import { SORT_ORDER_OPTIONS } from '../constants';
 import EventProperties from './EventProperties.vue';
-import Filtering from './Filtering.vue';
+import Filtering from './FilteringComponent.vue';
 
 const EVENT_TYPES = [
   {
diff --git a/src/plugins/timer/TimerViewProvider.js b/src/plugins/timer/TimerViewProvider.js
index 4b6807b4e6..0b684f2607 100644
--- a/src/plugins/timer/TimerViewProvider.js
+++ b/src/plugins/timer/TimerViewProvider.js
@@ -22,7 +22,7 @@
 
 import mount from 'utils/mount';
 
-import Timer from './components/Timer.vue';
+import Timer from './components/TimerComponent.vue';
 
 export default function TimerViewProvider(openmct) {
   return {
diff --git a/src/plugins/timer/components/Timer.vue b/src/plugins/timer/components/TimerComponent.vue
similarity index 100%
rename from src/plugins/timer/components/Timer.vue
rename to src/plugins/timer/components/TimerComponent.vue
diff --git a/src/plugins/viewLargeAction/viewLargeAction.js b/src/plugins/viewLargeAction/viewLargeAction.js
index 1cbe6d4644..46d497570c 100644
--- a/src/plugins/viewLargeAction/viewLargeAction.js
+++ b/src/plugins/viewLargeAction/viewLargeAction.js
@@ -22,7 +22,7 @@
 
 import mount from 'utils/mount';
 
-import Preview from '@/ui/preview/Preview.vue';
+import PreviewContainer from '@/ui/preview/PreviewContainer.vue';
 
 export default class ViewLargeAction {
   constructor(openmct) {
@@ -81,7 +81,7 @@ export default class ViewLargeAction {
     const { vNode, destroy } = mount(
       {
         components: {
-          Preview
+          PreviewContainer
         },
         provide: {
           openmct: this.openmct,
@@ -92,7 +92,7 @@ export default class ViewLargeAction {
             view
           };
         },
-        template: '<Preview :existing-view="view"></Preview>'
+        template: '<preview-container :existing-view="view"></preview-container>'
       },
       {
         app: this.openmct.app
diff --git a/src/ui/color/ColorSwatch.vue b/src/ui/color/ColorSwatch.vue
index 95a62d38ee..1a58ee0459 100644
--- a/src/ui/color/ColorSwatch.vue
+++ b/src/ui/color/ColorSwatch.vue
@@ -89,6 +89,7 @@ export default {
       }
     }
   },
+  emits: ['color-set'],
   data() {
     return {
       swatchActive: false,
@@ -127,7 +128,7 @@ export default {
       this.isEditing = isEditing;
     },
     setColor(chosenColor) {
-      this.$emit('colorSet', chosenColor);
+      this.$emit('color-set', chosenColor);
     },
     toggleSwatch() {
       this.swatchActive = !this.swatchActive;
diff --git a/src/ui/components/List/ListHeader.vue b/src/ui/components/List/ListHeader.vue
index e75b623514..98ce21cfee 100644
--- a/src/ui/components/List/ListHeader.vue
+++ b/src/ui/components/List/ListHeader.vue
@@ -64,6 +64,7 @@ export default {
       }
     }
   },
+  emits: ['sort'],
   methods: {
     sort(property, direction) {
       this.$emit('sort', {
diff --git a/src/ui/components/ObjectView.vue b/src/ui/components/ObjectView.vue
index f51005f929..58a23b61e9 100644
--- a/src/ui/components/ObjectView.vue
+++ b/src/ui/components/ObjectView.vue
@@ -63,6 +63,7 @@ export default {
       default: ''
     }
   },
+  emits: ['change-action-collection'],
   data() {
     return {
       domainObject: this.defaultObject
diff --git a/src/ui/components/Search.vue b/src/ui/components/SearchComponent.vue
similarity index 74%
rename from src/ui/components/Search.vue
rename to src/ui/components/SearchComponent.vue
index 8c62c87996..63113224c3 100644
--- a/src/ui/components/Search.vue
+++ b/src/ui/components/SearchComponent.vue
@@ -20,7 +20,7 @@
  at runtime from the About dialog for additional information.
 -->
 <template>
-  <div class="c-search" :class="{ 'is-active': active === true }">
+  <div class="c-search" :class="{ 'is-active': active }">
     <input
       v-bind="$attrs"
       class="c-search__input"
@@ -28,15 +28,15 @@
       tabindex="10000"
       type="search"
       :value="value"
-      v-on="inputListeners"
+      @input="handleInput"
+      @click="handleClick"
     />
-    <a class="c-search__clear-input icon-x-in-circle" @click="clearInput"></a>
+    <a v-if="value" class="c-search__clear-input icon-x-in-circle" @click="clearInput"></a>
     <slot></slot>
   </div>
 </template>
 
 <script>
-/* Emits input and clear events */
 export default {
   inheritAttrs: false,
   props: {
@@ -45,28 +45,15 @@ export default {
       default: ''
     }
   },
+  emits: ['input', 'clear', 'click'],
   data: function () {
     return {
       active: false
     };
   },
-  computed: {
-    inputListeners: function () {
-      let vm = this;
-
-      return Object.assign({}, this.$listeners, {
-        input: function (event) {
-          vm.$emit('input', event.target.value);
-          vm.active = event.target.value.length > 0;
-        }
-      });
-    }
-  },
   watch: {
     value(inputValue) {
-      if (!inputValue.length) {
-        this.clearInput();
-      }
+      this.active = inputValue.length > 0;
     }
   },
   methods: {
@@ -74,6 +61,12 @@ export default {
       // Clear the user's input and set 'active' to false
       this.$emit('clear', '');
       this.active = false;
+    },
+    handleInput(event) {
+      this.$emit('input', event.target.value);
+    },
+    handleClick() {
+      this.$emit('click');
     }
   }
 };
diff --git a/src/ui/components/ToggleSwitch.vue b/src/ui/components/ToggleSwitch.vue
index 0c9fca7f36..da82f46326 100644
--- a/src/ui/components/ToggleSwitch.vue
+++ b/src/ui/components/ToggleSwitch.vue
@@ -51,6 +51,7 @@ export default {
     },
     checked: Boolean
   },
+  emits: ['change'],
   methods: {
     onUserSelect(event) {
       this.$emit('change', event.target.checked);
diff --git a/src/ui/components/ViewControl.vue b/src/ui/components/ViewControl.vue
index 0b3bc54284..e62a45dc1a 100644
--- a/src/ui/components/ViewControl.vue
+++ b/src/ui/components/ViewControl.vue
@@ -53,6 +53,7 @@ export default {
       default: () => {}
     }
   },
+  emits: ['input'],
   computed: {
     ariaLabelValue() {
       const name = this.domainObject.name ? ` ${this.domainObject.name}` : '';
diff --git a/src/ui/inspector/Inspector.vue b/src/ui/inspector/InspectorPanel.vue
similarity index 100%
rename from src/ui/inspector/Inspector.vue
rename to src/ui/inspector/InspectorPanel.vue
diff --git a/src/ui/inspector/InspectorTabs.vue b/src/ui/inspector/InspectorTabs.vue
index 6f90a538d4..0c9be2ec61 100644
--- a/src/ui/inspector/InspectorTabs.vue
+++ b/src/ui/inspector/InspectorTabs.vue
@@ -45,6 +45,7 @@ export default {
       required: true
     }
   },
+  emits: ['select-tab'],
   data() {
     return {
       tabs: [],
diff --git a/src/ui/layout/Layout.vue b/src/ui/layout/AppLayout.vue
similarity index 94%
rename from src/ui/layout/Layout.vue
rename to src/ui/layout/AppLayout.vue
index 10b358464a..c3e2a7b8d3 100644
--- a/src/ui/layout/Layout.vue
+++ b/src/ui/layout/AppLayout.vue
@@ -37,7 +37,7 @@
     >
       <CreateButton class="l-shell__create-button" />
       <GrandSearch ref="grand-search" />
-      <indicators class="l-shell__head-section l-shell__indicators" />
+      <StatusIndicators class="l-shell__head-section l-shell__indicators" />
       <button
         class="l-shell__head__collapse-button c-icon-button"
         :class="
@@ -105,8 +105,8 @@
             <RecentObjectsList
               ref="recentObjectsList"
               class="l-shell__tree"
-              @openAndScrollTo="openAndScrollTo($event)"
-              @setClearButtonDisabled="setClearButtonDisabled"
+              @open-and-scroll-to="openAndScrollTo($event)"
+              @set-clear-button-disabled="setClearButtonDisabled"
             />
             <template #controls>
               <button
@@ -154,18 +154,18 @@
 
 <script>
 import ObjectView from '../components/ObjectView.vue';
-import Inspector from '../inspector/Inspector.vue';
-import Toolbar from '../toolbar/Toolbar.vue';
+import Inspector from '../inspector/InspectorPanel.vue';
+import Toolbar from '../toolbar/ToolbarContainer.vue';
 import AppLogo from './AppLogo.vue';
 import BrowseBar from './BrowseBar.vue';
 import CreateButton from './CreateButton.vue';
 import MctTree from './MctTree.vue';
-import Multipane from './Multipane.vue';
-import Pane from './Pane.vue';
+import Multipane from './MultipaneContainer.vue';
+import Pane from './PaneContainer.vue';
 import RecentObjectsList from './RecentObjectsList.vue';
 import GrandSearch from './search/GrandSearch.vue';
-import Indicators from './status-bar/Indicators.vue';
 import NotificationBanner from './status-bar/NotificationBanner.vue';
+import StatusIndicators from './status-bar/StatusIndicators.vue';
 
 export default {
   components: {
@@ -179,7 +179,7 @@ export default {
     BrowseBar,
     Toolbar,
     AppLogo,
-    Indicators,
+    StatusIndicators,
     NotificationBanner,
     RecentObjectsList
   },
diff --git a/src/ui/layout/LayoutSpec.js b/src/ui/layout/LayoutSpec.js
index e13853a816..b068973c24 100644
--- a/src/ui/layout/LayoutSpec.js
+++ b/src/ui/layout/LayoutSpec.js
@@ -24,7 +24,7 @@ import mount from 'utils/mount';
 import { createOpenMct, resetApplicationState } from 'utils/testing';
 import Vue from 'vue';
 
-import Layout from './Layout.vue';
+import Layout from './AppLayout.vue';
 
 describe('Open MCT Layout:', () => {
   let openmct;
diff --git a/src/ui/layout/MctTree.vue b/src/ui/layout/MctTree.vue
index 8c86a0e5c0..74f3bbd613 100644
--- a/src/ui/layout/MctTree.vue
+++ b/src/ui/layout/MctTree.vue
@@ -118,7 +118,7 @@
 import _ from 'lodash';
 import { markRaw, reactive } from 'vue';
 
-import Search from '../components/Search.vue';
+import Search from '../components/SearchComponent.vue';
 import TreeItem from './TreeItem.vue';
 
 const ITEM_BUFFER = 25;
@@ -158,6 +158,7 @@ export default {
       required: false
     }
   },
+  emits: ['tree-item-selection'],
   data() {
     return {
       isLoading: false,
diff --git a/src/ui/layout/Multipane.vue b/src/ui/layout/MultipaneContainer.vue
similarity index 100%
rename from src/ui/layout/Multipane.vue
rename to src/ui/layout/MultipaneContainer.vue
diff --git a/src/ui/layout/Pane.vue b/src/ui/layout/PaneContainer.vue
similarity index 99%
rename from src/ui/layout/Pane.vue
rename to src/ui/layout/PaneContainer.vue
index 2f700c1145..ec09f924b8 100644
--- a/src/ui/layout/Pane.vue
+++ b/src/ui/layout/PaneContainer.vue
@@ -74,6 +74,7 @@ export default {
       default: false
     }
   },
+  emits: ['end-resizing', 'start-resizing'],
   data() {
     return {
       collapsed: false,
diff --git a/src/ui/layout/RecentObjectsList.vue b/src/ui/layout/RecentObjectsList.vue
index 1185cf782b..83ed1ca5f9 100644
--- a/src/ui/layout/RecentObjectsList.vue
+++ b/src/ui/layout/RecentObjectsList.vue
@@ -28,7 +28,7 @@
         :object-path="recentObject.objectPath"
         :navigation-path="recentObject.navigationPath"
         :domain-object="recentObject.domainObject"
-        @openAndScrollTo="openAndScrollTo($event)"
+        @open-and-scroll-to="openAndScrollTo($event)"
       />
     </ul>
   </div>
@@ -45,6 +45,7 @@ export default {
   },
   inject: ['openmct'],
   props: {},
+  emits: ['open-and-scroll-to', 'set-clear-button-disabled'],
   data() {
     return {
       recents: []
@@ -235,7 +236,7 @@ export default {
       }
     },
     openAndScrollTo(navigationPath) {
-      this.$emit('openAndScrollTo', navigationPath);
+      this.$emit('open-and-scroll-to', navigationPath);
     },
     /**
      * Saves the Recent Objects list to localStorage.
@@ -244,7 +245,7 @@ export default {
       localStorage.setItem(LOCAL_STORAGE_KEY__RECENT_OBJECTS, JSON.stringify(this.recents));
       // send event to parent for enabled button
       if (this.recents.length === 1) {
-        this.$emit('setClearButtonDisabled', false);
+        this.$emit('set-clear-button-disabled', false);
       }
     },
     /**
@@ -279,7 +280,7 @@ export default {
               });
               this.recents = [];
               dialog.dismiss();
-              this.$emit('setClearButtonDisabled', true);
+              this.$emit('set-clear-button-disabled', true);
             }
           },
           {
diff --git a/src/ui/layout/RecentObjectsListItem.vue b/src/ui/layout/RecentObjectsListItem.vue
index 42e54b2f8f..2fb1b8119b 100644
--- a/src/ui/layout/RecentObjectsListItem.vue
+++ b/src/ui/layout/RecentObjectsListItem.vue
@@ -87,6 +87,7 @@ export default {
       required: true
     }
   },
+  emits: ['open-and-scroll-to', 'preview-changed'],
   computed: {
     isAlias() {
       return this.openmct.objects.isObjectPathToALink(this.domainObject, this.objectPath)
@@ -135,7 +136,7 @@ export default {
       event.dataTransfer.setData(`openmct/domain-object/${keyString}`, this.domainObject);
     },
     openAndScrollTo(navigationPath) {
-      this.$emit('openAndScrollTo', navigationPath);
+      this.$emit('open-and-scroll-to', navigationPath);
     },
     async showToolTip() {
       const { BELOW } = this.openmct.tooltips.TOOLTIP_LOCATIONS;
diff --git a/src/ui/layout/TreeItem.vue b/src/ui/layout/TreeItem.vue
index 2dfc461527..113378c41e 100644
--- a/src/ui/layout/TreeItem.vue
+++ b/src/ui/layout/TreeItem.vue
@@ -125,6 +125,12 @@ export default {
       required: true
     }
   },
+  emits: [
+    'tree-item-mounted',
+    'tree-item-action',
+    'targeted-path-animation-end',
+    'tree-item-selection'
+  ],
   data() {
     this.navigationPath = this.node.navigationPath;
 
diff --git a/src/ui/layout/ViewSwitcher.vue b/src/ui/layout/ViewSwitcher.vue
index 466f216bf2..95b1952240 100644
--- a/src/ui/layout/ViewSwitcher.vue
+++ b/src/ui/layout/ViewSwitcher.vue
@@ -50,9 +50,10 @@ export default {
       required: true
     }
   },
+  emits: ['set-view'],
   methods: {
     setView(view) {
-      this.$emit('setView', view);
+      this.$emit('set-view', view);
     },
     showMenu() {
       const elementBoundingClientRect = this.$el.getBoundingClientRect();
diff --git a/src/ui/layout/search/GrandSearch.vue b/src/ui/layout/search/GrandSearch.vue
index 7b335e5378..0c3e9b69c9 100644
--- a/src/ui/layout/search/GrandSearch.vue
+++ b/src/ui/layout/search/GrandSearch.vue
@@ -36,7 +36,7 @@
 </template>
 
 <script>
-import Search from '../../components/Search.vue';
+import Search from '../../components/SearchComponent.vue';
 import SearchResultsDropDown from './SearchResultsDropDown.vue';
 
 const SEARCH_DEBOUNCE_TIME = 200;
diff --git a/src/ui/layout/search/ObjectSearchResult.vue b/src/ui/layout/search/ObjectSearchResult.vue
index a6ca00e869..4902630693 100644
--- a/src/ui/layout/search/ObjectSearchResult.vue
+++ b/src/ui/layout/search/ObjectSearchResult.vue
@@ -75,6 +75,7 @@ export default {
       }
     }
   },
+  emits: ['preview-changed'],
   computed: {
     resultName() {
       return this.result.name;
diff --git a/src/ui/layout/status-bar/Indicators.vue b/src/ui/layout/status-bar/StatusIndicators.vue
similarity index 100%
rename from src/ui/layout/status-bar/Indicators.vue
rename to src/ui/layout/status-bar/StatusIndicators.vue
diff --git a/src/ui/preview/PreviewAction.js b/src/ui/preview/PreviewAction.js
index ff0411c81e..d3e8e2ef4b 100644
--- a/src/ui/preview/PreviewAction.js
+++ b/src/ui/preview/PreviewAction.js
@@ -22,7 +22,7 @@
 import EventEmitter from 'EventEmitter';
 import mount from 'utils/mount';
 
-import Preview from './Preview.vue';
+import PreviewContainer from './PreviewContainer.vue';
 
 export default class PreviewAction extends EventEmitter {
   constructor(openmct) {
@@ -51,7 +51,7 @@ export default class PreviewAction extends EventEmitter {
     const { vNode, destroy } = mount(
       {
         components: {
-          Preview
+          PreviewContainer
         },
         provide: {
           openmct: this._openmct,
@@ -62,7 +62,7 @@ export default class PreviewAction extends EventEmitter {
             viewOptions
           };
         },
-        template: '<Preview :view-options="viewOptions"></Preview>'
+        template: '<preview-container :view-options="viewOptions"></preview-container>'
       },
       {
         app: this._openmct.app
diff --git a/src/ui/preview/Preview.vue b/src/ui/preview/PreviewContainer.vue
similarity index 100%
rename from src/ui/preview/Preview.vue
rename to src/ui/preview/PreviewContainer.vue
diff --git a/src/ui/preview/PreviewHeader.vue b/src/ui/preview/PreviewHeader.vue
index 1f577025f9..6424dc2068 100644
--- a/src/ui/preview/PreviewHeader.vue
+++ b/src/ui/preview/PreviewHeader.vue
@@ -101,6 +101,7 @@ export default {
       }
     }
   },
+  emits: ['set-view'],
   data() {
     return {
       type: this.openmct.types.get(this.domainObject.type),
@@ -144,7 +145,7 @@ export default {
       return items;
     },
     setView(view) {
-      this.$emit('setView', view);
+      this.$emit('set-view', view);
     },
     unlistenToActionCollection() {
       this.actionCollection.off('update', this.updateActionItems);
diff --git a/src/ui/toolbar/Toolbar.vue b/src/ui/toolbar/ToolbarContainer.vue
similarity index 100%
rename from src/ui/toolbar/Toolbar.vue
rename to src/ui/toolbar/ToolbarContainer.vue
diff --git a/src/ui/toolbar/components/ToolbarButton.vue b/src/ui/toolbar/components/ToolbarButton.vue
index e530d97858..37d0bf8260 100644
--- a/src/ui/toolbar/components/ToolbarButton.vue
+++ b/src/ui/toolbar/components/ToolbarButton.vue
@@ -47,6 +47,7 @@ export default {
       required: true
     }
   },
+  emits: ['change', 'click'],
   computed: {
     nonSpecific() {
       return this.options.nonSpecific === true;
diff --git a/src/ui/toolbar/components/ToolbarCheckbox.vue b/src/ui/toolbar/components/ToolbarCheckbox.vue
index e8723b809f..fb75988d76 100644
--- a/src/ui/toolbar/components/ToolbarCheckbox.vue
+++ b/src/ui/toolbar/components/ToolbarCheckbox.vue
@@ -49,6 +49,7 @@ export default {
       required: true
     }
   },
+  emits: ['change'],
   data() {
     uniqueId++;
 
diff --git a/src/ui/toolbar/components/ToolbarColorPicker.vue b/src/ui/toolbar/components/ToolbarColorPicker.vue
index 0435fcf5fb..c42b4f62b6 100644
--- a/src/ui/toolbar/components/ToolbarColorPicker.vue
+++ b/src/ui/toolbar/components/ToolbarColorPicker.vue
@@ -67,6 +67,7 @@ export default {
       required: true
     }
   },
+  emits: ['change'],
   data() {
     return {
       colorPalette: [
diff --git a/src/ui/toolbar/components/ToolbarInput.vue b/src/ui/toolbar/components/ToolbarInput.vue
index 0ec33baebe..7c558cd3b6 100644
--- a/src/ui/toolbar/components/ToolbarInput.vue
+++ b/src/ui/toolbar/components/ToolbarInput.vue
@@ -41,6 +41,7 @@ export default {
       }
     }
   },
+  emits: ['change'],
   data() {
     inputUniqueId++;
 
diff --git a/src/ui/toolbar/components/ToolbarMenu.vue b/src/ui/toolbar/components/ToolbarMenu.vue
index c7d11abf0f..badff09553 100644
--- a/src/ui/toolbar/components/ToolbarMenu.vue
+++ b/src/ui/toolbar/components/ToolbarMenu.vue
@@ -60,6 +60,7 @@ export default {
       }
     }
   },
+  emits: ['click'],
   methods: {
     onClick(option) {
       this.$emit('click', option);
diff --git a/src/ui/toolbar/components/ToolbarSelectMenu.vue b/src/ui/toolbar/components/ToolbarSelectMenu.vue
index d974e0dc0c..ee70b1e7b9 100644
--- a/src/ui/toolbar/components/ToolbarSelectMenu.vue
+++ b/src/ui/toolbar/components/ToolbarSelectMenu.vue
@@ -56,6 +56,7 @@ export default {
       }
     }
   },
+  emits: ['change'],
   computed: {
     selectedName() {
       let selectedOption = this.options.options.filter((o) => o.value === this.options.value)[0];
diff --git a/src/ui/toolbar/components/ToolbarToggleButton.vue b/src/ui/toolbar/components/ToolbarToggleButton.vue
index 5c716e9791..63d4c12a2a 100644
--- a/src/ui/toolbar/components/ToolbarToggleButton.vue
+++ b/src/ui/toolbar/components/ToolbarToggleButton.vue
@@ -42,6 +42,7 @@ export default {
       required: true
     }
   },
+  emits: ['change'],
   computed: {
     nextValue() {
       let currentValue = this.options.options.filter((v) => this.options.value === v.value)[0];
diff --git a/src/utils/useEventBus.js b/src/utils/useEventBus.js
new file mode 100644
index 0000000000..8581f54ccc
--- /dev/null
+++ b/src/utils/useEventBus.js
@@ -0,0 +1,19 @@
+import emitter from 'tiny-emitter/instance';
+import { ref } from 'vue';
+
+export function useEventBus() {
+  // Create a reactive reference to the emitter
+  const reactiveEmitter = ref(emitter);
+
+  // Expose the emitter's methods
+  const EventBus = {
+    $on: (...args) => reactiveEmitter.value.on(...args),
+    $once: (...args) => reactiveEmitter.value.once(...args),
+    $off: (...args) => reactiveEmitter.value.off(...args),
+    $emit: (...args) => reactiveEmitter.value.emit(...args)
+  };
+
+  return {
+    EventBus
+  };
+}