From 44ac26da4c53dedad3499cfef6d9d4cb61364a05 Mon Sep 17 00:00:00 2001
From: Dannon Baker <dannon.baker@gmail.com>
Date: Wed, 20 Apr 2022 06:53:09 -0400
Subject: [PATCH] Standardize vue component property order.

---
 .../Collections/ListCollectionCreator.vue     |  12 +-
 .../ListDatasetCollectionElementView.vue      |  18 +-
 .../Collections/PairCollectionCreator.vue     |  16 +-
 .../Collections/PairedElementView.vue         |  30 +--
 .../PairedListCollectionCreator.vue           | 148 +++++------
 .../Collections/common/CollectionCreator.vue  |  20 +-
 .../Collections/common/CollectionEditView.vue |  18 +-
 .../Collections/common/DatabaseEditTab.vue    |  16 +-
 .../common/SuitableConvertersTab.vue          |  10 +-
 .../Dataset/DatasetAsImage/DatasetAsImage.vue |  10 +-
 .../Dataset/DatasetIndex/DatasetIndex.vue     |  34 +--
 .../Dataset/DatasetLink/DatasetLink.vue       |  30 +--
 .../DatasetInformation/DatasetError.vue       |  14 +-
 .../DatasetInformation/DatasetInformation.vue |  12 +-
 client/src/components/DecodedId.vue           |   6 +-
 client/src/components/DisplayStructured.vue   |   6 +-
 .../components/FilesDialog/FilesDialog.vue    |  16 +-
 .../src/components/FilesDialog/FilesInput.vue |  16 +-
 client/src/components/Form/FormDisplay.vue    |  14 +-
 client/src/components/Form/FormGeneric.vue    |  10 +-
 client/src/components/Form/FormMessage.vue    |  10 +-
 .../Content/Dataset/DatasetActions.vue        |   2 +-
 .../CurrentHistory/HistoryMessages.vue        |  10 +-
 .../CurrentHistory/HistoryNavigation.vue      |   2 +-
 .../HistoryOperations/SelectionOperations.vue |  14 +-
 .../History/CurrentHistory/HistoryPanel.vue   |  12 +-
 .../src/components/History/Layout/Listing.vue |  10 +-
 .../History/Modals/SelectorModal.vue          |  16 +-
 .../src/components/HistoryExport/ToLink.vue   |  12 +-
 .../components/HistoryExport/ToRemoteFile.vue |  10 +-
 client/src/components/HistoryImport.vue       |  20 +-
 client/src/components/HistoryView.vue         |   6 +-
 .../JobDependencies/JobDependencies.vue       |   6 +-
 .../JobDestinationParams.vue                  |  12 +-
 .../JobParameters/JobParameters.vue           |  28 +-
 .../JobStates/CollectionJobStates.vue         |   8 +-
 .../components/Libraries/LibrariesList.vue    |  10 +-
 .../Libraries/LibraryFolder/LibraryFolder.vue |  34 +--
 .../LibraryFolderDataset/LibraryDataset.vue   |  28 +-
 .../LibraryFolderDatasetPermissions.vue       |  22 +-
 .../LibraryFolderPermissions.vue              |  10 +-
 .../Libraries/LibraryFolder/SearchField.vue   |  12 +-
 .../LibraryFolder/TopToolbar/FolderTopBar.vue |  32 +--
 .../LibraryPermissions/LibraryPermissions.vue |  10 +-
 .../LibraryPermissions/PermissionsHeader.vue  |   6 +-
 .../PermissionsInputField.vue                 |  16 +-
 client/src/components/License/License.vue     |  14 +-
 .../components/License/LicenseSelector.vue    |  26 +-
 .../CollectionDisplay.vue                     |  12 +-
 .../Elements/Workflow/WorkflowDisplay.vue     |  12 +-
 client/src/components/Masthead/Masthead.vue   |  66 ++---
 .../NewUserWelcome/NewUserWelcome.vue         |   6 +-
 .../components/PageDisplay/PageDisplay.vue    |  10 +-
 .../src/components/PageEditor/PageEditor.vue  |  10 +-
 .../PageEditor/PageEditorMarkdown.vue         |  10 +-
 .../Panels/Buttons/FavoritesButton.vue        |  10 +-
 .../components/Panels/Common/ToolSection.vue  |  36 +--
 .../src/components/Panels/ToolBoxWorkflow.vue |  12 +-
 .../RuleBuilder/IdentifierDisplay.vue         |  16 +-
 .../components/RuleBuilder/RuleComponent.vue  |  22 +-
 .../RuleBuilder/SavedRulesSelector.vue        |  10 +-
 .../src/components/RuleCollectionBuilder.vue  | 244 +++++++++---------
 .../components/RulesDisplay/RulesDisplay.vue  |  20 +-
 .../components/SchemaOrg/OrganizationForm.vue |   2 +-
 .../SchemaOrg/OrganizationViewer.vue          |   2 +-
 .../src/components/SchemaOrg/PersonForm.vue   |   2 +-
 .../src/components/SchemaOrg/PersonViewer.vue |   2 +-
 client/src/components/Select2.vue             |  26 +-
 .../SelectionDialog/DataDialogTable.vue       |  16 +-
 .../SelectionDialog/SelectionDialog.vue       |   6 +-
 client/src/components/SingleItemSelector.vue  |  10 +-
 client/src/components/Tool/ToolCard.vue       |  10 +-
 client/src/components/Tool/ToolFooter.vue     |  10 +-
 client/src/components/Tool/ToolForm.vue       |  32 +--
 .../ToolEntryPoints/ToolEntryPoints.vue       |  10 +-
 client/src/components/ToolRecommendation.vue  |   6 +-
 .../ToolsView/ToolsSchemaJson/ToolsJson.vue   |  30 +--
 client/src/components/Toolshed/Index.vue      |  10 +-
 .../Toolshed/InstalledList/Details.vue        |   8 +-
 .../Toolshed/SearchList/Categories.vue        |  10 +-
 .../components/Toolshed/SearchList/Index.vue  |  16 +-
 .../Toolshed/SearchList/Repositories.vue      |  16 +-
 client/src/components/Upload/Collection.vue   |  36 +--
 client/src/components/Upload/Composite.vue    |  38 +--
 client/src/components/Upload/Default.vue      |  36 +--
 client/src/components/Upload/RulesInput.vue   |  16 +-
 client/src/components/Upload/UploadButton.vue |  16 +-
 client/src/components/Upload/UploadModal.vue  |  10 +-
 .../components/Upload/UploadModalContent.vue  | 104 ++++----
 .../components/User/CloudAuth/CloudAuth.vue   |   6 +-
 .../Cleanup/CleanupOperationSummary.vue       |  22 +-
 .../Cleanup/CleanupResultDialog.vue           |   6 +-
 .../Cleanup/ReviewCleanupDialog.vue           | 118 ++++-----
 .../ExternalIdentities/ExternalIdentities.vue |   6 +-
 .../User/ExternalIdentities/ExternalLogin.vue |  14 +-
 .../src/components/User/UserPreferences.vue   |  36 +--
 .../components/Workflow/Editor/Attributes.vue |   6 +-
 .../Workflow/Editor/Forms/FormOutput.vue      |   6 +-
 .../Workflow/Editor/Forms/FormSection.vue     |   6 +-
 .../src/components/Workflow/Editor/Index.vue  |  36 +--
 .../src/components/Workflow/Editor/Lint.vue   | 112 ++++----
 .../Workflow/Editor/MessagesModal.vue         |  10 +-
 .../src/components/Workflow/Editor/Node.vue   |  60 ++---
 .../components/Workflow/Editor/NodeInput.vue  |  40 +--
 .../components/Workflow/Editor/NodeOutput.vue |   8 +-
 .../Workflow/Editor/StateUpgradeModal.vue     |  14 +-
 .../components/Workflow/InvocationReport.vue  |  16 +-
 .../Workflow/Run/WorkflowRunDefaultStep.vue   |  14 +-
 .../Workflow/Run/WorkflowRunSuccess.vue       |  16 +-
 client/src/components/Workflow/TrsImport.vue  |   8 +-
 client/src/components/Workflow/TrsSearch.vue  |  22 +-
 .../Workflow/TrsServerSelection.vue           |   8 +-
 .../components/Workflow/WorkflowDropdown.vue  |   2 +-
 .../WorkflowInvocationState/JobStep.vue       |  20 +-
 .../admin/DataManager/DataManager.vue         |  18 +-
 .../admin/DataManager/DataManagerJob.vue      |  10 +-
 .../admin/DataManager/DataManagerTable.vue    |  28 +-
 client/src/components/admin/DataTables.vue    |  39 ++-
 .../src/components/admin/DataTablesGrid.vue   |   7 +-
 client/src/components/admin/DataTypes.vue     |  24 +-
 .../admin/Dependencies/ContainerIndex.vue     |  98 +++----
 .../admin/Dependencies/ResolutionIndex.vue    |  12 +-
 .../admin/Dependencies/UnusedIndex.vue        |   6 +-
 client/src/components/admin/Home.vue          |  12 +-
 client/src/components/admin/JobLock.vue       |   6 +-
 client/src/components/admin/Jobs.vue          |  48 ++--
 client/src/components/admin/SanitizeAllow.vue |   9 +-
 client/src/components/login/Index.vue         |  30 +--
 128 files changed, 1393 insertions(+), 1396 deletions(-)

diff --git a/client/src/components/Collections/ListCollectionCreator.vue b/client/src/components/Collections/ListCollectionCreator.vue
index 2f9acfc8c3e..545c8663fbb 100644
--- a/client/src/components/Collections/ListCollectionCreator.vue
+++ b/client/src/components/Collections/ListCollectionCreator.vue
@@ -213,13 +213,8 @@ library.add(faSortAlphaDown, faUndo);
 
 Vue.use(BootstrapVue);
 export default {
-    mixins: [mixin],
-    created() {
-        this._instanceSetUp();
-        this._elementsSetUp();
-        this.saveOriginalNames();
-    },
     components: { DatasetCollectionElementView, draggable, FontAwesomeIcon },
+    mixins: [mixin],
     data: function () {
         return {
             state: "build", //error
@@ -274,6 +269,11 @@ export default {
             return this.duplicateNames.length > 0;
         },
     },
+    created() {
+        this._instanceSetUp();
+        this._elementsSetUp();
+        this.saveOriginalNames();
+    },
     methods: {
         l(str) {
             // _l conflicts private methods of Vue internals, expose as l instead
diff --git a/client/src/components/Collections/ListDatasetCollectionElementView.vue b/client/src/components/Collections/ListDatasetCollectionElementView.vue
index b9638404b76..2e6d0bb1d66 100644
--- a/client/src/components/Collections/ListDatasetCollectionElementView.vue
+++ b/client/src/components/Collections/ListDatasetCollectionElementView.vue
@@ -11,9 +11,7 @@
 import _l from "utils/localization";
 import ClickToEdit from "./common/ClickToEdit";
 export default {
-    created: function () {
-        this.elementName = this.element.name;
-    },
+    components: { ClickToEdit },
     props: {
         element: {
             required: true,
@@ -27,7 +25,14 @@ export default {
             elementName: "",
         };
     },
-    components: { ClickToEdit },
+    watch: {
+        elementName() {
+            this.$emit("onRename", this.elementName);
+        },
+    },
+    created: function () {
+        this.elementName = this.element.name;
+    },
     methods: {
         l(str) {
             // _l conflicts private methods of Vue internals, expose as l instead
@@ -41,11 +46,6 @@ export default {
             return "ListDatasetCollectionElementView()";
         },
     },
-    watch: {
-        elementName() {
-            this.$emit("onRename", this.elementName);
-        },
-    },
 };
 </script>
 
diff --git a/client/src/components/Collections/PairCollectionCreator.vue b/client/src/components/Collections/PairCollectionCreator.vue
index eb3517d4393..3afefe4d07c 100644
--- a/client/src/components/Collections/PairCollectionCreator.vue
+++ b/client/src/components/Collections/PairCollectionCreator.vue
@@ -158,14 +158,6 @@ import BootstrapVue from "bootstrap-vue";
 Vue.use(BootstrapVue);
 export default {
     mixins: [mixin],
-    created() {
-        this._elementsSetUp();
-        this.initialSuggestedName = this._guessNameForPair(
-            this.workingElements[0],
-            this.workingElements[1],
-            this.removeExtensions
-        );
-    },
     data: function () {
         return {
             state: "build", //error
@@ -201,6 +193,14 @@ export default {
             return this.workingElements.length == 2;
         },
     },
+    created() {
+        this._elementsSetUp();
+        this.initialSuggestedName = this._guessNameForPair(
+            this.workingElements[0],
+            this.workingElements[1],
+            this.removeExtensions
+        );
+    },
     methods: {
         l(str) {
             // _l conflicts private methods of Vue internals, expose as l instead
diff --git a/client/src/components/Collections/PairedElementView.vue b/client/src/components/Collections/PairedElementView.vue
index a742f3eb900..22e1af316bf 100644
--- a/client/src/components/Collections/PairedElementView.vue
+++ b/client/src/components/Collections/PairedElementView.vue
@@ -19,16 +19,6 @@ import ClickToEdit from "./common/ClickToEdit.vue";
 import _l from "utils/localization";
 export default {
     components: { ClickToEdit },
-    created: function () {
-        this.name = this.pair.name;
-    },
-    data: function () {
-        return {
-            unpairButtonTitle: _l("Unpair"),
-            titlePairName: _l("Click to rename"),
-            name: "",
-        };
-    },
     props: {
         pair: {
             required: true,
@@ -38,11 +28,12 @@ export default {
             type: Function,
         },
     },
-    methods: {
-        l(str) {
-            // _l conflicts private methods of Vue internals, expose as l instead
-            return _l(str);
-        },
+    data: function () {
+        return {
+            unpairButtonTitle: _l("Unpair"),
+            titlePairName: _l("Click to rename"),
+            name: "",
+        };
     },
     watch: {
         pair() {
@@ -52,5 +43,14 @@ export default {
             this.$emit("onPairRename", this.name);
         },
     },
+    created: function () {
+        this.name = this.pair.name;
+    },
+    methods: {
+        l(str) {
+            // _l conflicts private methods of Vue internals, expose as l instead
+            return _l(str);
+        },
+    },
 };
 </script>
diff --git a/client/src/components/Collections/PairedListCollectionCreator.vue b/client/src/components/Collections/PairedListCollectionCreator.vue
index 36238198529..b9b9bfff122 100644
--- a/client/src/components/Collections/PairedListCollectionCreator.vue
+++ b/client/src/components/Collections/PairedListCollectionCreator.vue
@@ -422,15 +422,6 @@ import BootstrapVue from "bootstrap-vue";
 
 Vue.use(BootstrapVue);
 export default {
-    mixins: [mixin],
-    created() {
-        this.strategy = this.autopairLCS;
-        //TODO convert to Fwd/Rev
-        // Setup inital filters and shallow copy the items
-        this.forwardFilter = this.commonFilters[this.DEFAULT_FILTERS][0];
-        this.reverseFilter = this.commonFilters[this.DEFAULT_FILTERS][1];
-        this._elementsSetUp();
-    },
     components: {
         UnpairedDatasetElementView,
         PairedElementView,
@@ -438,6 +429,7 @@ export default {
         Pane,
         draggable,
     },
+    mixins: [mixin],
     data: function () {
         return {
             state: "build", //error, duplicates
@@ -533,6 +525,79 @@ export default {
             duplicatePairNames: [],
         };
     },
+    computed: {
+        forwardElements: {
+            get() {
+                return this.filterElements(this.workingElements, this.forwardFilter);
+            },
+        },
+        reverseElements: {
+            get() {
+                return this.filterElements(this.workingElements, this.reverseFilter);
+            },
+        },
+        pairableElements: {
+            get() {
+                var pairable = [];
+                this.forwardElements.forEach((elem, index) => {
+                    if (this.reverseElements[index] && elem.id != this.reverseElements[index].id) {
+                        pairable.push({
+                            forward: this.forwardElements[index],
+                            reverse: this.reverseElements[index],
+                        });
+                    }
+                });
+                return pairable;
+            },
+        },
+        numOfUnpairedForwardElements: function () {
+            return this.forwardElements.length;
+        },
+        numOfFilteredOutForwardElements: function () {
+            return this.workingElements.length - this.numOfUnpairedForwardElements;
+        },
+        numOfUnpairedReverseElements: function () {
+            return this.reverseElements.length;
+        },
+        numOfFilteredOutReverseElements: function () {
+            return this.workingElements.length - this.numOfUnpairedReverseElements;
+        },
+        numOfPairs: function () {
+            return this.pairedElements.length;
+        },
+        returnInvalidElementsLength: function () {
+            return this.invalidElements.length > 0;
+        },
+        returnInvalidElements: function () {
+            return this.invalidElements;
+        },
+        allElementsAreInvalid: function () {
+            return this.initialElements.length == this.invalidElements.length;
+        },
+        noElementsSelected: function () {
+            return this.initialElements.length == 0;
+        },
+        tooFewElementsSelected: function () {
+            return this.workingElements.length < 2 && this.pairedElements.length == 0;
+        },
+        showDuplicateError() {
+            return this.duplicatePairNames.length > 0;
+        },
+        noUnpairedElementsDisplayed() {
+            return this.numOfUnpairedForwardElements + this.numOfUnpairedReverseElements == 0;
+        },
+        renderPairButton() {
+            return this;
+        },
+    },
+    created() {
+        this.strategy = this.autopairLCS;
+        //TODO convert to Fwd/Rev
+        // Setup inital filters and shallow copy the items
+        this.forwardFilter = this.commonFilters[this.DEFAULT_FILTERS][0];
+        this.reverseFilter = this.commonFilters[this.DEFAULT_FILTERS][1];
+        this._elementsSetUp();
+    },
     methods: {
         l(str) {
             // _l conflicts private methods of Vue internals, expose as l instead
@@ -947,71 +1012,6 @@ export default {
             return name.includes(".") ? name.substring(0, name.lastIndexOf(".")) : name;
         },
     },
-    computed: {
-        forwardElements: {
-            get() {
-                return this.filterElements(this.workingElements, this.forwardFilter);
-            },
-        },
-        reverseElements: {
-            get() {
-                return this.filterElements(this.workingElements, this.reverseFilter);
-            },
-        },
-        pairableElements: {
-            get() {
-                var pairable = [];
-                this.forwardElements.forEach((elem, index) => {
-                    if (this.reverseElements[index] && elem.id != this.reverseElements[index].id) {
-                        pairable.push({
-                            forward: this.forwardElements[index],
-                            reverse: this.reverseElements[index],
-                        });
-                    }
-                });
-                return pairable;
-            },
-        },
-        numOfUnpairedForwardElements: function () {
-            return this.forwardElements.length;
-        },
-        numOfFilteredOutForwardElements: function () {
-            return this.workingElements.length - this.numOfUnpairedForwardElements;
-        },
-        numOfUnpairedReverseElements: function () {
-            return this.reverseElements.length;
-        },
-        numOfFilteredOutReverseElements: function () {
-            return this.workingElements.length - this.numOfUnpairedReverseElements;
-        },
-        numOfPairs: function () {
-            return this.pairedElements.length;
-        },
-        returnInvalidElementsLength: function () {
-            return this.invalidElements.length > 0;
-        },
-        returnInvalidElements: function () {
-            return this.invalidElements;
-        },
-        allElementsAreInvalid: function () {
-            return this.initialElements.length == this.invalidElements.length;
-        },
-        noElementsSelected: function () {
-            return this.initialElements.length == 0;
-        },
-        tooFewElementsSelected: function () {
-            return this.workingElements.length < 2 && this.pairedElements.length == 0;
-        },
-        showDuplicateError() {
-            return this.duplicatePairNames.length > 0;
-        },
-        noUnpairedElementsDisplayed() {
-            return this.numOfUnpairedForwardElements + this.numOfUnpairedReverseElements == 0;
-        },
-        renderPairButton() {
-            return this;
-        },
-    },
 };
 </script>
 <style lang="scss">
diff --git a/client/src/components/Collections/common/CollectionCreator.vue b/client/src/components/Collections/common/CollectionCreator.vue
index 215ba7a82a4..ece5276070c 100644
--- a/client/src/components/Collections/common/CollectionCreator.vue
+++ b/client/src/components/Collections/common/CollectionCreator.vue
@@ -98,11 +98,6 @@ export default {
             default: "",
         },
     },
-    computed: {
-        validInput: function () {
-            return this.collectionName.length > 0;
-        },
-    },
     data: function () {
         return {
             titleForHelp: _l("Expand or Close Help"),
@@ -116,6 +111,16 @@ export default {
             localHideSourceItems: this.hideSourceItems,
         };
     },
+    computed: {
+        validInput: function () {
+            return this.collectionName.length > 0;
+        },
+    },
+    watch: {
+        localHideSourceItems() {
+            this.$emit("onUpdateHideSourceItems", this.localHideSourceItems);
+        },
+    },
     methods: {
         l(str) {
             // _l conflicts private methods of Vue internals, expose as l instead
@@ -132,11 +137,6 @@ export default {
             return this.collectionName;
         },
     },
-    watch: {
-        localHideSourceItems() {
-            this.$emit("onUpdateHideSourceItems", this.localHideSourceItems);
-        },
-    },
 };
 </script>
 
diff --git a/client/src/components/Collections/common/CollectionEditView.vue b/client/src/components/Collections/common/CollectionEditView.vue
index f178ed395e2..0212041e68c 100644
--- a/client/src/components/Collections/common/CollectionEditView.vue
+++ b/client/src/components/Collections/common/CollectionEditView.vue
@@ -50,9 +50,6 @@ library.add(faDatabase, faTable, faBars, faUser, faCog);
 
 Vue.use(BootstrapVue);
 export default {
-    created() {
-        this.getCollectionDataAndAttributes();
-    },
     components: {
         DatabaseEditTab,
         SuitableConvertersTab,
@@ -60,6 +57,12 @@ export default {
         GenomeProvider,
         SuitableConvertersProvider,
     },
+    props: {
+        collection_id: {
+            type: String,
+            required: true,
+        },
+    },
     data: function () {
         return {
             attributes_data: {},
@@ -68,12 +71,6 @@ export default {
             noQuotaIncrease: true,
         };
     },
-    props: {
-        collection_id: {
-            type: String,
-            required: true,
-        },
-    },
     computed: {
         databaseKeyFromElements: function () {
             return this.attributes_data.dbkey;
@@ -86,6 +83,9 @@ export default {
             return newCollectionMessage;
         },
     },
+    created() {
+        this.getCollectionDataAndAttributes();
+    },
     methods: {
         getCollectionDataAndAttributes: async function () {
             let attributesGet = this.$store.getters.getCollectionAttributes(this.collection_id);
diff --git a/client/src/components/Collections/common/DatabaseEditTab.vue b/client/src/components/Collections/common/DatabaseEditTab.vue
index bb1778a41c5..38c36f6f347 100644
--- a/client/src/components/Collections/common/DatabaseEditTab.vue
+++ b/client/src/components/Collections/common/DatabaseEditTab.vue
@@ -28,15 +28,7 @@
 import Multiselect from "vue-multiselect";
 
 export default {
-    created() {
-        this.selectedGenome = this.genomes.find((element) => element.id == this.databaseKeyFromElements);
-    },
     components: { Multiselect },
-    data: function () {
-        return {
-            selectedGenome: {},
-        };
-    },
     props: {
         genomes: {
             type: Array,
@@ -47,6 +39,14 @@ export default {
             required: true,
         },
     },
+    data: function () {
+        return {
+            selectedGenome: {},
+        };
+    },
+    created() {
+        this.selectedGenome = this.genomes.find((element) => element.id == this.databaseKeyFromElements);
+    },
     methods: {
         clickedSave: function () {
             this.$emit("clicked-save", "dbkey", this.selectedGenome);
diff --git a/client/src/components/Collections/common/SuitableConvertersTab.vue b/client/src/components/Collections/common/SuitableConvertersTab.vue
index 0f121d7f01b..943539c7d22 100644
--- a/client/src/components/Collections/common/SuitableConvertersTab.vue
+++ b/client/src/components/Collections/common/SuitableConvertersTab.vue
@@ -28,17 +28,17 @@
 import Multiselect from "vue-multiselect";
 export default {
     components: { Multiselect },
-    data: function () {
-        return {
-            selectedConverter: {},
-        };
-    },
     props: {
         suitableConverters: {
             type: Array,
             required: true,
         },
     },
+    data: function () {
+        return {
+            selectedConverter: {},
+        };
+    },
     methods: {
         clickedConvert: function () {
             this.$emit("clicked-convert", this.selectedConverter);
diff --git a/client/src/components/Dataset/DatasetAsImage/DatasetAsImage.vue b/client/src/components/Dataset/DatasetAsImage/DatasetAsImage.vue
index 9682f9aa83b..0e83981bfaa 100644
--- a/client/src/components/Dataset/DatasetAsImage/DatasetAsImage.vue
+++ b/client/src/components/Dataset/DatasetAsImage/DatasetAsImage.vue
@@ -26,6 +26,11 @@ export default {
             default: null,
         },
     },
+    data() {
+        return {
+            imageUrl: undefined,
+        };
+    },
     created() {
         if (this.path) {
             this.fetchPathDestination({ history_dataset_id: this.history_dataset_id, path: this.path }).then(() => {
@@ -36,11 +41,6 @@ export default {
             this.imageUrl = `${getAppRoot()}dataset/display?dataset_id=${this.history_dataset_id}`;
         }
     },
-    data() {
-        return {
-            imageUrl: undefined,
-        };
-    },
     methods: {
         ...mapCacheActions(["fetchPathDestination"]),
     },
diff --git a/client/src/components/Dataset/DatasetIndex/DatasetIndex.vue b/client/src/components/Dataset/DatasetIndex/DatasetIndex.vue
index ed9ba82907f..0159e1ad17a 100644
--- a/client/src/components/Dataset/DatasetIndex/DatasetIndex.vue
+++ b/client/src/components/Dataset/DatasetIndex/DatasetIndex.vue
@@ -27,6 +27,23 @@ export default {
             type: String,
         },
     },
+    data() {
+        return {
+            directoryContent: false,
+            fields: [
+                {
+                    key: "path",
+                    sortable: true,
+                },
+                {
+                    key: "class",
+                    label: "Type",
+                    sortable: true,
+                },
+            ],
+            errorMessage: undefined,
+        };
+    },
     created() {
         this.fetchPathDestination({ history_dataset_id: this.history_dataset_id, path: this.path }).then(() => {
             const pathDestination = this.$store.getters.pathDestination(this.history_dataset_id, this.path);
@@ -51,23 +68,6 @@ export default {
             }
         });
     },
-    data() {
-        return {
-            directoryContent: false,
-            fields: [
-                {
-                    key: "path",
-                    sortable: true,
-                },
-                {
-                    key: "class",
-                    label: "Type",
-                    sortable: true,
-                },
-            ],
-            errorMessage: undefined,
-        };
-    },
     methods: {
         ...mapCacheActions(["fetchPathDestination"]),
 
diff --git a/client/src/components/Dataset/DatasetLink/DatasetLink.vue b/client/src/components/Dataset/DatasetLink/DatasetLink.vue
index d191e612d4e..50166a1d82d 100644
--- a/client/src/components/Dataset/DatasetLink/DatasetLink.vue
+++ b/client/src/components/Dataset/DatasetLink/DatasetLink.vue
@@ -22,21 +22,6 @@ export default {
             type: String,
         },
     },
-    created() {
-        this.services = new Services({ root: getAppRoot() });
-        this.pathDestination = {};
-        if (this.path && this.path !== "undefined") {
-            // download individual file from composite dataset
-            this.fetchPathDestination({ history_dataset_id: this.history_dataset_id, path: this.path }).then(() => {
-                this.pathDestination = this.$store.getters.pathDestination(this.history_dataset_id, this.path);
-            });
-        } else {
-            // download whole dataset
-            this.services.getCompositeDatasetInfo(this.history_dataset_id).then((response) => {
-                this.pathDestination = { fileLink: `${response.download_url}?to_ext=${response.file_ext}` };
-            });
-        }
-    },
     data() {
         return {
             pathDestination: undefined,
@@ -64,6 +49,21 @@ export default {
             }
         },
     },
+    created() {
+        this.services = new Services({ root: getAppRoot() });
+        this.pathDestination = {};
+        if (this.path && this.path !== "undefined") {
+            // download individual file from composite dataset
+            this.fetchPathDestination({ history_dataset_id: this.history_dataset_id, path: this.path }).then(() => {
+                this.pathDestination = this.$store.getters.pathDestination(this.history_dataset_id, this.path);
+            });
+        } else {
+            // download whole dataset
+            this.services.getCompositeDatasetInfo(this.history_dataset_id).then((response) => {
+                this.pathDestination = { fileLink: `${response.download_url}?to_ext=${response.file_ext}` };
+            });
+        }
+    },
     methods: {
         ...mapCacheActions(["fetchPathDestination"]),
     },
diff --git a/client/src/components/DatasetInformation/DatasetError.vue b/client/src/components/DatasetInformation/DatasetError.vue
index 92228b3b6b6..ddbb8e9aa24 100644
--- a/client/src/components/DatasetInformation/DatasetError.vue
+++ b/client/src/components/DatasetInformation/DatasetError.vue
@@ -118,6 +118,13 @@ export default {
             resultMessages: [],
         };
     },
+    computed: {
+        showForm() {
+            const noResult = !this.resultMessages.length;
+            const hasError = this.resultMessages.some((msg) => msg[1] === "danger");
+            return noResult || hasError;
+        },
+    },
     methods: {
         onError(err) {
             this.errorMessage = err;
@@ -135,12 +142,5 @@ export default {
             );
         },
     },
-    computed: {
-        showForm() {
-            const noResult = !this.resultMessages.length;
-            const hasError = this.resultMessages.some((msg) => msg[1] === "danger");
-            return noResult || hasError;
-        },
-    },
 };
 </script>
diff --git a/client/src/components/DatasetInformation/DatasetInformation.vue b/client/src/components/DatasetInformation/DatasetInformation.vue
index 41faf70166a..2d4494d3c2e 100644
--- a/client/src/components/DatasetInformation/DatasetInformation.vue
+++ b/client/src/components/DatasetInformation/DatasetInformation.vue
@@ -85,12 +85,6 @@ import DatasetSources from "./DatasetSources";
 import DatasetHashes from "./DatasetHashes";
 
 export default {
-    props: {
-        hda_id: {
-            type: String,
-            required: true,
-        },
-    },
     components: {
         DatasetHashes,
         DatasetProvider,
@@ -98,6 +92,12 @@ export default {
         DecodedId,
         UtcDate,
     },
+    props: {
+        hda_id: {
+            type: String,
+            required: true,
+        },
+    },
     methods: {
         bytesToString(raw_size) {
             return Utils.bytesToString(raw_size);
diff --git a/client/src/components/DecodedId.vue b/client/src/components/DecodedId.vue
index a7a66821e27..5437f7236ba 100644
--- a/client/src/components/DecodedId.vue
+++ b/client/src/components/DecodedId.vue
@@ -17,9 +17,6 @@ export default {
     data() {
         return { decoded_id: null };
     },
-    created: function () {
-        this.decodeId(this.id);
-    },
     computed: {
         isAdmin() {
             // window.parent.Galaxy is needed when instance is mounted in mako
@@ -27,6 +24,9 @@ export default {
             return Galaxy?.user?.isAdmin() || false;
         },
     },
+    created: function () {
+        this.decodeId(this.id);
+    },
     methods: {
         decodeId: async function (id) {
             if (this.isAdmin) {
diff --git a/client/src/components/DisplayStructured.vue b/client/src/components/DisplayStructured.vue
index a9403fb24a9..faba537ae2a 100644
--- a/client/src/components/DisplayStructured.vue
+++ b/client/src/components/DisplayStructured.vue
@@ -41,6 +41,9 @@ export default {
         }
         this.ajaxCall(url);
     },
+    updated: function () {
+        this.makeHistoryView(this.historyJSON);
+    },
     methods: {
         ajaxCall: function (url) {
             axios
@@ -85,9 +88,6 @@ export default {
             });
         },
     },
-    updated: function () {
-        this.makeHistoryView(this.historyJSON);
-    },
 };
 </script>
 
diff --git a/client/src/components/FilesDialog/FilesDialog.vue b/client/src/components/FilesDialog/FilesDialog.vue
index 9ca81c8b669..8fcecfb9872 100644
--- a/client/src/components/FilesDialog/FilesDialog.vue
+++ b/client/src/components/FilesDialog/FilesDialog.vue
@@ -70,6 +70,9 @@ import { faCaretLeft } from "@fortawesome/free-solid-svg-icons";
 
 library.add(faCaretLeft);
 export default {
+    components: {
+        FontAwesomeIcon,
+    },
     mixins: [SelectionDialogMixin],
     props: {
         multiple: {
@@ -86,9 +89,6 @@ export default {
             default: false,
         },
     },
-    components: {
-        FontAwesomeIcon,
-    },
     data() {
         return {
             allSelected: false,
@@ -110,17 +110,17 @@ export default {
             oidcEnabled: getGalaxyInstance()?.config?.enable_oidc,
         };
     },
+    computed: {
+        fileMode() {
+            return this.mode == "file";
+        },
+    },
     created: function () {
         this.services = new Services();
         this.urlTracker = new UrlTracker("");
         this.model = new Model({ multiple: this.multiple });
         this.load();
     },
-    computed: {
-        fileMode() {
-            return this.mode == "file";
-        },
-    },
     methods: {
         /** Add highlighting for record variations, i.e. datasets vs. libraries/collections **/
         formatRows() {
diff --git a/client/src/components/FilesDialog/FilesInput.vue b/client/src/components/FilesDialog/FilesInput.vue
index 261eb807fb2..9f905c920d7 100644
--- a/client/src/components/FilesDialog/FilesInput.vue
+++ b/client/src/components/FilesDialog/FilesInput.vue
@@ -32,6 +32,14 @@ export default {
             return `Click to select ${this.mode}`;
         },
     },
+    watch: {
+        localValue(newValue) {
+            this.$emit("input", newValue);
+        },
+        value(newValue) {
+            this.localValue = newValue;
+        },
+    },
     methods: {
         selectFile() {
             const props = {
@@ -43,13 +51,5 @@ export default {
             }, props);
         },
     },
-    watch: {
-        localValue(newValue) {
-            this.$emit("input", newValue);
-        },
-        value(newValue) {
-            this.localValue = newValue;
-        },
-    },
 };
 </script>
diff --git a/client/src/components/Form/FormDisplay.vue b/client/src/components/Form/FormDisplay.vue
index b59368ecd37..ece2ff371b3 100644
--- a/client/src/components/Form/FormDisplay.vue
+++ b/client/src/components/Form/FormDisplay.vue
@@ -71,9 +71,6 @@ export default {
             default: null,
         },
     },
-    created() {
-        this.onCloneInputs();
-    },
     data() {
         return {
             formData: {},
@@ -81,6 +78,11 @@ export default {
             formInputs: [],
         };
     },
+    computed: {
+        validation() {
+            return validateInputs(this.formIndex, this.formData);
+        },
+    },
     watch: {
         id() {
             this.onCloneInputs();
@@ -118,10 +120,8 @@ export default {
             this.onReplaceParams();
         },
     },
-    computed: {
-        validation() {
-            return validateInputs(this.formIndex, this.formData);
-        },
+    created() {
+        this.onCloneInputs();
     },
     methods: {
         onReplaceParams() {
diff --git a/client/src/components/Form/FormGeneric.vue b/client/src/components/Form/FormGeneric.vue
index 862b5cb1252..40e2a25223e 100644
--- a/client/src/components/Form/FormGeneric.vue
+++ b/client/src/components/Form/FormGeneric.vue
@@ -33,6 +33,11 @@ import FormCard from "components/Form/FormCard";
 import FormDisplay from "components/Form/FormDisplay";
 
 export default {
+    components: {
+        FormCard,
+        FormDisplay,
+        UrlDataProvider,
+    },
     props: {
         id: {
             type: String,
@@ -67,11 +72,6 @@ export default {
             default: null,
         },
     },
-    components: {
-        FormCard,
-        FormDisplay,
-        UrlDataProvider,
-    },
     data() {
         return {
             messageText: null,
diff --git a/client/src/components/Form/FormMessage.vue b/client/src/components/Form/FormMessage.vue
index 2cffe77fc4f..8ab3d139526 100644
--- a/client/src/components/Form/FormMessage.vue
+++ b/client/src/components/Form/FormMessage.vue
@@ -28,11 +28,6 @@ export default {
             showDismissable: false,
         };
     },
-    watch: {
-        message(newMessage) {
-            this.resetTimer();
-        },
-    },
     computed: {
         showAlert() {
             if (this.message) {
@@ -44,6 +39,11 @@ export default {
             return false;
         },
     },
+    watch: {
+        message(newMessage) {
+            this.resetTimer();
+        },
+    },
     methods: {
         resetTimer() {
             if (this.message) {
diff --git a/client/src/components/History/Content/Dataset/DatasetActions.vue b/client/src/components/History/Content/Dataset/DatasetActions.vue
index d87e3044bf1..903ea5265ea 100644
--- a/client/src/components/History/Content/Dataset/DatasetActions.vue
+++ b/client/src/components/History/Content/Dataset/DatasetActions.vue
@@ -81,10 +81,10 @@ import { absPath } from "utils/redirect";
 import { updateContentFields } from "components/History/model/queries";
 
 export default {
-    mixins: [legacyNavigationMixin],
     components: {
         StatelessTags,
     },
+    mixins: [legacyNavigationMixin],
     props: {
         item: { type: Object, required: true },
     },
diff --git a/client/src/components/History/CurrentHistory/HistoryMessages.vue b/client/src/components/History/CurrentHistory/HistoryMessages.vue
index cb753af19ec..72faf498938 100644
--- a/client/src/components/History/CurrentHistory/HistoryMessages.vue
+++ b/client/src/components/History/CurrentHistory/HistoryMessages.vue
@@ -17,15 +17,15 @@ export default {
     props: {
         history: { type: Object, required: true },
     },
-    computed: {
-        hasMessages() {
-            return this.userOverQuota || history.isDeleted;
-        },
-    },
     data() {
         return {
             userOverQuota: false,
         };
     },
+    computed: {
+        hasMessages() {
+            return this.userOverQuota || history.isDeleted;
+        },
+    },
 };
 </script>
diff --git a/client/src/components/History/CurrentHistory/HistoryNavigation.vue b/client/src/components/History/CurrentHistory/HistoryNavigation.vue
index 8a3570a723d..b1a5e8f7341 100644
--- a/client/src/components/History/CurrentHistory/HistoryNavigation.vue
+++ b/client/src/components/History/CurrentHistory/HistoryNavigation.vue
@@ -174,11 +174,11 @@ import SelectorModal from "components/History/Modals/SelectorModal";
 import { mapGetters } from "vuex";
 
 export default {
-    mixins: [legacyNavigationMixin],
     components: {
         CopyModal,
         SelectorModal,
     },
+    mixins: [legacyNavigationMixin],
     props: {
         histories: { type: Array, required: true },
         history: { type: Object, required: true },
diff --git a/client/src/components/History/CurrentHistory/HistoryOperations/SelectionOperations.vue b/client/src/components/History/CurrentHistory/HistoryOperations/SelectionOperations.vue
index 9651ac38e3c..d5c4beafff6 100644
--- a/client/src/components/History/CurrentHistory/HistoryOperations/SelectionOperations.vue
+++ b/client/src/components/History/CurrentHistory/HistoryOperations/SelectionOperations.vue
@@ -109,6 +109,13 @@ export default {
             return this.totalItemsInQuery === this.selectionSize;
         },
     },
+    watch: {
+        hasSelection(newVal) {
+            if (newVal) {
+                this.$emit("update:show-selection", true);
+            }
+        },
+    },
     methods: {
         // Selected content manipulation, hide/show/delete/purge
         hideSelected() {
@@ -166,12 +173,5 @@ export default {
             }
         },
     },
-    watch: {
-        hasSelection(newVal) {
-            if (newVal) {
-                this.$emit("update:show-selection", true);
-            }
-        },
-    },
 };
 </script>
diff --git a/client/src/components/History/CurrentHistory/HistoryPanel.vue b/client/src/components/History/CurrentHistory/HistoryPanel.vue
index 800229dde03..e06aa3d2b5c 100644
--- a/client/src/components/History/CurrentHistory/HistoryPanel.vue
+++ b/client/src/components/History/CurrentHistory/HistoryPanel.vue
@@ -145,12 +145,6 @@ export default {
             showAdvanced: false,
         };
     },
-    watch: {
-        queryKey() {
-            this.invisible = {};
-            this.offset = 0;
-        },
-    },
     computed: {
         /** @returns {String} */
         historyId() {
@@ -169,6 +163,12 @@ export default {
             return !this.queryDefault;
         },
     },
+    watch: {
+        queryKey() {
+            this.invisible = {};
+            this.offset = 0;
+        },
+    },
     methods: {
         hasMatches(payload) {
             return !!payload && payload.length > 0;
diff --git a/client/src/components/History/Layout/Listing.vue b/client/src/components/History/Layout/Listing.vue
index 1d7be75b324..a84a3ec7d38 100644
--- a/client/src/components/History/Layout/Listing.vue
+++ b/client/src/components/History/Layout/Listing.vue
@@ -37,16 +37,16 @@ export default {
             deltaMax: 20,
         };
     },
-    created() {
-        this.onScrollThrottle = throttle((event) => {
-            this.onScroll(event);
-        }, this.throttlePeriod);
-    },
     watch: {
         queryKey() {
             this.$refs.listing.scrollToOffset(0);
         },
     },
+    created() {
+        this.onScrollThrottle = throttle((event) => {
+            this.onScroll(event);
+        }, this.throttlePeriod);
+    },
     methods: {
         onScrollHandler(event) {
             /* CURRENTLY UNUSED
diff --git a/client/src/components/History/Modals/SelectorModal.vue b/client/src/components/History/Modals/SelectorModal.vue
index 8fcac6a7d06..aab6c6b202e 100644
--- a/client/src/components/History/Modals/SelectorModal.vue
+++ b/client/src/components/History/Modals/SelectorModal.vue
@@ -64,14 +64,6 @@ export default {
             return this.currentRows.findIndex((h) => h.id == this.currentHistory.id);
         },
     },
-    created() {
-        this.fields = [
-            { key: "name", sortable: true },
-            { key: "tags", sortable: true },
-            { key: "update_time", label: "Updated", sortable: true },
-        ];
-        this.debounceSelectCurrentRow = debounce(this.selectCurrentRow, 100);
-    },
     watch: {
         currentRows() {
             this.selectCurrentRow();
@@ -87,6 +79,14 @@ export default {
             }
         },
     },
+    created() {
+        this.fields = [
+            { key: "name", sortable: true },
+            { key: "tags", sortable: true },
+            { key: "update_time", label: "Updated", sortable: true },
+        ];
+        this.debounceSelectCurrentRow = debounce(this.selectCurrentRow, 100);
+    },
     methods: {
         switchToHistory(selected) {
             if (selected.length == 1) {
diff --git a/client/src/components/HistoryExport/ToLink.vue b/client/src/components/HistoryExport/ToLink.vue
index 041f95effdd..e0a8e70c4dd 100644
--- a/client/src/components/HistoryExport/ToLink.vue
+++ b/client/src/components/HistoryExport/ToLink.vue
@@ -77,12 +77,6 @@ export default {
             jobError: null,
         };
     },
-    created() {
-        if (!this.exportsInitialized) {
-            this.exportsInitialized = true;
-            this.loadExports();
-        }
-    },
     computed: {
         hasExports() {
             return this.exports !== null && this.exports.length > 0;
@@ -113,6 +107,12 @@ export default {
             }
         },
     },
+    created() {
+        if (!this.exportsInitialized) {
+            this.exportsInitialized = true;
+            this.loadExports();
+        }
+    },
     methods: {
         loadExports() {
             this.loadingExports = true;
diff --git a/client/src/components/HistoryExport/ToRemoteFile.vue b/client/src/components/HistoryExport/ToRemoteFile.vue
index d26aeb7b121..8d606317c2d 100644
--- a/client/src/components/HistoryExport/ToRemoteFile.vue
+++ b/client/src/components/HistoryExport/ToRemoteFile.vue
@@ -63,11 +63,6 @@ export default {
             required: true,
         },
     },
-    computed: {
-        canExport() {
-            return !!this.name && !!this.directory;
-        },
-    },
     data() {
         return {
             errorMessage: null,
@@ -78,6 +73,11 @@ export default {
             jobError: null,
         };
     },
+    computed: {
+        canExport() {
+            return !!this.name && !!this.directory;
+        },
+    },
     methods: {
         doExport() {
             const data = {
diff --git a/client/src/components/HistoryImport.vue b/client/src/components/HistoryImport.vue
index 06aa21e0bf5..6b7b3fa6c61 100644
--- a/client/src/components/HistoryImport.vue
+++ b/client/src/components/HistoryImport.vue
@@ -95,9 +95,6 @@ export default {
             hasFileSources: false,
         };
     },
-    async mounted() {
-        await this.initialize();
-    },
     computed: {
         importReady() {
             const importType = this.importType;
@@ -115,6 +112,16 @@ export default {
             return `${getAppRoot()}histories/list`;
         },
     },
+    watch: {
+        importType() {
+            if (this.importType == "remoteFilesUri" && !this.sourceRemoteFilesUri) {
+                this.$refs.filesInput.selectFile();
+            }
+        },
+    },
+    async mounted() {
+        await this.initialize();
+    },
     methods: {
         async initialize() {
             const fileSources = await new Services().getFileSources();
@@ -153,13 +160,6 @@ export default {
             }
         },
     },
-    watch: {
-        importType() {
-            if (this.importType == "remoteFilesUri" && !this.sourceRemoteFilesUri) {
-                this.$refs.filesInput.selectFile();
-            }
-        },
-    },
 };
 </script>
 
diff --git a/client/src/components/HistoryView.vue b/client/src/components/HistoryView.vue
index 27cafd3d89d..b57faba7037 100644
--- a/client/src/components/HistoryView.vue
+++ b/client/src/components/HistoryView.vue
@@ -64,6 +64,9 @@ export default {
         const url = getAppRoot() + "history/view/" + this.id;
         this.ajaxCall(url);
     },
+    updated: function () {
+        this.makeHistoryView(this.historyData);
+    },
     methods: {
         ajaxCall: function (url) {
             axios
@@ -107,9 +110,6 @@ export default {
             window.location.reload();
         },
     },
-    updated: function () {
-        this.makeHistoryView(this.historyData);
-    },
 };
 </script>
 
diff --git a/client/src/components/JobDependencies/JobDependencies.vue b/client/src/components/JobDependencies/JobDependencies.vue
index c04326d3e50..072523ea076 100644
--- a/client/src/components/JobDependencies/JobDependencies.vue
+++ b/client/src/components/JobDependencies/JobDependencies.vue
@@ -32,14 +32,14 @@
 import CurrentUser from "components/providers/CurrentUser";
 
 export default {
+    components: {
+        CurrentUser,
+    },
     props: {
         dependencies: {
             type: Array,
             required: true,
         },
     },
-    components: {
-        CurrentUser,
-    },
 };
 </script>
diff --git a/client/src/components/JobDestinationParams/JobDestinationParams.vue b/client/src/components/JobDestinationParams/JobDestinationParams.vue
index 5f325ec9bc2..e03bf65aa3d 100644
--- a/client/src/components/JobDestinationParams/JobDestinationParams.vue
+++ b/client/src/components/JobDestinationParams/JobDestinationParams.vue
@@ -19,23 +19,23 @@ import { mapCacheActions } from "vuex-cache";
 import CurrentUser from "components/providers/CurrentUser";
 
 export default {
+    components: {
+        CurrentUser,
+    },
     props: {
         jobId: {
             type: String,
             required: true,
         },
     },
-    components: {
-        CurrentUser,
-    },
-    created: function () {
-        this.fetchJobDestinationParams(this.jobId);
-    },
     computed: {
         jobDestinationParams: function () {
             return this.$store.getters.jobDestinationParams(this.jobId);
         },
     },
+    created: function () {
+        this.fetchJobDestinationParams(this.jobId);
+    },
     methods: {
         ...mapCacheActions(["fetchJobDestinationParams"]),
     },
diff --git a/client/src/components/JobParameters/JobParameters.vue b/client/src/components/JobParameters/JobParameters.vue
index 15c570d796c..4ff68df9df8 100644
--- a/client/src/components/JobParameters/JobParameters.vue
+++ b/client/src/components/JobParameters/JobParameters.vue
@@ -56,6 +56,10 @@ import JobParametersArrayValue from "./JobParametersArrayValue";
 Vue.use(BootstrapVue);
 
 export default {
+    components: {
+        JobOutputs,
+        JobParametersArrayValue,
+    },
     props: {
         jobId: {
             type: String,
@@ -78,10 +82,6 @@ export default {
             default: true,
         },
     },
-    components: {
-        JobOutputs,
-        JobParametersArrayValue,
-    },
     data() {
         return {
             parameters: [],
@@ -90,16 +90,6 @@ export default {
             isSingleParam: false,
         };
     },
-    created: function () {
-        let url;
-        if (this.jobId) {
-            url = `${getAppRoot()}api/jobs/${this.jobId}/parameters_display`;
-        } else {
-            url = `${getAppRoot()}api/datasets/${this.datasetId}/parameters_display?hda_ldda=${this.datasetType}`;
-        }
-        this.ajaxCall(url);
-        this.isSingleParam = this.param !== undefined && this.param !== "undefined";
-    },
     computed: {
         anyNotes: function () {
             let hasNotes = false;
@@ -118,6 +108,16 @@ export default {
             return parameter ? parameter.value : `Parameter "${this.param}" is not found!`;
         },
     },
+    created: function () {
+        let url;
+        if (this.jobId) {
+            url = `${getAppRoot()}api/jobs/${this.jobId}/parameters_display`;
+        } else {
+            url = `${getAppRoot()}api/datasets/${this.datasetId}/parameters_display?hda_ldda=${this.datasetType}`;
+        }
+        this.ajaxCall(url);
+        this.isSingleParam = this.param !== undefined && this.param !== "undefined";
+    },
     methods: {
         appRoot: function () {
             return getAppRoot();
diff --git a/client/src/components/JobStates/CollectionJobStates.vue b/client/src/components/JobStates/CollectionJobStates.vue
index eb5205acdc3..1b7bc38e183 100644
--- a/client/src/components/JobStates/CollectionJobStates.vue
+++ b/client/src/components/JobStates/CollectionJobStates.vue
@@ -26,14 +26,14 @@ import mixin from "./mixin";
 import ProgressBar from "components/ProgressBar";
 
 export default {
-    props: {
-        collection: { type: Object, required: true }, // backbone model
-        jobStatesSummary: { required: true },
-    },
     components: {
         ProgressBar,
     },
     mixins: [mixin],
+    props: {
+        collection: { type: Object, required: true }, // backbone model
+        jobStatesSummary: { required: true },
+    },
     computed: {
         loadingNote() {
             return `Loading job data for ${this.collectionTypeDescription}`;
diff --git a/client/src/components/Libraries/LibrariesList.vue b/client/src/components/Libraries/LibrariesList.vue
index 189317f3b5c..1ba5f007062 100644
--- a/client/src/components/Libraries/LibrariesList.vue
+++ b/client/src/components/Libraries/LibrariesList.vue
@@ -202,11 +202,6 @@ export default {
         SearchField,
         CurrentUser,
     },
-    computed: {
-        rows() {
-            return this.librariesList.length;
-        },
-    },
     data() {
         return {
             newDescriptionProperty: "newDescription",
@@ -240,6 +235,11 @@ export default {
             titleTotal: _l("total"),
         };
     },
+    computed: {
+        rows() {
+            return this.librariesList.length;
+        },
+    },
     created() {
         this.root = getAppRoot();
         this.services = new Services({ root: this.root });
diff --git a/client/src/components/Libraries/LibraryFolder/LibraryFolder.vue b/client/src/components/Libraries/LibraryFolder/LibraryFolder.vue
index 9d0a7853811..ad6d5d8428f 100644
--- a/client/src/components/Libraries/LibraryFolder/LibraryFolder.vue
+++ b/client/src/components/Libraries/LibraryFolder/LibraryFolder.vue
@@ -302,6 +302,16 @@ function initialFolderState() {
     };
 }
 export default {
+    components: {
+        FolderTopBar,
+        UtcDate,
+        FontAwesomeIcon,
+        CurrentUser,
+    },
+    beforeRouteUpdate(to, from, next) {
+        this.getFolder(to.params.folder_id, to.params.page);
+        next();
+    },
     props: {
         folder_id: {
             type: String,
@@ -313,12 +323,6 @@ export default {
             required: false,
         },
     },
-    components: {
-        FolderTopBar,
-        UtcDate,
-        FontAwesomeIcon,
-        CurrentUser,
-    },
     data() {
         return {
             ...initialFolderState(),
@@ -337,6 +341,13 @@ export default {
             },
         };
     },
+    watch: {
+        perPage: {
+            handler: function (value) {
+                this.fetchFolderContents(this.include_deleted);
+            },
+        },
+    },
     created() {
         this.services = new Services({ root: this.root });
         this.getFolder(this.folder_id, this.page);
@@ -628,17 +639,6 @@ export default {
             }
         },
     },
-    watch: {
-        perPage: {
-            handler: function (value) {
-                this.fetchFolderContents(this.include_deleted);
-            },
-        },
-    },
-    beforeRouteUpdate(to, from, next) {
-        this.getFolder(to.params.folder_id, to.params.page);
-        next();
-    },
 };
 </script>
 
diff --git a/client/src/components/Libraries/LibraryFolder/LibraryFolderDataset/LibraryDataset.vue b/client/src/components/Libraries/LibraryFolder/LibraryFolderDataset/LibraryDataset.vue
index 5589a162d8d..eaedd000701 100644
--- a/client/src/components/Libraries/LibraryFolder/LibraryFolderDataset/LibraryDataset.vue
+++ b/client/src/components/Libraries/LibraryFolder/LibraryFolderDataset/LibraryDataset.vue
@@ -149,6 +149,15 @@ import CurrentUser from "components/providers/CurrentUser";
 library.add(faUsers, faRedo, faBook, faDownload, faPencilAlt, faTimes, faSave);
 
 export default {
+    components: {
+        LibraryBreadcrumb,
+        CopyToClipboard,
+        FontAwesomeIcon,
+        GenomeProvider,
+        DatatypesProvider,
+        SingleItemSelector,
+        CurrentUser,
+    },
     props: {
         dataset_id: {
             type: String,
@@ -159,15 +168,6 @@ export default {
             required: true,
         },
     },
-    components: {
-        LibraryBreadcrumb,
-        CopyToClipboard,
-        FontAwesomeIcon,
-        GenomeProvider,
-        DatatypesProvider,
-        SingleItemSelector,
-        CurrentUser,
-    },
     data() {
         return {
             dataset: undefined,
@@ -181,11 +181,6 @@ export default {
             fields: [{ key: "name" }, { key: "value" }],
         };
     },
-    async created() {
-        this.services = new Services({ root: this.root });
-        const datasetResponse = await this.services.getDataset(this.dataset_id);
-        this.populateDatasetDetailsTable(datasetResponse);
-    },
     computed: {
         datasetChanges() {
             const changes = {};
@@ -203,6 +198,11 @@ export default {
             return false;
         },
     },
+    async created() {
+        this.services = new Services({ root: this.root });
+        const datasetResponse = await this.services.getDataset(this.dataset_id);
+        this.populateDatasetDetailsTable(datasetResponse);
+    },
     methods: {
         populateDatasetDetailsTable(data) {
             this.dataset = data;
diff --git a/client/src/components/Libraries/LibraryFolder/LibraryFolderPermissions/LibraryFolderDatasetPermissions.vue b/client/src/components/Libraries/LibraryFolder/LibraryFolderPermissions/LibraryFolderDatasetPermissions.vue
index 528d5646896..0e296a6e065 100644
--- a/client/src/components/Libraries/LibraryFolder/LibraryFolderPermissions/LibraryFolderDatasetPermissions.vue
+++ b/client/src/components/Libraries/LibraryFolder/LibraryFolderPermissions/LibraryFolderDatasetPermissions.vue
@@ -95,6 +95,12 @@ Vue.use(BootstrapVue);
 initPermissionsIcons();
 
 export default {
+    components: {
+        PermissionsInputField,
+        FontAwesomeIcon,
+        LibraryBreadcrumb,
+        PermissionsHeader,
+    },
     props: {
         folder_id: {
             type: String,
@@ -105,12 +111,6 @@ export default {
             required: true,
         },
     },
-    components: {
-        PermissionsInputField,
-        FontAwesomeIcon,
-        LibraryBreadcrumb,
-        PermissionsHeader,
-    },
     data() {
         return {
             permissions: undefined,
@@ -123,6 +123,11 @@ export default {
             apiRootUrl: `${getAppRoot()}api/libraries/datasets`,
         };
     },
+    computed: {
+        is_unrestricted() {
+            return this.access_dataset_roles ? this.access_dataset_roles.length === 0 : false;
+        },
+    },
     created() {
         const Galaxy = getGalaxyInstance();
         this.root = getAppRoot();
@@ -135,11 +140,6 @@ export default {
             this.dataset = response;
         });
     },
-    computed: {
-        is_unrestricted() {
-            return this.access_dataset_roles ? this.access_dataset_roles.length === 0 : false;
-        },
-    },
     methods: {
         assignFetchedPermissions(fetched_permissions) {
             this.access_dataset_roles = extractRoles(fetched_permissions.access_dataset_roles);
diff --git a/client/src/components/Libraries/LibraryFolder/LibraryFolderPermissions/LibraryFolderPermissions.vue b/client/src/components/Libraries/LibraryFolder/LibraryFolderPermissions/LibraryFolderPermissions.vue
index 3f2dcfd7a65..cd73d4de6e1 100644
--- a/client/src/components/Libraries/LibraryFolder/LibraryFolderPermissions/LibraryFolderPermissions.vue
+++ b/client/src/components/Libraries/LibraryFolder/LibraryFolderPermissions/LibraryFolderPermissions.vue
@@ -56,17 +56,17 @@ Vue.use(BootstrapVue);
 initPermissionsIcons();
 
 export default {
+    components: {
+        PermissionsInputField,
+        PermissionsHeader,
+        FontAwesomeIcon,
+    },
     props: {
         folder_id: {
             type: String,
             required: true,
         },
     },
-    components: {
-        PermissionsInputField,
-        PermissionsHeader,
-        FontAwesomeIcon,
-    },
     data() {
         return {
             permissions: undefined,
diff --git a/client/src/components/Libraries/LibraryFolder/SearchField.vue b/client/src/components/Libraries/LibraryFolder/SearchField.vue
index 4545bb22a8c..e6a9a267f51 100644
--- a/client/src/components/Libraries/LibraryFolder/SearchField.vue
+++ b/client/src/components/Libraries/LibraryFolder/SearchField.vue
@@ -29,12 +29,6 @@ export default {
             titleSearch: _l("Search"),
         };
     },
-    methods: {
-        startSearch() {
-            this.$emit("updateSearch", this.search);
-            this.awaitingSearch = false;
-        },
-    },
     watch: {
         search: function () {
             if (!this.awaitingSearch) {
@@ -45,6 +39,12 @@ export default {
             this.awaitingSearch = true;
         },
     },
+    methods: {
+        startSearch() {
+            this.$emit("updateSearch", this.search);
+            this.awaitingSearch = false;
+        },
+    },
 };
 </script>
 
diff --git a/client/src/components/Libraries/LibraryFolder/TopToolbar/FolderTopBar.vue b/client/src/components/Libraries/LibraryFolder/TopToolbar/FolderTopBar.vue
index 5fd5dacb059..31217b4c676 100644
--- a/client/src/components/Libraries/LibraryFolder/TopToolbar/FolderTopBar.vue
+++ b/client/src/components/Libraries/LibraryFolder/TopToolbar/FolderTopBar.vue
@@ -144,6 +144,12 @@ Vue.use(BootstrapVue);
 
 export default {
     name: "FolderTopBar",
+    components: {
+        SearchField,
+        FontAwesomeIcon,
+        LibraryBreadcrumb,
+        FolderDetails,
+    },
     props: {
         folder_id: {
             type: String,
@@ -174,12 +180,6 @@ export default {
             required: true,
         },
     },
-    components: {
-        SearchField,
-        FontAwesomeIcon,
-        LibraryBreadcrumb,
-        FolderDetails,
-    },
     data() {
         return {
             is_admin: false,
@@ -201,16 +201,6 @@ export default {
             },
         };
     },
-    created() {
-        const Galaxy = getGalaxyInstance();
-        this.services = new Services();
-        this.is_admin = Galaxy.user.attributes.is_admin;
-        this.user_library_import_dir_available = Galaxy.config.user_library_import_dir_available;
-        this.library_import_dir = Galaxy.config.library_import_dir;
-        this.allow_library_path_paste = Galaxy.config.allow_library_path_paste;
-
-        this.fetchExtAndGenomes();
-    },
     computed: {
         contains_file_or_folder: function () {
             return this.folderContents.find((el) => el.type === "folder" || el.type === "file");
@@ -224,6 +214,16 @@ export default {
             return !!(this.contains_file_or_folder && Galaxy.user);
         },
     },
+    created() {
+        const Galaxy = getGalaxyInstance();
+        this.services = new Services();
+        this.is_admin = Galaxy.user.attributes.is_admin;
+        this.user_library_import_dir_available = Galaxy.config.user_library_import_dir_available;
+        this.library_import_dir = Galaxy.config.library_import_dir;
+        this.allow_library_path_paste = Galaxy.config.allow_library_path_paste;
+
+        this.fetchExtAndGenomes();
+    },
     methods: {
         updateSearch: function (value) {
             this.$emit("updateSearch", value);
diff --git a/client/src/components/Libraries/LibraryPermissions/LibraryPermissions.vue b/client/src/components/Libraries/LibraryPermissions/LibraryPermissions.vue
index 0763af3e886..c6c5cc335b4 100644
--- a/client/src/components/Libraries/LibraryPermissions/LibraryPermissions.vue
+++ b/client/src/components/Libraries/LibraryPermissions/LibraryPermissions.vue
@@ -54,17 +54,17 @@ Vue.use(BootstrapVue);
 initPermissionsIcons();
 
 export default {
+    components: {
+        PermissionsHeader,
+        PermissionsInputField,
+        FontAwesomeIcon,
+    },
     props: {
         library_id: {
             type: String,
             required: true,
         },
     },
-    components: {
-        PermissionsHeader,
-        PermissionsInputField,
-        FontAwesomeIcon,
-    },
     data() {
         return {
             permissions: undefined,
diff --git a/client/src/components/Libraries/LibraryPermissions/PermissionsHeader.vue b/client/src/components/Libraries/LibraryPermissions/PermissionsHeader.vue
index 4acae732800..0878ef56b65 100644
--- a/client/src/components/Libraries/LibraryPermissions/PermissionsHeader.vue
+++ b/client/src/components/Libraries/LibraryPermissions/PermissionsHeader.vue
@@ -15,15 +15,15 @@ import { getGalaxyInstance } from "app";
 import LibraryPermissionsWarning from "components/Libraries/LibraryFolder/LibraryFolderPermissions/LibraryPermissionsWarning";
 
 export default {
+    components: {
+        LibraryPermissionsWarning,
+    },
     props: {
         name: {
             type: String,
             required: true,
         },
     },
-    components: {
-        LibraryPermissionsWarning,
-    },
     data() {
         return {
             is_admin: getGalaxyInstance().user.attributes.is_admin,
diff --git a/client/src/components/Libraries/LibraryPermissions/PermissionsInputField.vue b/client/src/components/Libraries/LibraryPermissions/PermissionsInputField.vue
index 4624633e1fe..365ebd90c20 100644
--- a/client/src/components/Libraries/LibraryPermissions/PermissionsInputField.vue
+++ b/client/src/components/Libraries/LibraryPermissions/PermissionsInputField.vue
@@ -44,6 +44,9 @@ import "vue-multiselect/dist/vue-multiselect.min.css";
 
 Vue.use(VueObserveVisibility);
 export default {
+    components: {
+        Multiselect,
+    },
     props: {
         id: {
             type: String,
@@ -70,9 +73,6 @@ export default {
             required: true,
         },
     },
-    components: {
-        Multiselect,
-    },
     data() {
         return {
             permissions: undefined,
@@ -86,17 +86,17 @@ export default {
             fetched_options: [],
         };
     },
+    computed: {
+        hasMorePages() {
+            return this.page * this.page_limit < this.options.total;
+        },
+    },
     created() {
         this.services = new Services({ root: this.root });
         // Avoid mutating a prop directly
         this.assignValue(this.initial_value);
         this.getSelectOptions();
     },
-    computed: {
-        hasMorePages() {
-            return this.page * this.page_limit < this.options.total;
-        },
-    },
     methods: {
         getSelectOptions(searchChanged = false) {
             this.services
diff --git a/client/src/components/License/License.vue b/client/src/components/License/License.vue
index f6061470cc4..61365fc26e9 100644
--- a/client/src/components/License/License.vue
+++ b/client/src/components/License/License.vue
@@ -51,6 +51,13 @@ export default {
             license: this.inputLicenseInfo,
         };
     },
+    watch: {
+        licenseId: function (newLicense, oldLicense) {
+            if (newLicense != oldLicense) {
+                this.fetchLicense();
+            }
+        },
+    },
     created() {
         if (this.license == null) {
             this.fetchLicense();
@@ -68,13 +75,6 @@ export default {
                 });
         },
     },
-    watch: {
-        licenseId: function (newLicense, oldLicense) {
-            if (newLicense != oldLicense) {
-                this.fetchLicense();
-            }
-        },
-    },
 };
 </script>
 
diff --git a/client/src/components/License/LicenseSelector.vue b/client/src/components/License/LicenseSelector.vue
index b24c336d484..0d549e1a43d 100644
--- a/client/src/components/License/LicenseSelector.vue
+++ b/client/src/components/License/LicenseSelector.vue
@@ -59,19 +59,6 @@ export default {
             editLicense: false,
         };
     },
-    mounted() {
-        const url = `${getAppRoot()}api/licenses`;
-        axios
-            .get(url)
-            .then((response) => response.data)
-            .then((data) => {
-                this.licenses = data;
-                this.licensesLoading = false;
-            })
-            .catch((e) => {
-                console.error(e);
-            });
-    },
     computed: {
         currentLicenseInfo() {
             for (const license of this.licenses) {
@@ -103,6 +90,19 @@ export default {
             this.license = this.inputLicense;
         },
     },
+    mounted() {
+        const url = `${getAppRoot()}api/licenses`;
+        axios
+            .get(url)
+            .then((response) => response.data)
+            .then((data) => {
+                this.licenses = data;
+                this.licensesLoading = false;
+            })
+            .catch((e) => {
+                console.error(e);
+            });
+    },
     methods: {
         onSave() {
             this.onLicense(this.license);
diff --git a/client/src/components/Markdown/Elements/HistoryDatasetCollection/CollectionDisplay.vue b/client/src/components/Markdown/Elements/HistoryDatasetCollection/CollectionDisplay.vue
index 9f1ab0b3a7d..979f93e50a5 100644
--- a/client/src/components/Markdown/Elements/HistoryDatasetCollection/CollectionDisplay.vue
+++ b/client/src/components/Markdown/Elements/HistoryDatasetCollection/CollectionDisplay.vue
@@ -81,12 +81,6 @@ export default {
             messageVariant: null,
         };
     },
-    created() {
-        this.getContent().then((data) => {
-            this.itemContent = data;
-            this.loading = false;
-        });
-    },
     computed: {
         collectionName() {
             const collection = this.collections[this.args.history_dataset_collection_id];
@@ -101,6 +95,12 @@ export default {
             return `${getAppRoot()}api/dataset_collections/${this.args.history_dataset_collection_id}/download`;
         },
     },
+    created() {
+        this.getContent().then((data) => {
+            this.itemContent = data;
+            this.loading = false;
+        });
+    },
     methods: {
         onCopyCollection(currentHistoryId) {
             const hdcaId = this.args.history_dataset_collection_id;
diff --git a/client/src/components/Markdown/Elements/Workflow/WorkflowDisplay.vue b/client/src/components/Markdown/Elements/Workflow/WorkflowDisplay.vue
index 927c11c830b..f65a188e581 100644
--- a/client/src/components/Markdown/Elements/Workflow/WorkflowDisplay.vue
+++ b/client/src/components/Markdown/Elements/Workflow/WorkflowDisplay.vue
@@ -71,12 +71,6 @@ export default {
             loading: true,
         };
     },
-    created() {
-        this.getContent().then((data) => {
-            this.itemContent = data;
-            this.loading = false;
-        });
-    },
     computed: {
         workflowName() {
             const workflow = this.workflows[this.args.workflow_id];
@@ -92,6 +86,12 @@ export default {
             return `${getAppRoot()}api/workflows/${this.args.workflow_id}/download?style=preview`;
         },
     },
+    created() {
+        this.getContent().then((data) => {
+            this.itemContent = data;
+            this.loading = false;
+        });
+    },
     methods: {
         async getContent() {
             try {
diff --git a/client/src/components/Masthead/Masthead.vue b/client/src/components/Masthead/Masthead.vue
index 1cc4e547e31..361a7cfdefb 100644
--- a/client/src/components/Masthead/Masthead.vue
+++ b/client/src/components/Masthead/Masthead.vue
@@ -26,6 +26,12 @@ import { loadWebhookMenuItems } from "./_webhooks";
 
 export default {
     name: "Masthead",
+    components: {
+        BNavbar,
+        BNavbarBrand,
+        BNavbarNav,
+        MastheadItem,
+    },
     props: {
         displayGalaxyBrand: {
             type: Boolean,
@@ -60,39 +66,6 @@ export default {
             default: null,
         },
     },
-    components: {
-        BNavbar,
-        BNavbarBrand,
-        BNavbarNav,
-        MastheadItem,
-    },
-    methods: {
-        addItem(item) {
-            this.tabs.push(item);
-        },
-        highlight(activeTab) {
-            this.activeTab = activeTab;
-        },
-        _tabToJson(el) {
-            const defaults = {
-                visible: true,
-                target: "_parent",
-            };
-            let asJson;
-            if (el.toJSON instanceof Function) {
-                asJson = el.toJSON();
-            } else {
-                asJson = el;
-            }
-            return Object.assign({}, defaults, asJson);
-        },
-        _reflectScratchbookFrames() {
-            const frames = this.mastheadState.frame.getFrames();
-            const tab = this.mastheadState.frame.buttonLoad;
-            tab.toggle = frames.visible;
-            tab.icon = (frames.visible && "fa-eye") || "fa-eye-slash";
-        },
-    },
     data() {
         return {
             activeTab: null,
@@ -134,5 +107,32 @@ export default {
                 this._reflectScratchbookFrames();
             });
     },
+    methods: {
+        addItem(item) {
+            this.tabs.push(item);
+        },
+        highlight(activeTab) {
+            this.activeTab = activeTab;
+        },
+        _tabToJson(el) {
+            const defaults = {
+                visible: true,
+                target: "_parent",
+            };
+            let asJson;
+            if (el.toJSON instanceof Function) {
+                asJson = el.toJSON();
+            } else {
+                asJson = el;
+            }
+            return Object.assign({}, defaults, asJson);
+        },
+        _reflectScratchbookFrames() {
+            const frames = this.mastheadState.frame.getFrames();
+            const tab = this.mastheadState.frame.buttonLoad;
+            tab.toggle = frames.visible;
+            tab.icon = (frames.visible && "fa-eye") || "fa-eye-slash";
+        },
+    },
 };
 </script>
diff --git a/client/src/components/NewUserWelcome/NewUserWelcome.vue b/client/src/components/NewUserWelcome/NewUserWelcome.vue
index ee2ee7d7718..2b4f973b9d3 100644
--- a/client/src/components/NewUserWelcome/NewUserWelcome.vue
+++ b/client/src/components/NewUserWelcome/NewUserWelcome.vue
@@ -35,14 +35,14 @@ export default {
         Slides,
         ConfigProvider,
     },
+    props: {
+        newUserDict: { type: Object, required: true },
+    },
     data() {
         return {
             position: [],
         };
     },
-    props: {
-        newUserDict: { type: Object, required: true },
-    },
     computed: {
         depth() {
             return this.position.length;
diff --git a/client/src/components/PageDisplay/PageDisplay.vue b/client/src/components/PageDisplay/PageDisplay.vue
index a74982baa89..756a98b30e7 100644
--- a/client/src/components/PageDisplay/PageDisplay.vue
+++ b/client/src/components/PageDisplay/PageDisplay.vue
@@ -27,6 +27,11 @@ export default {
             required: true,
         },
     },
+    data() {
+        return {
+            markdownConfig: {},
+        };
+    },
     computed: {
         dataUrl() {
             return `${getAppRoot()}api/pages/${this.pageId}`;
@@ -38,11 +43,6 @@ export default {
             return `${getAppRoot()}page/edit_content?id=${this.pageId}`;
         },
     },
-    data() {
-        return {
-            markdownConfig: {},
-        };
-    },
     created() {
         this.getContent().then((data) => {
             this.markdownConfig = { ...data, markdown: data.content };
diff --git a/client/src/components/PageEditor/PageEditor.vue b/client/src/components/PageEditor/PageEditor.vue
index 0f63cdc27bf..5b450f86007 100644
--- a/client/src/components/PageEditor/PageEditor.vue
+++ b/client/src/components/PageEditor/PageEditor.vue
@@ -20,6 +20,11 @@ import PageEditorHtml from "./PageEditorHtml";
 import PageEditorMarkdown from "./PageEditorMarkdown";
 
 export default {
+    components: {
+        PageEditorHtml,
+        PageEditorMarkdown,
+        LoadingSpan,
+    },
     props: {
         pageId: {
             required: true,
@@ -36,11 +41,6 @@ export default {
             loading: true,
         };
     },
-    components: {
-        PageEditorHtml,
-        PageEditorMarkdown,
-        LoadingSpan,
-    },
     created() {
         this.getPage(this.pageId)
             .then((data) => {
diff --git a/client/src/components/PageEditor/PageEditorMarkdown.vue b/client/src/components/PageEditor/PageEditorMarkdown.vue
index d5b83bdc2bc..b6efaa01e5b 100644
--- a/client/src/components/PageEditor/PageEditorMarkdown.vue
+++ b/client/src/components/PageEditor/PageEditorMarkdown.vue
@@ -48,11 +48,6 @@ export default {
         MarkdownEditor,
         FontAwesomeIcon,
     },
-    data: function () {
-        return {
-            markdownText: this.content,
-        };
-    },
     props: {
         pageId: {
             required: true,
@@ -75,6 +70,11 @@ export default {
             default: null,
         },
     },
+    data: function () {
+        return {
+            markdownText: this.content,
+        };
+    },
     methods: {
         onUpdate(newContent) {
             this.markdownText = newContent;
diff --git a/client/src/components/Panels/Buttons/FavoritesButton.vue b/client/src/components/Panels/Buttons/FavoritesButton.vue
index 890c8e1e652..8b4c27e153e 100644
--- a/client/src/components/Panels/Buttons/FavoritesButton.vue
+++ b/client/src/components/Panels/Buttons/FavoritesButton.vue
@@ -30,11 +30,6 @@ export default {
             toggle: false,
         };
     },
-    watch: {
-        query() {
-            this.toggle = this.query == this.searchKey;
-        },
-    },
     computed: {
         tooltipText() {
             if (this.toggle) {
@@ -44,6 +39,11 @@ export default {
             }
         },
     },
+    watch: {
+        query() {
+            this.toggle = this.query == this.searchKey;
+        },
+    },
     methods: {
         onFavorites() {
             this.toggle = !this.toggle;
diff --git a/client/src/components/Panels/Common/ToolSection.vue b/client/src/components/Panels/Common/ToolSection.vue
index 772690ea0b1..67da86ad03f 100644
--- a/client/src/components/Panels/Common/ToolSection.vue
+++ b/client/src/components/Panels/Common/ToolSection.vue
@@ -100,17 +100,6 @@ export default {
             hover: false,
         };
     },
-    watch: {
-        queryFilter() {
-            this.opened = this.checkFilter();
-        },
-        opened(newVal, oldVal) {
-            if (newVal !== oldVal) {
-                const currentState = newVal ? "opened" : "closed";
-                ariaAlert(`${this.name} tools menu ${currentState}`);
-            }
-        },
-    },
     computed: {
         name() {
             return this.category.title || this.category.name;
@@ -128,6 +117,24 @@ export default {
             return this.category.links || {};
         },
     },
+    watch: {
+        queryFilter() {
+            this.opened = this.checkFilter();
+        },
+        opened(newVal, oldVal) {
+            if (newVal !== oldVal) {
+                const currentState = newVal ? "opened" : "closed";
+                ariaAlert(`${this.name} tools menu ${currentState}`);
+            }
+        },
+    },
+    created() {
+        this.eventHub.$on("openToolSection", (sectionId) => {
+            if (this.isSection && sectionId == this.category?.id) {
+                this.toggleMenu(true);
+            }
+        });
+    },
     methods: {
         checkFilter() {
             return !this.disableFilter && !!this.queryFilter;
@@ -142,13 +149,6 @@ export default {
             this.opened = nextState;
         },
     },
-    created() {
-        this.eventHub.$on("openToolSection", (sectionId) => {
-            if (this.isSection && sectionId == this.category?.id) {
-                this.toggleMenu(true);
-            }
-        });
-    },
 };
 </script>
 
diff --git a/client/src/components/Panels/ToolBoxWorkflow.vue b/client/src/components/Panels/ToolBoxWorkflow.vue
index 458ac99971e..318ecd935db 100644
--- a/client/src/components/Panels/ToolBoxWorkflow.vue
+++ b/client/src/components/Panels/ToolBoxWorkflow.vue
@@ -77,12 +77,6 @@ export default {
         ToolSearch,
         PanelViewButton,
     },
-    data() {
-        return {
-            query: null,
-            results: null,
-        };
-    },
     props: {
         toolbox: {
             type: Array,
@@ -107,6 +101,12 @@ export default {
             required: true,
         },
     },
+    data() {
+        return {
+            query: null,
+            results: null,
+        };
+    },
     computed: {
         hasWorkflowSection() {
             return this.workflows.length > 0;
diff --git a/client/src/components/RuleBuilder/IdentifierDisplay.vue b/client/src/components/RuleBuilder/IdentifierDisplay.vue
index 54f1ce1ca4b..9df329ad78a 100644
--- a/client/src/components/RuleBuilder/IdentifierDisplay.vue
+++ b/client/src/components/RuleBuilder/IdentifierDisplay.vue
@@ -25,14 +25,6 @@ export default {
             required: true,
         },
     },
-    methods: {
-        remove() {
-            this.$emit("remove");
-        },
-        edit() {
-            this.$emit("edit");
-        },
-    },
     computed: {
         typeDisplay() {
             return MAPPING_TARGETS[this.type].label;
@@ -50,5 +42,13 @@ export default {
             return RuleDefs.columnDisplay(this.columns, this.colHeaders);
         },
     },
+    methods: {
+        remove() {
+            this.$emit("remove");
+        },
+        edit() {
+            this.$emit("edit");
+        },
+    },
 };
 </script>
diff --git a/client/src/components/RuleBuilder/RuleComponent.vue b/client/src/components/RuleBuilder/RuleComponent.vue
index c3cd50e34bf..4c69d0ef216 100644
--- a/client/src/components/RuleBuilder/RuleComponent.vue
+++ b/client/src/components/RuleBuilder/RuleComponent.vue
@@ -12,12 +12,6 @@
 import _l from "utils/localization";
 
 export default {
-    data: function () {
-        return {
-            applyLabel: _l("Apply"),
-            cancelLabel: _l("Cancel"),
-        };
-    },
     props: {
         ruleType: {
             type: String,
@@ -30,6 +24,17 @@ export default {
             required: true,
         },
     },
+    data: function () {
+        return {
+            applyLabel: _l("Apply"),
+            cancelLabel: _l("Cancel"),
+        };
+    },
+    computed: {
+        typeToClass() {
+            return "rule-edit-" + this.ruleType.replace(/_/g, "-");
+        },
+    },
     methods: {
         cancel() {
             this.$emit("update:displayRuleType", null);
@@ -39,10 +44,5 @@ export default {
             this.cancel();
         },
     },
-    computed: {
-        typeToClass() {
-            return "rule-edit-" + this.ruleType.replace(/_/g, "-");
-        },
-    },
 };
 </script>
diff --git a/client/src/components/RuleBuilder/SavedRulesSelector.vue b/client/src/components/RuleBuilder/SavedRulesSelector.vue
index 2acbeba2a39..306527c6597 100644
--- a/client/src/components/RuleBuilder/SavedRulesSelector.vue
+++ b/client/src/components/RuleBuilder/SavedRulesSelector.vue
@@ -30,11 +30,6 @@ import { RULES, MAPPING_TARGETS } from "mvc/rules/rule-definitions";
 
 Vue.use(BootstrapVue);
 export default {
-    data: function () {
-        return {
-            savedRulesMenu: _l("Recently used rules"),
-        };
-    },
     props: {
         savedRules: {
             type: Array,
@@ -45,6 +40,11 @@ export default {
             required: true,
         },
     },
+    data: function () {
+        return {
+            savedRulesMenu: _l("Recently used rules"),
+        };
+    },
     computed: {
         numOfSavedRules: function () {
             return this.savedRules.length;
diff --git a/client/src/components/RuleCollectionBuilder.vue b/client/src/components/RuleCollectionBuilder.vue
index e3ed0f9c99f..e2a837374f5 100644
--- a/client/src/components/RuleCollectionBuilder.vue
+++ b/client/src/components/RuleCollectionBuilder.vue
@@ -607,6 +607,73 @@ const deferredToPromise = (d) => {
 };
 
 export default {
+    components: {
+        TooltipOnHover,
+        HotTable,
+        RuleComponent,
+        RuleTargetComponent,
+        SavedRulesSelector,
+        RuleDisplay,
+        IdentifierDisplay,
+        ColumnSelector,
+        RegularExpressionInput,
+        StateDiv,
+        RuleModalHeader,
+        RuleModalMiddle,
+        RuleModalFooter,
+        Select2,
+    },
+    mixins: [SaveRules],
+    props: {
+        initialElements: {
+            required: true,
+        },
+        importType: {
+            type: String,
+            required: false,
+            default: "collections",
+        },
+        elementsType: {
+            type: String,
+            required: false,
+            default: "datasets",
+        },
+        // required if elementsType is "datasets" - hook into Backbone code for creating
+        // collections from HDAs, etc...
+        creationFn: {
+            required: false,
+            type: Function,
+        },
+        // required if elementsType is "collection_contents" - hook into tool form to update
+        // rule parameter
+        saveRulesFn: {
+            required: false,
+            type: Function,
+        },
+        initialRules: {
+            required: false,
+            type: Object,
+        },
+        defaultHideSourceItems: {
+            type: Boolean,
+            required: false,
+            default: true,
+        },
+        // Callbacks sent in by modal code.
+        oncancel: {
+            required: true,
+            type: Function,
+        },
+        oncreate: {
+            required: true,
+            type: Function,
+        },
+        ftpUploadSite: {
+            type: String,
+            required: false,
+            default: null,
+        },
+    },
     data: function () {
         let orientation = "vertical";
         let mapping;
@@ -752,56 +819,6 @@ export default {
             validityErrorHeader: _l("These issues must be resolved to proceed:"),
         };
     },
-    props: {
-        initialElements: {
-            required: true,
-        },
-        importType: {
-            type: String,
-            required: false,
-            default: "collections",
-        },
-        elementsType: {
-            type: String,
-            required: false,
-            default: "datasets",
-        },
-        // required if elementsType is "datasets" - hook into Backbone code for creating
-        // collections from HDAs, etc...
-        creationFn: {
-            required: false,
-            type: Function,
-        },
-        // required if elementsType is "collection_contents" - hook into tool form to update
-        // rule parameter
-        saveRulesFn: {
-            required: false,
-            type: Function,
-        },
-        initialRules: {
-            required: false,
-            type: Object,
-        },
-        defaultHideSourceItems: {
-            type: Boolean,
-            required: false,
-            default: true,
-        },
-        // Callbacks sent in by modal code.
-        oncancel: {
-            required: true,
-            type: Function,
-        },
-        oncreate: {
-            required: true,
-            type: Function,
-        },
-        ftpUploadSite: {
-            type: String,
-            required: false,
-            default: null,
-        },
-    },
     computed: {
         returnValidityErrorMessages: function () {
             return this.validityErrorMessages;
@@ -1112,7 +1129,61 @@ export default {
             return this.hotData.colHeadersPerRule;
         },
     },
-    mixins: [SaveRules],
+    watch: {
+        addColumnRegexType: function (val) {
+            if (val == "groups") {
+                this.addColumnRegexGroupCount = 1;
+            }
+            if (val == "replacement") {
+                this.addColumnRegexReplacement = null;
+            }
+        },
+    },
+    created() {
+        if (this.elementsType !== "collection_contents") {
+            let columnCount = null;
+            if (this.elementsType == "datasets") {
+                for (const element of this.initialElements) {
+                    if (element.history_content_type == "dataset_collection") {
+                        this.errorMessage =
+                            "This component can only be used with datasets, you have specified one or more collections.";
+                        this.state = "error";
+                    }
+                }
+            } else {
+                for (const row of this.initialElements) {
+                    if (columnCount == null) {
+                        columnCount = row.length;
+                    } else {
+                        if (columnCount != row.length) {
+                            this.jaggedData = true;
+                            break;
+                        }
+                    }
+                }
+            }
+
+            // TODO: provider...
+            UploadUtils.getUploadDatatypes(false, UploadUtils.AUTO_EXTENSION)
+                .then((extensions) => {
+                    this.extensions = extensions;
+                    this.extension = UploadUtils.DEFAULT_EXTENSION;
+                })
+                .catch((err) => {
+                    console.log("Error in RuleCollectionBuilder, unable to load datatypes", err);
+                });
+
+            // TODO: provider...
+            UploadUtils.getUploadGenomes(UploadUtils.DEFAULT_GENOME)
+                .then((genomes) => {
+                    this.genomes = genomes;
+                    this.genome = UploadUtils.DEFAULT_GENOME;
+                })
+                .catch((err) => {
+                    console.log("Error in RuleCollectionBuilder, unable to load genomes", err);
+                });
+        }
+    },
     methods: {
         restoreRules(event) {
             const json = JSON.parse(event);
@@ -1662,77 +1733,6 @@ export default {
             return res;
         },
     },
-    created() {
-        if (this.elementsType !== "collection_contents") {
-            let columnCount = null;
-            if (this.elementsType == "datasets") {
-                for (const element of this.initialElements) {
-                    if (element.history_content_type == "dataset_collection") {
-                        this.errorMessage =
-                            "This component can only be used with datasets, you have specified one or more collections.";
-                        this.state = "error";
-                    }
-                }
-            } else {
-                for (const row of this.initialElements) {
-                    if (columnCount == null) {
-                        columnCount = row.length;
-                    } else {
-                        if (columnCount != row.length) {
-                            this.jaggedData = true;
-                            break;
-                        }
-                    }
-                }
-            }
-
-            // TODO: provider...
-            UploadUtils.getUploadDatatypes(false, UploadUtils.AUTO_EXTENSION)
-                .then((extensions) => {
-                    this.extensions = extensions;
-                    this.extension = UploadUtils.DEFAULT_EXTENSION;
-                })
-                .catch((err) => {
-                    console.log("Error in RuleCollectionBuilder, unable to load datatypes", err);
-                });
-
-            // TODO: provider...
-            UploadUtils.getUploadGenomes(UploadUtils.DEFAULT_GENOME)
-                .then((genomes) => {
-                    this.genomes = genomes;
-                    this.genome = UploadUtils.DEFAULT_GENOME;
-                })
-                .catch((err) => {
-                    console.log("Error in RuleCollectionBuilder, unable to load genomes", err);
-                });
-        }
-    },
-    watch: {
-        addColumnRegexType: function (val) {
-            if (val == "groups") {
-                this.addColumnRegexGroupCount = 1;
-            }
-            if (val == "replacement") {
-                this.addColumnRegexReplacement = null;
-            }
-        },
-    },
-    components: {
-        TooltipOnHover,
-        HotTable,
-        RuleComponent,
-        RuleTargetComponent,
-        SavedRulesSelector,
-        RuleDisplay,
-        IdentifierDisplay,
-        ColumnSelector,
-        RegularExpressionInput,
-        StateDiv,
-        RuleModalHeader,
-        RuleModalMiddle,
-        RuleModalFooter,
-        Select2,
-    },
 };
 </script>
 
diff --git a/client/src/components/RulesDisplay/RulesDisplay.vue b/client/src/components/RulesDisplay/RulesDisplay.vue
index eae1d74b111..753b0e4d48e 100644
--- a/client/src/components/RulesDisplay/RulesDisplay.vue
+++ b/client/src/components/RulesDisplay/RulesDisplay.vue
@@ -22,6 +22,16 @@ import RuleDisplayPreview from "./RuleDisplayPreview";
 import IdentifierDisplayPreview from "./IdentifierDisplayPreview";
 
 export default {
+    components: {
+        RuleDisplayPreview,
+        IdentifierDisplayPreview,
+    },
+    props: {
+        inputRules: {
+            required: false,
+            type: Object,
+        },
+    },
     data: function () {
         return {};
     },
@@ -42,15 +52,5 @@ export default {
             return RuleDefs.colHeadersFor([], columns);
         },
     },
-    props: {
-        inputRules: {
-            required: false,
-            type: Object,
-        },
-    },
-    components: {
-        RuleDisplayPreview,
-        IdentifierDisplayPreview,
-    },
 };
 </script>
diff --git a/client/src/components/SchemaOrg/OrganizationForm.vue b/client/src/components/SchemaOrg/OrganizationForm.vue
index c755650bdb0..88b6964504c 100644
--- a/client/src/components/SchemaOrg/OrganizationForm.vue
+++ b/client/src/components/SchemaOrg/OrganizationForm.vue
@@ -45,10 +45,10 @@ import { faEyeSlash, faLink } from "@fortawesome/free-solid-svg-icons";
 library.add(faEyeSlash, faLink);
 
 export default {
-    mixins: [ThingFormMixin],
     components: {
         FontAwesomeIcon,
     },
+    mixins: [ThingFormMixin],
     props: {
         organization: {
             type: Object,
diff --git a/client/src/components/SchemaOrg/OrganizationViewer.vue b/client/src/components/SchemaOrg/OrganizationViewer.vue
index 5c195ec5e6a..0c759cefa31 100644
--- a/client/src/components/SchemaOrg/OrganizationViewer.vue
+++ b/client/src/components/SchemaOrg/OrganizationViewer.vue
@@ -42,10 +42,10 @@ import { faExternalLinkAlt, faBuilding } from "@fortawesome/free-solid-svg-icons
 library.add(faExternalLinkAlt, faBuilding);
 
 export default {
-    mixins: [ThingViewerMixin],
     components: {
         FontAwesomeIcon,
     },
+    mixins: [ThingViewerMixin],
     props: {
         organization: {
             type: Object,
diff --git a/client/src/components/SchemaOrg/PersonForm.vue b/client/src/components/SchemaOrg/PersonForm.vue
index 1aca50efd53..61b87a9a41b 100644
--- a/client/src/components/SchemaOrg/PersonForm.vue
+++ b/client/src/components/SchemaOrg/PersonForm.vue
@@ -50,10 +50,10 @@ import { faEyeSlash, faLink } from "@fortawesome/free-solid-svg-icons";
 library.add(faEyeSlash, faLink);
 
 export default {
-    mixins: [ThingFormMixin],
     components: {
         FontAwesomeIcon,
     },
+    mixins: [ThingFormMixin],
     props: {
         person: {
             type: Object,
diff --git a/client/src/components/SchemaOrg/PersonViewer.vue b/client/src/components/SchemaOrg/PersonViewer.vue
index ec46fcafc6c..291b0a3bc26 100644
--- a/client/src/components/SchemaOrg/PersonViewer.vue
+++ b/client/src/components/SchemaOrg/PersonViewer.vue
@@ -49,10 +49,10 @@ import { faOrcid } from "@fortawesome/free-brands-svg-icons";
 library.add(faOrcid, faUser, faExternalLinkAlt);
 
 export default {
-    mixins: [ThingViewerMixin],
     components: {
         FontAwesomeIcon,
     },
+    mixins: [ThingViewerMixin],
     props: {
         person: {
             type: Object,
diff --git a/client/src/components/Select2.vue b/client/src/components/Select2.vue
index 2cba43edb57..4e5f7af857b 100644
--- a/client/src/components/Select2.vue
+++ b/client/src/components/Select2.vue
@@ -11,6 +11,19 @@ import $ from "jquery";
 
 export default {
     props: ["options", "value", "placeholder", "containerClass", "enabled"],
+    watch: {
+        value: function (value) {
+            // update value
+            $(this.$el).val(value);
+        },
+        options: function (options) {
+            // update options
+            $(this.$el).empty().select2({ data: options });
+        },
+        enabled: function (value) {
+            $(this.$el).select2("enable", value);
+        },
+    },
     mounted: function () {
         const vm = this;
         // TODO: refactor property list to objects that allow defaults and types
@@ -38,19 +51,6 @@ export default {
                 vm.$emit("input", event.val);
             });
     },
-    watch: {
-        value: function (value) {
-            // update value
-            $(this.$el).val(value);
-        },
-        options: function (options) {
-            // update options
-            $(this.$el).empty().select2({ data: options });
-        },
-        enabled: function (value) {
-            $(this.$el).select2("enable", value);
-        },
-    },
     destroyed: function () {
         $(this.$el).off().select2("destroy");
     },
diff --git a/client/src/components/SelectionDialog/DataDialogTable.vue b/client/src/components/SelectionDialog/DataDialogTable.vue
index 8b951b3166b..3a39d7d2cb3 100644
--- a/client/src/components/SelectionDialog/DataDialogTable.vue
+++ b/client/src/components/SelectionDialog/DataDialogTable.vue
@@ -140,14 +140,6 @@ export default {
             perPage: 100,
         };
     },
-    watch: {
-        items: {
-            immediate: true,
-            handler(items) {
-                this.filtered(items);
-            },
-        },
-    },
     computed: {
         fields: function () {
             const fields = [];
@@ -165,6 +157,14 @@ export default {
             return fields;
         },
     },
+    watch: {
+        items: {
+            immediate: true,
+            handler(items) {
+                this.filtered(items);
+            },
+        },
+    },
     methods: {
         selectionIcon(variant) {
             switch (variant) {
diff --git a/client/src/components/SelectionDialog/SelectionDialog.vue b/client/src/components/SelectionDialog/SelectionDialog.vue
index 6acda0d7e73..0e9542f4a3a 100644
--- a/client/src/components/SelectionDialog/SelectionDialog.vue
+++ b/client/src/components/SelectionDialog/SelectionDialog.vue
@@ -39,6 +39,9 @@ import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 Vue.use(BootstrapVue);
 
 export default {
+    components: {
+        FontAwesomeIcon,
+    },
     props: {
         multiple: {
             type: Boolean,
@@ -74,9 +77,6 @@ export default {
             required: false,
         },
     },
-    components: {
-        FontAwesomeIcon,
-    },
 };
 </script>
 
diff --git a/client/src/components/SingleItemSelector.vue b/client/src/components/SingleItemSelector.vue
index a0c6f28eb1d..bc0c4e7446c 100644
--- a/client/src/components/SingleItemSelector.vue
+++ b/client/src/components/SingleItemSelector.vue
@@ -64,11 +64,6 @@ export default {
             selectedItem: {},
         };
     },
-    methods: {
-        onSelectItem(item) {
-            this.$emit("update:selected-item", item);
-        },
-    },
     computed: {
         /** @return {String} */
         loadingMessage() {
@@ -80,5 +75,10 @@ export default {
             this.selectedItem = this.items.find((item) => item.id == this.currentItemId);
         },
     },
+    methods: {
+        onSelectItem(item) {
+            this.$emit("update:selected-item", item);
+        },
+    },
 };
 </script>
diff --git a/client/src/components/Tool/ToolCard.vue b/client/src/components/Tool/ToolCard.vue
index 8338deac6ab..bccbdf318a3 100644
--- a/client/src/components/Tool/ToolCard.vue
+++ b/client/src/components/Tool/ToolCard.vue
@@ -172,11 +172,6 @@ export default {
             errorText: null,
         };
     },
-    watch: {
-        id() {
-            this.errorText = null;
-        },
-    },
     computed: {
         versions() {
             return this.options.versions;
@@ -205,6 +200,11 @@ export default {
             return this.getFavorites().tools.includes(this.id);
         },
     },
+    watch: {
+        id() {
+            this.errorText = null;
+        },
+    },
     created() {
         // add tool menu webhooks
         Webhooks.load({
diff --git a/client/src/components/Tool/ToolFooter.vue b/client/src/components/Tool/ToolFooter.vue
index f15b83248c7..4cdc41b07b8 100644
--- a/client/src/components/Tool/ToolFooter.vue
+++ b/client/src/components/Tool/ToolFooter.vue
@@ -108,6 +108,11 @@ export default {
             type: Array,
         },
     },
+    data() {
+        return {
+            citations: [],
+        };
+    },
     computed: {
         hasRequirements() {
             return this.requirements && this.requirements.length > 0;
@@ -127,11 +132,6 @@ export default {
             );
         },
     },
-    data() {
-        return {
-            citations: [],
-        };
-    },
     watch: {
         id() {
             this.loadCitations();
diff --git a/client/src/components/Tool/ToolForm.vue b/client/src/components/Tool/ToolForm.vue
index 1867598ae9e..f6be5049a13 100644
--- a/client/src/components/Tool/ToolForm.vue
+++ b/client/src/components/Tool/ToolForm.vue
@@ -165,22 +165,6 @@ export default {
             currentVersion: this.version,
         };
     },
-    created() {
-        this.requestTool().then(() => {
-            const Galaxy = getGalaxyInstance();
-            if (Galaxy && Galaxy.currHistoryPanel) {
-                console.debug(`ToolForm::created - Started listening to history changes. [${this.id}]`);
-                Galaxy.currHistoryPanel.collection.on("change", this.onHistoryChange, this);
-            }
-        });
-    },
-    beforeDestroy() {
-        const Galaxy = getGalaxyInstance();
-        if (Galaxy && Galaxy.currHistoryPanel) {
-            Galaxy.currHistoryPanel.collection.off("change", this.onHistoryChange, this);
-            console.debug(`ToolForm::beforeDestroy - Stopped listening to history changes. [${this.id}]`);
-        }
-    },
     computed: {
         toolName() {
             return this.formConfig.name;
@@ -206,6 +190,22 @@ export default {
             }
         },
     },
+    created() {
+        this.requestTool().then(() => {
+            const Galaxy = getGalaxyInstance();
+            if (Galaxy && Galaxy.currHistoryPanel) {
+                console.debug(`ToolForm::created - Started listening to history changes. [${this.id}]`);
+                Galaxy.currHistoryPanel.collection.on("change", this.onHistoryChange, this);
+            }
+        });
+    },
+    beforeDestroy() {
+        const Galaxy = getGalaxyInstance();
+        if (Galaxy && Galaxy.currHistoryPanel) {
+            Galaxy.currHistoryPanel.collection.off("change", this.onHistoryChange, this);
+            console.debug(`ToolForm::beforeDestroy - Stopped listening to history changes. [${this.id}]`);
+        }
+    },
     methods: {
         emailAllowed(config, user) {
             return config.server_mail_configured && !user.isAnonymous;
diff --git a/client/src/components/ToolEntryPoints/ToolEntryPoints.vue b/client/src/components/ToolEntryPoints/ToolEntryPoints.vue
index 73f9ad449ad..a0380aa06d5 100644
--- a/client/src/components/ToolEntryPoints/ToolEntryPoints.vue
+++ b/client/src/components/ToolEntryPoints/ToolEntryPoints.vue
@@ -42,17 +42,17 @@ export default {
             entryPoints: [],
         };
     },
+    computed: {
+        interactiveToolsLink: function () {
+            return getAppRoot() + "interactivetool_entry_points/list";
+        },
+    },
     created: function () {
         this.pollEntryPoints();
     },
     beforeDestroy: function () {
         clearPolling();
     },
-    computed: {
-        interactiveToolsLink: function () {
-            return getAppRoot() + "interactivetool_entry_points/list";
-        },
-    },
     methods: {
         pollEntryPoints: function () {
             const onUpdate = (entryPoints) => {
diff --git a/client/src/components/ToolRecommendation.vue b/client/src/components/ToolRecommendation.vue
index b2dc6dd8cfc..a25ec2fc8f1 100644
--- a/client/src/components/ToolRecommendation.vue
+++ b/client/src/components/ToolRecommendation.vue
@@ -35,9 +35,6 @@ export default {
             showMessage: false,
         };
     },
-    created() {
-        this.loadRecommendations();
-    },
     computed: {
         getToolId() {
             let toolId = this.toolId || "";
@@ -48,6 +45,9 @@ export default {
             return toolId;
         },
     },
+    created() {
+        this.loadRecommendations();
+    },
     methods: {
         loadRecommendations() {
             const toolId = this.getToolId;
diff --git a/client/src/components/ToolsView/ToolsSchemaJson/ToolsJson.vue b/client/src/components/ToolsView/ToolsSchemaJson/ToolsJson.vue
index 7e4f7b1c10f..96165601009 100644
--- a/client/src/components/ToolsView/ToolsSchemaJson/ToolsJson.vue
+++ b/client/src/components/ToolsView/ToolsSchemaJson/ToolsJson.vue
@@ -10,6 +10,21 @@ export default {
     data() {
         return { schemaTagObj: {} };
     },
+    created() {
+        axios
+            .get(`${getAppRoot()}api/tools?tool_help=True`)
+            .then((response) => {
+                this.schemaTagObj = this.createToolsJson(response.data);
+                const el = document.createElement("script");
+                el.id = "schema-json";
+                el.type = "application/ld+json";
+                el.text = JSON.stringify(this.schemaTagObj);
+                document.head.appendChild(el);
+            })
+            .catch((error) => {
+                console.error(error);
+            });
+    },
     methods: {
         createToolsJson(tools) {
             function extractSections(acc, section) {
@@ -41,20 +56,5 @@ export default {
             };
         },
     },
-    created() {
-        axios
-            .get(`${getAppRoot()}api/tools?tool_help=True`)
-            .then((response) => {
-                this.schemaTagObj = this.createToolsJson(response.data);
-                const el = document.createElement("script");
-                el.id = "schema-json";
-                el.type = "application/ld+json";
-                el.text = JSON.stringify(this.schemaTagObj);
-                document.head.appendChild(el);
-            })
-            .catch((error) => {
-                console.error(error);
-            });
-    },
 };
 </script>
diff --git a/client/src/components/Toolshed/Index.vue b/client/src/components/Toolshed/Index.vue
index f09f6923faf..b442d9f71a2 100644
--- a/client/src/components/Toolshed/Index.vue
+++ b/client/src/components/Toolshed/Index.vue
@@ -55,16 +55,16 @@ export default {
             titleClearSearch: _l("clear search (esc)"),
         };
     },
-    watch: {
-        tabValue() {
-            this.setQuery("");
-        },
-    },
     computed: {
         queryEmpty() {
             return !this.query || this.query.length < this.queryLength;
         },
     },
+    watch: {
+        tabValue() {
+            this.setQuery("");
+        },
+    },
     methods: {
         clearTimer() {
             if (this.queryTimer) {
diff --git a/client/src/components/Toolshed/InstalledList/Details.vue b/client/src/components/Toolshed/InstalledList/Details.vue
index 18b75966f22..4e304e99a9e 100644
--- a/client/src/components/Toolshed/InstalledList/Details.vue
+++ b/client/src/components/Toolshed/InstalledList/Details.vue
@@ -20,16 +20,16 @@ import RepositoryDetails from "../RepositoryDetails/Index.vue";
 import LoadingSpan from "components/LoadingSpan";
 
 export default {
+    components: {
+        LoadingSpan,
+        RepositoryDetails,
+    },
     props: {
         repo: {
             type: Object,
             required: true,
         },
     },
-    components: {
-        LoadingSpan,
-        RepositoryDetails,
-    },
     data() {
         return {
             loading: true,
diff --git a/client/src/components/Toolshed/SearchList/Categories.vue b/client/src/components/Toolshed/SearchList/Categories.vue
index cb4021a42b3..4cf05386b9f 100644
--- a/client/src/components/Toolshed/SearchList/Categories.vue
+++ b/client/src/components/Toolshed/SearchList/Categories.vue
@@ -23,6 +23,7 @@ import LoadingSpan from "components/LoadingSpan";
 Vue.use(BootstrapVue);
 
 export default {
+    components: { LoadingSpan },
     props: {
         toolshedUrl: {
             type: String,
@@ -33,7 +34,6 @@ export default {
             required: true,
         },
     },
-    components: { LoadingSpan },
     data() {
         return {
             categories: [],
@@ -44,15 +44,15 @@ export default {
             ],
         };
     },
-    created() {
-        this.services = new Services();
-        this.load();
-    },
     watch: {
         toolshedUrl() {
             this.load();
         },
     },
+    created() {
+        this.services = new Services();
+        this.load();
+    },
     methods: {
         load() {
             this.$emit("onLoading", true);
diff --git a/client/src/components/Toolshed/SearchList/Index.vue b/client/src/components/Toolshed/SearchList/Index.vue
index 67f27bfcb5c..6285a71726e 100644
--- a/client/src/components/Toolshed/SearchList/Index.vue
+++ b/client/src/components/Toolshed/SearchList/Index.vue
@@ -31,6 +31,11 @@ import Categories from "./Categories.vue";
 import Repositories from "./Repositories.vue";
 import ServerSelection from "./ServerSelection.vue";
 export default {
+    components: {
+        Categories,
+        Repositories,
+        ServerSelection,
+    },
     props: {
         query: {
             type: String,
@@ -41,11 +46,6 @@ export default {
             required: true,
         },
     },
-    components: {
-        Categories,
-        Repositories,
-        ServerSelection,
-    },
     data() {
         return {
             toolshedUrl: null,
@@ -61,14 +61,14 @@ export default {
             ],
         };
     },
-    created() {
-        this.configureToolsheds();
-    },
     computed: {
         queryEmpty() {
             return !this.query || this.query.length < this.queryLength;
         },
     },
+    created() {
+        this.configureToolsheds();
+    },
     methods: {
         configureToolsheds() {
             const galaxy = getGalaxyInstance();
diff --git a/client/src/components/Toolshed/SearchList/Repositories.vue b/client/src/components/Toolshed/SearchList/Repositories.vue
index 3e8c73f721b..a00a5d72532 100644
--- a/client/src/components/Toolshed/SearchList/Repositories.vue
+++ b/client/src/components/Toolshed/SearchList/Repositories.vue
@@ -61,6 +61,14 @@ export default {
             error: null,
         };
     },
+    computed: {
+        pageLoading() {
+            return this.pageState === LOADING;
+        },
+        noResultsFound() {
+            return this.repositories.length === 0 && !this.pageLoading;
+        },
+    },
     watch: {
         toolshedUrl() {
             this.load();
@@ -74,14 +82,6 @@ export default {
             }
         },
     },
-    computed: {
-        pageLoading() {
-            return this.pageState === LOADING;
-        },
-        noResultsFound() {
-            return this.repositories.length === 0 && !this.pageLoading;
-        },
-    },
     created() {
         this.services = new Services();
         this.load();
diff --git a/client/src/components/Upload/Collection.vue b/client/src/components/Upload/Collection.vue
index 730cb157ce8..49043cf5319 100644
--- a/client/src/components/Upload/Collection.vue
+++ b/client/src/components/Upload/Collection.vue
@@ -126,8 +126,8 @@ import { uploadModelsToPayload } from "./helpers";
 import { BButton } from "bootstrap-vue";
 
 export default {
-    mixins: [UploadBoxMixin],
     components: { BButton },
+    mixins: [UploadBoxMixin],
     data() {
         return {
             uploadUrl: null,
@@ -161,6 +161,23 @@ export default {
             btnResetTitle: _l("Reset"),
         };
     },
+    computed: {
+        extensions() {
+            const result = _.filter(this.listExtensions, (ext) => !ext.composite_files);
+            return result;
+        },
+        appModel() {
+            return this.app.model;
+        },
+    },
+    watch: {
+        extension: function (value) {
+            this.updateExtension(value);
+        },
+        genome: function (value) {
+            this.updateGenome(value);
+        },
+    },
     created() {
         this.initCollection();
         this.initAppProperties();
@@ -210,23 +227,6 @@ export default {
         });
         this._updateStateForCounters();
     },
-    computed: {
-        extensions() {
-            const result = _.filter(this.listExtensions, (ext) => !ext.composite_files);
-            return result;
-        },
-        appModel() {
-            return this.app.model;
-        },
-    },
-    watch: {
-        extension: function (value) {
-            this.updateExtension(value);
-        },
-        genome: function (value) {
-            this.updateGenome(value);
-        },
-    },
     methods: {
         _newUploadModelProps: function (index, file) {
             return {
diff --git a/client/src/components/Upload/Composite.vue b/client/src/components/Upload/Composite.vue
index ae327995b2e..9548dd457ad 100644
--- a/client/src/components/Upload/Composite.vue
+++ b/client/src/components/Upload/Composite.vue
@@ -82,10 +82,6 @@ export default {
             readyStart: false,
         };
     },
-    created() {
-        this.initCollection();
-        this.initAppProperties();
-    },
     computed: {
         extensions() {
             const result = _.filter(this.listExtensions, (ext) => ext.composite_files);
@@ -93,6 +89,25 @@ export default {
             return result;
         },
     },
+    watch: {
+        extension: function (value) {
+            this.collection.reset();
+            const details = this.extensionDetails(value);
+            if (details && details.composite_files) {
+                _.each(details.composite_files, (item) => {
+                    this.collection.add({
+                        id: this.collection.size(),
+                        file_desc: item.description || item.name,
+                        optional: item.optional,
+                    });
+                });
+            }
+        },
+    },
+    created() {
+        this.initCollection();
+        this.initAppProperties();
+    },
     mounted() {
         this.initExtensionInfo();
         // listener for collection triggers on change in composite datatype and extension selection
@@ -192,20 +207,5 @@ export default {
             });
         },
     },
-    watch: {
-        extension: function (value) {
-            this.collection.reset();
-            const details = this.extensionDetails(value);
-            if (details && details.composite_files) {
-                _.each(details.composite_files, (item) => {
-                    this.collection.add({
-                        id: this.collection.size(),
-                        file_desc: item.description || item.name,
-                        optional: item.optional,
-                    });
-                });
-            }
-        },
-    },
 };
 </script>
diff --git a/client/src/components/Upload/Default.vue b/client/src/components/Upload/Default.vue
index 07afdb71a48..2685554e19a 100644
--- a/client/src/components/Upload/Default.vue
+++ b/client/src/components/Upload/Default.vue
@@ -109,8 +109,8 @@ import { uploadModelsToPayload } from "./helpers";
 import { BButton } from "bootstrap-vue";
 
 export default {
-    mixins: [UploadBoxMixin],
     components: { BButton },
+    mixins: [UploadBoxMixin],
     props: {
         multiple: {
             type: Boolean,
@@ -145,6 +145,23 @@ export default {
             btnResetTitle: _l("Reset"),
         };
     },
+    computed: {
+        extensions() {
+            const result = _.filter(this.listExtensions, (ext) => !ext.composite_files);
+            return result;
+        },
+        appModel() {
+            return this.app.model;
+        },
+    },
+    watch: {
+        extension: function (value) {
+            this.updateExtension(value);
+        },
+        genome: function (value) {
+            this.updateGenome(value);
+        },
+    },
     created() {
         this.initCollection();
         this.initAppProperties();
@@ -195,23 +212,6 @@ export default {
         });
         this._updateStateForCounters();
     },
-    computed: {
-        extensions() {
-            const result = _.filter(this.listExtensions, (ext) => !ext.composite_files);
-            return result;
-        },
-        appModel() {
-            return this.app.model;
-        },
-    },
-    watch: {
-        extension: function (value) {
-            this.updateExtension(value);
-        },
-        genome: function (value) {
-            this.updateGenome(value);
-        },
-    },
     methods: {
         _newUploadModelProps: function (index, file) {
             return {
diff --git a/client/src/components/Upload/RulesInput.vue b/client/src/components/Upload/RulesInput.vue
index 3f0f0333195..6a357048075 100644
--- a/client/src/components/Upload/RulesInput.vue
+++ b/client/src/components/Upload/RulesInput.vue
@@ -87,8 +87,8 @@ import { BButton, BLink } from "bootstrap-vue";
 library.add(faEdit);
 
 export default {
-    mixins: [UploadBoxMixin],
     components: { BLink, BButton, FontAwesomeIcon },
+    mixins: [UploadBoxMixin],
     data() {
         return {
             datasets: [],
@@ -105,9 +105,10 @@ export default {
             btnResetTitle: "Reset",
         };
     },
-    created() {
-        this.initCollection();
-        this.initAppProperties();
+    computed: {
+        enableReset: function () {
+            return this.sourceContent.length > 0;
+        },
     },
     watch: {
         selectionType: function (selectionType) {
@@ -140,10 +141,9 @@ export default {
                 .catch((error) => console.log(error));
         },
     },
-    computed: {
-        enableReset: function () {
-            return this.sourceContent.length > 0;
-        },
+    created() {
+        this.initCollection();
+        this.initAppProperties();
     },
     methods: {
         _eventReset: function () {
diff --git a/client/src/components/Upload/UploadButton.vue b/client/src/components/Upload/UploadButton.vue
index 6a9dcd3d4d1..141286c56b8 100644
--- a/client/src/components/Upload/UploadButton.vue
+++ b/client/src/components/Upload/UploadButton.vue
@@ -44,6 +44,14 @@ export default {
             percentage: 0,
         };
     },
+    created() {
+        this.eventHub.$on("upload:status", this.setStatus);
+        this.eventHub.$on("upload:percentage", this.setPercentage);
+    },
+    beforeDestroy() {
+        this.eventHub.$off("upload:status", this.setStatus);
+        this.eventHub.$off("upload:percentage", this.setPercentage);
+    },
     methods: {
         showUploadDialog(e) {
             openGlobalUploadModal();
@@ -55,13 +63,5 @@ export default {
             this.percentage = Math.round(val);
         },
     },
-    created() {
-        this.eventHub.$on("upload:status", this.setStatus);
-        this.eventHub.$on("upload:percentage", this.setPercentage);
-    },
-    beforeDestroy() {
-        this.eventHub.$off("upload:status", this.setStatus);
-        this.eventHub.$off("upload:percentage", this.setPercentage);
-    },
 };
 </script>
diff --git a/client/src/components/Upload/UploadModal.vue b/client/src/components/Upload/UploadModal.vue
index 459ce168cbe..c4ddec4cce3 100644
--- a/client/src/components/Upload/UploadModal.vue
+++ b/client/src/components/Upload/UploadModal.vue
@@ -52,6 +52,11 @@ export default {
             modalShow: false,
         };
     },
+    mounted() {
+        this.show();
+        // handles subsequent external requests to re-open a re-used modal
+        this.$root.$on("openUpload", this.show);
+    },
     methods: {
         show() {
             this.modalShow = true;
@@ -66,10 +71,5 @@ export default {
             this.hide();
         },
     },
-    mounted() {
-        this.show();
-        // handles subsequent external requests to re-open a re-used modal
-        this.$root.$on("openUpload", this.show);
-    },
 };
 </script>
diff --git a/client/src/components/Upload/UploadModalContent.vue b/client/src/components/Upload/UploadModalContent.vue
index f6fe1c4d3a4..05ef0547951 100644
--- a/client/src/components/Upload/UploadModalContent.vue
+++ b/client/src/components/Upload/UploadModalContent.vue
@@ -62,58 +62,6 @@ export default {
             datatypesMapperReady: true,
         };
     },
-    created() {
-        this.model = new Backbone.Model({
-            label: "Load Data",
-            percentage: 0,
-            status: "",
-            onunload: function () {},
-            onclick: function () {},
-        });
-
-        this.model.on("change", (model) => {
-            const { changed } = model;
-            for (const [field, val] of Object.entries(changed)) {
-                this.eventHub.$emit(`upload:${field}`, val);
-            }
-        });
-
-        // load extensions
-        // TODO: provider...
-        UploadUtils.getUploadDatatypes(this.datatypesDisableAuto, this.auto)
-            .then((listExtensions) => {
-                this.extensionsSet = true;
-                this.listExtensions = listExtensions;
-            })
-            .catch((err) => {
-                console.log("Error in UploadModalContent, unable to load datatypes", err);
-            });
-
-        // load genomes
-        // TODO: provider...
-        UploadUtils.getUploadGenomes(this.defaultGenome)
-            .then((listGenomes) => {
-                this.genomesSet = true;
-                this.listGenomes = listGenomes;
-            })
-            .catch((err) => {
-                console.log("Error in uploadModalContent, unable to load genomes", err);
-            });
-
-        if (this.formats !== null) {
-            this.datatypesMapperReady = false;
-            getDatatypesMapper().then((datatypesMapper) => {
-                this.datatypesMapper = datatypesMapper;
-                this.datatypesMapperReady = true;
-            });
-        } else {
-            this.datatypesMapperReady = true;
-        }
-    },
-    beforeDestroy() {
-        const modelUnload = this.model.get("onunload");
-        modelUnload();
-    },
     computed: {
         historyAvailable() {
             return Boolean(this.currentHistoryId);
@@ -166,6 +114,58 @@ export default {
             return this.multiple;
         },
     },
+    created() {
+        this.model = new Backbone.Model({
+            label: "Load Data",
+            percentage: 0,
+            status: "",
+            onunload: function () {},
+            onclick: function () {},
+        });
+
+        this.model.on("change", (model) => {
+            const { changed } = model;
+            for (const [field, val] of Object.entries(changed)) {
+                this.eventHub.$emit(`upload:${field}`, val);
+            }
+        });
+
+        // load extensions
+        // TODO: provider...
+        UploadUtils.getUploadDatatypes(this.datatypesDisableAuto, this.auto)
+            .then((listExtensions) => {
+                this.extensionsSet = true;
+                this.listExtensions = listExtensions;
+            })
+            .catch((err) => {
+                console.log("Error in UploadModalContent, unable to load datatypes", err);
+            });
+
+        // load genomes
+        // TODO: provider...
+        UploadUtils.getUploadGenomes(this.defaultGenome)
+            .then((listGenomes) => {
+                this.genomesSet = true;
+                this.listGenomes = listGenomes;
+            })
+            .catch((err) => {
+                console.log("Error in uploadModalContent, unable to load genomes", err);
+            });
+
+        if (this.formats !== null) {
+            this.datatypesMapperReady = false;
+            getDatatypesMapper().then((datatypesMapper) => {
+                this.datatypesMapper = datatypesMapper;
+                this.datatypesMapperReady = true;
+            });
+        } else {
+            this.datatypesMapperReady = true;
+        }
+    },
+    beforeDestroy() {
+        const modelUnload = this.model.get("onunload");
+        modelUnload();
+    },
     mounted() {
         this.id = String(this._uid);
     },
diff --git a/client/src/components/User/CloudAuth/CloudAuth.vue b/client/src/components/User/CloudAuth/CloudAuth.vue
index 9529405c285..4a73c34f7cb 100644
--- a/client/src/components/User/CloudAuth/CloudAuth.vue
+++ b/client/src/components/User/CloudAuth/CloudAuth.vue
@@ -137,6 +137,9 @@ export default {
             this.loadCredentials({ deleted });
         },
     },
+    created() {
+        this.loadCredentials();
+    },
     methods: {
         loadCredentials(params = {}) {
             this.loading = true;
@@ -199,9 +202,6 @@ export default {
             };
         },
     },
-    created() {
-        this.loadCredentials();
-    },
 };
 </script>
 
diff --git a/client/src/components/User/DiskUsage/Management/Cleanup/CleanupOperationSummary.vue b/client/src/components/User/DiskUsage/Management/Cleanup/CleanupOperationSummary.vue
index 8b62994f8d9..368b7b1ad40 100644
--- a/client/src/components/User/DiskUsage/Management/Cleanup/CleanupOperationSummary.vue
+++ b/client/src/components/User/DiskUsage/Management/Cleanup/CleanupOperationSummary.vue
@@ -61,15 +61,23 @@ export default {
             errorMessage: null,
         };
     },
-    async created() {
-        await this.refresh();
-    },
     computed: {
         /** @returns {Boolean} */
         canClearItems() {
             return this.summary.totalItems > 0;
         },
     },
+    watch: {
+        /** The parent signaled that `operationId` must be updated */
+        async refreshOperationId(operationId) {
+            if (this.operation.id === operationId) {
+                await this.refresh();
+            }
+        },
+    },
+    async created() {
+        await this.refresh();
+    },
     methods: {
         async refresh() {
             this.loading = true;
@@ -91,14 +99,6 @@ export default {
             this.$emit("onReviewItems", this.operation, this.summary.totalItems);
         },
     },
-    watch: {
-        /** The parent signaled that `operationId` must be updated */
-        async refreshOperationId(operationId) {
-            if (this.operation.id === operationId) {
-                await this.refresh();
-            }
-        },
-    },
 };
 </script>
 
diff --git a/client/src/components/User/DiskUsage/Management/Cleanup/CleanupResultDialog.vue b/client/src/components/User/DiskUsage/Management/Cleanup/CleanupResultDialog.vue
index ac47be77e10..d6300e0c651 100644
--- a/client/src/components/User/DiskUsage/Management/Cleanup/CleanupResultDialog.vue
+++ b/client/src/components/User/DiskUsage/Management/Cleanup/CleanupResultDialog.vue
@@ -47,9 +47,6 @@ export default {
             required: false,
         },
     },
-    created() {
-        this.showModal = this.show;
-    },
     data() {
         return {
             showModal: false,
@@ -77,5 +74,8 @@ export default {
             return message;
         },
     },
+    created() {
+        this.showModal = this.show;
+    },
 };
 </script>
diff --git a/client/src/components/User/DiskUsage/Management/Cleanup/ReviewCleanupDialog.vue b/client/src/components/User/DiskUsage/Management/Cleanup/ReviewCleanupDialog.vue
index 17e6a517162..dc99679d73c 100644
--- a/client/src/components/User/DiskUsage/Management/Cleanup/ReviewCleanupDialog.vue
+++ b/client/src/components/User/DiskUsage/Management/Cleanup/ReviewCleanupDialog.vue
@@ -99,9 +99,6 @@ export default {
             required: false,
         },
     },
-    created() {
-        this.showDialog = this.show;
-    },
     data() {
         return {
             fields: [
@@ -143,62 +140,6 @@ export default {
             isBusy: false,
         };
     },
-    methods: {
-        toNiceSize(sizeInBytes) {
-            return bytesToString(sizeInBytes, true);
-        },
-        toggleSelectAll(checked) {
-            this.selectedItems = checked ? this.items : [];
-        },
-        hideModal() {
-            this.showDialog = false;
-        },
-        onShowModal() {
-            this.resetModal();
-        },
-        resetModal() {
-            this.selectedItems = [];
-        },
-        resetConfirmationModal() {
-            this.confirmChecked = false;
-        },
-        onConfirmCleanupSelectedItems() {
-            this.$emit("onConfirmCleanupSelectedItems", this.selectedItems);
-            this.hideModal();
-        },
-        onSort(props) {
-            this.sortBy = props.sortBy;
-            this.sortDesc = props.sortDesc;
-        },
-        async itemsProvider(ctx) {
-            try {
-                const page = ctx.currentPage > 0 ? ctx.currentPage - 1 : 0;
-                const offset = page * ctx.perPage;
-                const options = {
-                    offset: offset,
-                    limit: ctx.perPage,
-                    sortBy: this.sortBy,
-                    sortDesc: this.sortDesc,
-                };
-                const result = await this.operation.fetchItems(options);
-                return result;
-            } catch (error) {
-                return [];
-            }
-        },
-        async onSelectAllItems() {
-            this.isBusy = true;
-            const options = {
-                offset: 0,
-                limit: this.totalRows,
-                sortBy: this.sortBy,
-                sortDesc: this.sortDesc,
-            };
-            const allItems = await this.operation.fetchItems(options);
-            this.selectedItems = allItems;
-            this.isBusy = false;
-        },
-    },
     computed: {
         /** @returns {Number} */
         selectedItemCount() {
@@ -260,5 +201,64 @@ export default {
             }
         },
     },
+    created() {
+        this.showDialog = this.show;
+    },
+    methods: {
+        toNiceSize(sizeInBytes) {
+            return bytesToString(sizeInBytes, true);
+        },
+        toggleSelectAll(checked) {
+            this.selectedItems = checked ? this.items : [];
+        },
+        hideModal() {
+            this.showDialog = false;
+        },
+        onShowModal() {
+            this.resetModal();
+        },
+        resetModal() {
+            this.selectedItems = [];
+        },
+        resetConfirmationModal() {
+            this.confirmChecked = false;
+        },
+        onConfirmCleanupSelectedItems() {
+            this.$emit("onConfirmCleanupSelectedItems", this.selectedItems);
+            this.hideModal();
+        },
+        onSort(props) {
+            this.sortBy = props.sortBy;
+            this.sortDesc = props.sortDesc;
+        },
+        async itemsProvider(ctx) {
+            try {
+                const page = ctx.currentPage > 0 ? ctx.currentPage - 1 : 0;
+                const offset = page * ctx.perPage;
+                const options = {
+                    offset: offset,
+                    limit: ctx.perPage,
+                    sortBy: this.sortBy,
+                    sortDesc: this.sortDesc,
+                };
+                const result = await this.operation.fetchItems(options);
+                return result;
+            } catch (error) {
+                return [];
+            }
+        },
+        async onSelectAllItems() {
+            this.isBusy = true;
+            const options = {
+                offset: 0,
+                limit: this.totalRows,
+                sortBy: this.sortBy,
+                sortDesc: this.sortDesc,
+            };
+            const allItems = await this.operation.fetchItems(options);
+            this.selectedItems = allItems;
+            this.isBusy = false;
+        },
+    },
 };
 </script>
diff --git a/client/src/components/User/ExternalIdentities/ExternalIdentities.vue b/client/src/components/User/ExternalIdentities/ExternalIdentities.vue
index 69cc4901cd9..41721c544f3 100644
--- a/client/src/components/User/ExternalIdentities/ExternalIdentities.vue
+++ b/client/src/components/User/ExternalIdentities/ExternalIdentities.vue
@@ -125,6 +125,9 @@ export default {
             this.loadIdentities({ deleted });
         },
     },
+    created() {
+        this.loadIdentities();
+    },
     methods: {
         loadIdentities() {
             this.loading = true;
@@ -189,9 +192,6 @@ export default {
             };
         },
     },
-    created() {
-        this.loadIdentities();
-    },
 };
 </script>
 
diff --git a/client/src/components/User/ExternalIdentities/ExternalLogin.vue b/client/src/components/User/ExternalIdentities/ExternalLogin.vue
index d08576eac5c..1e3ebf66118 100644
--- a/client/src/components/User/ExternalIdentities/ExternalLogin.vue
+++ b/client/src/components/User/ExternalIdentities/ExternalLogin.vue
@@ -145,6 +145,13 @@ export default {
             return Object.prototype.hasOwnProperty.call(this.oidc_idps, "custos");
         },
     },
+    created() {
+        this.rememberIdp = this.getIdpPreference() !== null;
+        /* Only fetch CILogonIDPs if custos/cilogon configured */
+        if (this.cilogonListShow) {
+            this.getCILogonIdps();
+        }
+    },
     methods: {
         toggleCILogon(idp) {
             this.toggle_cilogon = !this.toggle_cilogon;
@@ -225,13 +232,6 @@ export default {
             return localStorage.getItem("galaxy-remembered-idp");
         },
     },
-    created() {
-        this.rememberIdp = this.getIdpPreference() !== null;
-        /* Only fetch CILogonIDPs if custos/cilogon configured */
-        if (this.cilogonListShow) {
-            this.getCILogonIdps();
-        }
-    },
 };
 </script>
 <style scoped>
diff --git a/client/src/components/User/UserPreferences.vue b/client/src/components/User/UserPreferences.vue
index c3a5e7b2a6a..a27e5ff70bf 100644
--- a/client/src/components/User/UserPreferences.vue
+++ b/client/src/components/User/UserPreferences.vue
@@ -97,6 +97,9 @@ import "@fortawesome/fontawesome-svg-core";
 Vue.use(BootstrapVue);
 
 export default {
+    components: {
+        ConfigProvider,
+    },
     props: {
         userId: {
             type: String,
@@ -107,9 +110,6 @@ export default {
             required: true,
         },
     },
-    components: {
-        ConfigProvider,
-    },
     data() {
         return {
             email: "",
@@ -129,21 +129,6 @@ export default {
             titleLoggedInAs: _l("You are logged in as"),
         };
     },
-    created() {
-        const message = QueryStringParsing.get("message");
-        const status = QueryStringParsing.get("status");
-        if (message && status) {
-            this.message = message;
-            this.messageVariant = status;
-        }
-        axios.get(`${getAppRoot()}api/users/${this.userId}`).then((response) => {
-            this.email = response.data.email;
-            this.diskUsage = response.data.nice_total_disk_usage;
-            this.quotaUsageString = this.enableQuotas
-                ? `Your disk quota is: <strong>${response.data.quota}</strong>.`
-                : "";
-        });
-    },
     computed: {
         activeLinks() {
             const activeLinks = {};
@@ -175,6 +160,21 @@ export default {
             return this.deleteError !== "";
         },
     },
+    created() {
+        const message = QueryStringParsing.get("message");
+        const status = QueryStringParsing.get("status");
+        if (message && status) {
+            this.message = message;
+            this.messageVariant = status;
+        }
+        axios.get(`${getAppRoot()}api/users/${this.userId}`).then((response) => {
+            this.email = response.data.email;
+            this.diskUsage = response.data.nice_total_disk_usage;
+            this.quotaUsageString = this.enableQuotas
+                ? `Your disk quota is: <strong>${response.data.quota}</strong>.`
+                : "";
+        });
+    },
     methods: {
         toggleNotifications() {
             if (window.Notification) {
diff --git a/client/src/components/Workflow/Editor/Attributes.vue b/client/src/components/Workflow/Editor/Attributes.vue
index 93bd74e77c7..a2074c82185 100644
--- a/client/src/components/Workflow/Editor/Attributes.vue
+++ b/client/src/components/Workflow/Editor/Attributes.vue
@@ -116,9 +116,6 @@ export default {
             nameCurrent: this.name,
         };
     },
-    created() {
-        this.services = new Services();
-    },
     computed: {
         creatorAsList() {
             let creator = this.creator;
@@ -169,6 +166,9 @@ export default {
             this.nameCurrent = this.name;
         },
     },
+    created() {
+        this.services = new Services();
+    },
     methods: {
         onTags(tags) {
             this.tagsCurrent = tags;
diff --git a/client/src/components/Workflow/Editor/Forms/FormOutput.vue b/client/src/components/Workflow/Editor/Forms/FormOutput.vue
index 1b561d28379..4fc7c5a7129 100644
--- a/client/src/components/Workflow/Editor/Forms/FormOutput.vue
+++ b/client/src/components/Workflow/Editor/Forms/FormOutput.vue
@@ -143,9 +143,6 @@ export default {
             renameHelpUrl: "https://galaxyproject.org/learn/advanced-workflow/variables/",
         };
     },
-    created() {
-        this.setExpanded();
-    },
     computed: {
         outputTitle() {
             const title = this.outputLabel || this.outputName;
@@ -191,6 +188,9 @@ export default {
             return `${helpSection}<ul>${helpLabels}</ul>`;
         },
     },
+    created() {
+        this.setExpanded();
+    },
     methods: {
         setExpanded() {
             this.expandedColumn = this.hasActions(actionsColumn);
diff --git a/client/src/components/Workflow/Editor/Forms/FormSection.vue b/client/src/components/Workflow/Editor/Forms/FormSection.vue
index 1b9a1ca68fa..85401ff97d2 100644
--- a/client/src/components/Workflow/Editor/Forms/FormSection.vue
+++ b/client/src/components/Workflow/Editor/Forms/FormSection.vue
@@ -55,9 +55,6 @@ export default {
             formData: {},
         };
     },
-    created() {
-        this.setFormData();
-    },
     computed: {
         node() {
             return this.getNode();
@@ -87,6 +84,9 @@ export default {
             return Boolean(this.formData[this.deleteActionKey]);
         },
     },
+    created() {
+        this.setFormData();
+    },
     methods: {
         setFormData() {
             const pjas = {};
diff --git a/client/src/components/Workflow/Editor/Index.vue b/client/src/components/Workflow/Editor/Index.vue
index 80920f48fda..0193862654a 100644
--- a/client/src/components/Workflow/Editor/Index.vue
+++ b/client/src/components/Workflow/Editor/Index.vue
@@ -298,6 +298,24 @@ export default {
             return this.isWheeled;
         },
     },
+    watch: {
+        annotation: function (newAnnotation, oldAnnotation) {
+            if (newAnnotation != oldAnnotation) {
+                this.hasChanges = true;
+            }
+        },
+        name: function (newName, oldName) {
+            if (newName != oldName) {
+                this.hasChanges = true;
+            }
+        },
+        steps: function (newSteps, oldSteps) {
+            this.hasChanges = true;
+        },
+        nodes: function (newNodes, oldNodes) {
+            this.hasChanges = true;
+        },
+    },
     created() {
         this.lastQueue = new LastQueue();
         getDatatypesMapper(false).then((mapper) => {
@@ -317,24 +335,6 @@ export default {
         };
         hide_modal();
     },
-    watch: {
-        annotation: function (newAnnotation, oldAnnotation) {
-            if (newAnnotation != oldAnnotation) {
-                this.hasChanges = true;
-            }
-        },
-        name: function (newName, oldName) {
-            if (newName != oldName) {
-                this.hasChanges = true;
-            }
-        },
-        steps: function (newSteps, oldSteps) {
-            this.hasChanges = true;
-        },
-        nodes: function (newNodes, oldNodes) {
-            this.hasChanges = true;
-        },
-    },
     methods: {
         onActivate(node) {
             if (this.activeNode != node) {
diff --git a/client/src/components/Workflow/Editor/Lint.vue b/client/src/components/Workflow/Editor/Lint.vue
index 5050ce354e9..6a29eb00559 100644
--- a/client/src/components/Workflow/Editor/Lint.vue
+++ b/client/src/components/Workflow/Editor/Lint.vue
@@ -128,6 +128,62 @@ export default {
             forceRefresh: 0,
         };
     },
+    computed: {
+        nodes() {
+            return this.getManager().nodes;
+        },
+        hasActiveOutputs() {
+            this.forceRefresh;
+            for (const node of Object.values(this.nodes)) {
+                if (node.activeOutputs.getAll().length > 0) {
+                    return true;
+                }
+            }
+            return false;
+        },
+        showRefactor() {
+            // we could be even more precise here and check the inputs and such, because
+            // some of these extractions may not be possible.
+            return !this.checkUntypedParameters || !this.checkDisconnectedInputs || !this.checkUnlabeledOutputs;
+        },
+        checkAnnotation() {
+            return !!this.annotation;
+        },
+        checkLicense() {
+            return !!this.license;
+        },
+        checkCreator() {
+            if (this.creator instanceof Array) {
+                return this.creator.length > 0;
+            } else {
+                return !!this.creator;
+            }
+        },
+        checkUntypedParameters() {
+            return this.warningUntypedParameters.length == 0;
+        },
+        checkDisconnectedInputs() {
+            return this.warningDisconnectedInputs.length == 0;
+        },
+        checkUnlabeledOutputs() {
+            return this.warningUnlabeledOutputs.length == 0;
+        },
+        warningUntypedParameters() {
+            return getUntypedParameters(this.untypedParameters);
+        },
+        warningDisconnectedInputs() {
+            this.forceRefresh;
+            return getDisconnectedInputs(this.nodes);
+        },
+        warningMissingMetadata() {
+            this.forceRefresh;
+            return getMissingMetadata(this.nodes);
+        },
+        warningUnlabeledOutputs() {
+            this.forceRefresh;
+            return getUnlabeledOutputs(this.nodes);
+        },
+    },
     methods: {
         refresh() {
             // I tried to make these purely reactive but I guess it is not surprising that the
@@ -185,61 +241,5 @@ export default {
             this.$emit("onRefactor", actions);
         },
     },
-    computed: {
-        nodes() {
-            return this.getManager().nodes;
-        },
-        hasActiveOutputs() {
-            this.forceRefresh;
-            for (const node of Object.values(this.nodes)) {
-                if (node.activeOutputs.getAll().length > 0) {
-                    return true;
-                }
-            }
-            return false;
-        },
-        showRefactor() {
-            // we could be even more precise here and check the inputs and such, because
-            // some of these extractions may not be possible.
-            return !this.checkUntypedParameters || !this.checkDisconnectedInputs || !this.checkUnlabeledOutputs;
-        },
-        checkAnnotation() {
-            return !!this.annotation;
-        },
-        checkLicense() {
-            return !!this.license;
-        },
-        checkCreator() {
-            if (this.creator instanceof Array) {
-                return this.creator.length > 0;
-            } else {
-                return !!this.creator;
-            }
-        },
-        checkUntypedParameters() {
-            return this.warningUntypedParameters.length == 0;
-        },
-        checkDisconnectedInputs() {
-            return this.warningDisconnectedInputs.length == 0;
-        },
-        checkUnlabeledOutputs() {
-            return this.warningUnlabeledOutputs.length == 0;
-        },
-        warningUntypedParameters() {
-            return getUntypedParameters(this.untypedParameters);
-        },
-        warningDisconnectedInputs() {
-            this.forceRefresh;
-            return getDisconnectedInputs(this.nodes);
-        },
-        warningMissingMetadata() {
-            this.forceRefresh;
-            return getMissingMetadata(this.nodes);
-        },
-        warningUnlabeledOutputs() {
-            this.forceRefresh;
-            return getUnlabeledOutputs(this.nodes);
-        },
-    },
 };
 </script>
diff --git a/client/src/components/Workflow/Editor/MessagesModal.vue b/client/src/components/Workflow/Editor/MessagesModal.vue
index 7f1a28ff0af..955c8085c71 100644
--- a/client/src/components/Workflow/Editor/MessagesModal.vue
+++ b/client/src/components/Workflow/Editor/MessagesModal.vue
@@ -45,6 +45,11 @@ export default {
         };
     },
     computed: {},
+    watch: {
+        message() {
+            this.show = !!this.title;
+        },
+    },
     methods: {
         onHidden() {
             this.$emit("onHidden");
@@ -53,10 +58,5 @@ export default {
             // no-op I suppose...
         },
     },
-    watch: {
-        message() {
-            this.show = !!this.title;
-        },
-    },
 };
 </script>
diff --git a/client/src/components/Workflow/Editor/Node.vue b/client/src/components/Workflow/Editor/Node.vue
index 6391975697a..8c05325f25d 100644
--- a/client/src/components/Workflow/Editor/Node.vue
+++ b/client/src/components/Workflow/Editor/Node.vue
@@ -148,6 +148,36 @@ export default {
             scrolledTo: false,
         };
     },
+    computed: {
+        title() {
+            return this.label || this.name;
+        },
+        idString() {
+            return `wf-node-step-${this.id}`;
+        },
+        showRule() {
+            return this.inputs.length > 0 && this.outputs.length > 0;
+        },
+        iconClass() {
+            const iconType = WorkflowIcons[this.type];
+            if (iconType) {
+                return `icon fa fa-fw ${iconType}`;
+            }
+            return null;
+        },
+        popoverId() {
+            return `popover-${this.id}`;
+        },
+        canClone() {
+            return this.type != "subworkflow";
+        },
+        isEnabled() {
+            return getGalaxyInstance().config.enable_tool_recommendations;
+        },
+        isInput() {
+            return this.type == "data_input" || this.type == "data_collection_input" || this.type == "parameter_input";
+        },
+    },
     mounted() {
         this.canvasManager = this.getCanvasManager();
         this.activeOutputs = new ActiveOutputs();
@@ -205,36 +235,6 @@ export default {
             this.$emit("onUpdate", this);
         }
     },
-    computed: {
-        title() {
-            return this.label || this.name;
-        },
-        idString() {
-            return `wf-node-step-${this.id}`;
-        },
-        showRule() {
-            return this.inputs.length > 0 && this.outputs.length > 0;
-        },
-        iconClass() {
-            const iconType = WorkflowIcons[this.type];
-            if (iconType) {
-                return `icon fa fa-fw ${iconType}`;
-            }
-            return null;
-        },
-        popoverId() {
-            return `popover-${this.id}`;
-        },
-        canClone() {
-            return this.type != "subworkflow";
-        },
-        isEnabled() {
-            return getGalaxyInstance().config.enable_tool_recommendations;
-        },
-        isInput() {
-            return this.type == "data_input" || this.type == "data_collection_input" || this.type == "parameter_input";
-        },
-    },
     methods: {
         onChange() {
             this.onRedraw();
diff --git a/client/src/components/Workflow/Editor/NodeInput.vue b/client/src/components/Workflow/Editor/NodeInput.vue
index 0f97f1bee85..eb148dfe078 100644
--- a/client/src/components/Workflow/Editor/NodeInput.vue
+++ b/client/src/components/Workflow/Editor/NodeInput.vue
@@ -37,6 +37,22 @@ export default {
             isMultiple: false,
         };
     },
+    computed: {
+        id() {
+            const node = this.getNode();
+            return `node-${node.id}-input-${this.input.name}`;
+        },
+        label() {
+            return this.input.label || this.input.name;
+        },
+        terminalClass() {
+            const cls = "terminal input-terminal";
+            if (this.isMultiple) {
+                return `${cls} multiple`;
+            }
+            return cls;
+        },
+    },
     watch: {
         input: function (newInput) {
             const oldTerminal = this.terminal;
@@ -56,25 +72,13 @@ export default {
             }
         },
     },
-    computed: {
-        id() {
-            const node = this.getNode();
-            return `node-${node.id}-input-${this.input.name}`;
-        },
-        label() {
-            return this.input.label || this.input.name;
-        },
-        terminalClass() {
-            const cls = "terminal input-terminal";
-            if (this.isMultiple) {
-                return `${cls} multiple`;
-            }
-            return cls;
-        },
-    },
     mounted() {
         this.terminal = this.createTerminal(this.input);
     },
+    beforeDestroy() {
+        this.$emit("onRemove", this.input);
+        this.onRemove();
+    },
     methods: {
         terminalClassForInput(input) {
             let terminalClass = Terminals.InputTerminal;
@@ -118,9 +122,5 @@ export default {
             this.showRemove = false;
         },
     },
-    beforeDestroy() {
-        this.$emit("onRemove", this.input);
-        this.onRemove();
-    },
 };
 </script>
diff --git a/client/src/components/Workflow/Editor/NodeOutput.vue b/client/src/components/Workflow/Editor/NodeOutput.vue
index 7bf63e14afe..2c72b234a40 100644
--- a/client/src/components/Workflow/Editor/NodeOutput.vue
+++ b/client/src/components/Workflow/Editor/NodeOutput.vue
@@ -95,6 +95,10 @@ export default {
     mounted() {
         this.createTerminal(this.output);
     },
+    beforeDestroy() {
+        this.$emit("onRemove", this.output);
+        this.terminal.destroy();
+    },
     methods: {
         terminalClassForOutput(output) {
             let terminalClass = Terminals.OutputTerminal;
@@ -149,9 +153,5 @@ export default {
             this.$emit("onToggle", this.output.name);
         },
     },
-    beforeDestroy() {
-        this.$emit("onRemove", this.output);
-        this.terminal.destroy();
-    },
 };
 </script>
diff --git a/client/src/components/Workflow/Editor/StateUpgradeModal.vue b/client/src/components/Workflow/Editor/StateUpgradeModal.vue
index e669178d2ef..7e6f5e6fcea 100644
--- a/client/src/components/Workflow/Editor/StateUpgradeModal.vue
+++ b/client/src/components/Workflow/Editor/StateUpgradeModal.vue
@@ -43,6 +43,13 @@ export default {
             show: this.stateMessages.length > 0,
         };
     },
+    watch: {
+        stateMessages() {
+            if (this.stateMessages.length > 0) {
+                this.show = true;
+            }
+        },
+    },
     methods: {
         humanIndex(stateMessage) {
             return `${parseInt(stateMessage.stepIndex, 10) + 1}`;
@@ -59,13 +66,6 @@ export default {
             return iconClassStr;
         },
     },
-    watch: {
-        stateMessages() {
-            if (this.stateMessages.length > 0) {
-                this.show = true;
-            }
-        },
-    },
 };
 </script>
 
diff --git a/client/src/components/Workflow/InvocationReport.vue b/client/src/components/Workflow/InvocationReport.vue
index 44efc5f0c19..5d0a7b7d570 100644
--- a/client/src/components/Workflow/InvocationReport.vue
+++ b/client/src/components/Workflow/InvocationReport.vue
@@ -38,6 +38,14 @@ export default {
             invocationMarkdown: null,
         };
     },
+    computed: {
+        dataUrl() {
+            return `${getAppRoot()}api/invocations/${this.invocationId}/report`;
+        },
+        exportUrl() {
+            return `${this.dataUrl}.pdf`;
+        },
+    },
     created() {
         this.getMarkdown()
             .then((response) => {
@@ -48,14 +56,6 @@ export default {
                 Toast.error(`Failed to load invocation markdown: ${error}`);
             });
     },
-    computed: {
-        dataUrl() {
-            return `${getAppRoot()}api/invocations/${this.invocationId}/report`;
-        },
-        exportUrl() {
-            return `${this.dataUrl}.pdf`;
-        },
-    },
     methods: {
         onEdit() {
             window.location = `${getAppRoot()}pages/create?invocation_id=${this.invocationId}`;
diff --git a/client/src/components/Workflow/Run/WorkflowRunDefaultStep.vue b/client/src/components/Workflow/Run/WorkflowRunDefaultStep.vue
index 6931d8c5fd3..ba49c2c49ce 100644
--- a/client/src/components/Workflow/Run/WorkflowRunDefaultStep.vue
+++ b/client/src/components/Workflow/Run/WorkflowRunDefaultStep.vue
@@ -39,13 +39,6 @@ export default {
             expanded: this.model.expanded,
         };
     },
-    watch: {
-        validationScrollTo() {
-            if (this.validationScrollTo.length > 0) {
-                this.expanded = true;
-            }
-        },
-    },
     computed: {
         icon() {
             return WorkflowIcons[this.model.step_type];
@@ -70,6 +63,13 @@ export default {
             return this.inputs.length > 0;
         },
     },
+    watch: {
+        validationScrollTo() {
+            if (this.validationScrollTo.length > 0) {
+                this.expanded = true;
+            }
+        },
+    },
     methods: {
         onChange(data) {
             this.$emit("onChange", this.model.index, data);
diff --git a/client/src/components/Workflow/Run/WorkflowRunSuccess.vue b/client/src/components/Workflow/Run/WorkflowRunSuccess.vue
index 31556939ebb..0f6a862dce1 100644
--- a/client/src/components/Workflow/Run/WorkflowRunSuccess.vue
+++ b/client/src/components/Workflow/Run/WorkflowRunSuccess.vue
@@ -76,6 +76,14 @@ export default {
             );
         },
     },
+    mounted() {
+        new Webhooks.WebhookView({
+            type: "workflow",
+            toolId: null,
+            toolVersion: null,
+        });
+        this._refreshHistory();
+    },
     methods: {
         _refreshHistory() {
             // remove when disabling backbone history
@@ -95,13 +103,5 @@ export default {
             }
         },
     },
-    mounted() {
-        new Webhooks.WebhookView({
-            type: "workflow",
-            toolId: null,
-            toolVersion: null,
-        });
-        this._refreshHistory();
-    },
 };
 </script>
diff --git a/client/src/components/Workflow/TrsImport.vue b/client/src/components/Workflow/TrsImport.vue
index 64b22ab9db7..483f482bcf6 100644
--- a/client/src/components/Workflow/TrsImport.vue
+++ b/client/src/components/Workflow/TrsImport.vue
@@ -58,10 +58,6 @@ export default {
             default: false,
         },
     },
-    created() {
-        this.services = new Services();
-        this.toolId = this.queryTrsId;
-    },
     data() {
         return {
             trsSelection: null,
@@ -98,6 +94,10 @@ export default {
             this.onToolId();
         },
     },
+    created() {
+        this.services = new Services();
+        this.toolId = this.queryTrsId;
+    },
     methods: {
         onTrsSelection(selection) {
             this.trsSelection = selection;
diff --git a/client/src/components/Workflow/TrsSearch.vue b/client/src/components/Workflow/TrsSearch.vue
index 5b0977ee87f..755ec44ce9d 100644
--- a/client/src/components/Workflow/TrsSearch.vue
+++ b/client/src/components/Workflow/TrsSearch.vue
@@ -80,6 +80,17 @@ export default {
             fields: fields,
         };
     },
+    computed: {
+        hasErrorMessage() {
+            return this.errorMessage != null;
+        },
+        itemsComputed() {
+            return this.computeItems(this.results);
+        },
+        searchHelp() {
+            return "Search by workflow description. Tags (key:value) can be used to also search by metadata - for instance name:example. Available tags include organization and name.";
+        },
+    },
     watch: {
         query: function () {
             if (this.query == "") {
@@ -117,17 +128,6 @@ export default {
             },
         });
     },
-    computed: {
-        hasErrorMessage() {
-            return this.errorMessage != null;
-        },
-        itemsComputed() {
-            return this.computeItems(this.results);
-        },
-        searchHelp() {
-            return "Search by workflow description. Tags (key:value) can be used to also search by metadata - for instance name:example. Available tags include organization and name.";
-        },
-    },
     created() {
         this.services = new Services();
     },
diff --git a/client/src/components/Workflow/TrsServerSelection.vue b/client/src/components/Workflow/TrsServerSelection.vue
index 46497ad2c29..c025f77644e 100644
--- a/client/src/components/Workflow/TrsServerSelection.vue
+++ b/client/src/components/Workflow/TrsServerSelection.vue
@@ -48,10 +48,6 @@ export default {
             default: null,
         },
     },
-    created() {
-        this.services = new Services();
-        this._configureTrsServers();
-    },
     data() {
         return {
             selection: null,
@@ -65,6 +61,10 @@ export default {
             return this.trsServers.length > 1;
         },
     },
+    created() {
+        this.services = new Services();
+        this._configureTrsServers();
+    },
     methods: {
         onTrsSelection(selection) {
             this.selection = selection;
diff --git a/client/src/components/Workflow/WorkflowDropdown.vue b/client/src/components/Workflow/WorkflowDropdown.vue
index 092db54598d..8bd4f9e2f5a 100644
--- a/client/src/components/Workflow/WorkflowDropdown.vue
+++ b/client/src/components/Workflow/WorkflowDropdown.vue
@@ -79,10 +79,10 @@ import { faCaretDown } from "@fortawesome/free-solid-svg-icons";
 library.add(faCaretDown);
 
 export default {
-    props: ["workflow"],
     components: {
         FontAwesomeIcon,
     },
+    props: ["workflow"],
     computed: {
         urlEdit() {
             return `${getAppRoot()}workflow/editor?id=${this.workflow.id}`;
diff --git a/client/src/components/WorkflowInvocationState/JobStep.vue b/client/src/components/WorkflowInvocationState/JobStep.vue
index 3444672a012..2f6ff2c3e62 100644
--- a/client/src/components/WorkflowInvocationState/JobStep.vue
+++ b/client/src/components/WorkflowInvocationState/JobStep.vue
@@ -40,6 +40,16 @@ export default {
     props: {
         jobs: { type: Array, required: true },
     },
+    data() {
+        return {
+            fields: [
+                { key: "state", sortable: true },
+                { key: "update_time", label: "Updated", sortable: true },
+                { key: "create_time", label: "Created", sortable: true },
+            ],
+            toggledItems: {},
+        };
+    },
     methods: {
         jobsProvider(ctx, callback) {
             // It may seem unnecessary to use a provider here, since the jobs prop
@@ -65,15 +75,5 @@ export default {
             this.toggledItems[item.id] = item._showDetails;
         },
     },
-    data() {
-        return {
-            fields: [
-                { key: "state", sortable: true },
-                { key: "update_time", label: "Updated", sortable: true },
-                { key: "create_time", label: "Created", sortable: true },
-            ],
-            toggledItems: {},
-        };
-    },
 };
 </script>
diff --git a/client/src/components/admin/DataManager/DataManager.vue b/client/src/components/admin/DataManager/DataManager.vue
index 56d23695779..a2ca8106006 100644
--- a/client/src/components/admin/DataManager/DataManager.vue
+++ b/client/src/components/admin/DataManager/DataManager.vue
@@ -84,6 +84,10 @@ export default {
     components: {
         Alert,
     },
+    beforeRouteEnter(to, from, next) {
+        console.log("beforeRouteEnter");
+        next((vm) => vm.debouncedLoad());
+    },
     props: {
         debouncePeriod: { type: Number, required: false, default: 100 },
     },
@@ -106,6 +110,11 @@ export default {
             return this.dataTables.filter((d) => d["name"].match(new RegExp(this.filter, "i")));
         },
     },
+    created() {
+        console.log("created");
+        this.debouncedLoad = debounce(this.load, this.debouncePeriod);
+        this.debouncedLoad();
+    },
     methods: {
         kebabCase(s) {
             return s.toLowerCase().replace(/ /g, "-");
@@ -130,14 +139,5 @@ export default {
                 });
         },
     },
-    created() {
-        console.log("created");
-        this.debouncedLoad = debounce(this.load, this.debouncePeriod);
-        this.debouncedLoad();
-    },
-    beforeRouteEnter(to, from, next) {
-        console.log("beforeRouteEnter");
-        next((vm) => vm.debouncedLoad());
-    },
 };
 </script>
diff --git a/client/src/components/admin/DataManager/DataManagerJob.vue b/client/src/components/admin/DataManager/DataManagerJob.vue
index b1198b9a66c..64328f4b338 100644
--- a/client/src/components/admin/DataManager/DataManagerJob.vue
+++ b/client/src/components/admin/DataManager/DataManagerJob.vue
@@ -137,11 +137,6 @@ export default {
             ];
         },
     },
-    methods: {
-        outputFields(output) {
-            return Object.keys(output).reduce((acc, c) => [...acc, { key: c, label: c }], []);
-        },
-    },
     created() {
         axios
             .get(`${getAppRoot()}data_manager/job_info?id=${this.id}`)
@@ -162,6 +157,11 @@ export default {
                 console.error(error);
             });
     },
+    methods: {
+        outputFields(output) {
+            return Object.keys(output).reduce((acc, c) => [...acc, { key: c, label: c }], []);
+        },
+    },
 };
 </script>
 
diff --git a/client/src/components/admin/DataManager/DataManagerTable.vue b/client/src/components/admin/DataManager/DataManagerTable.vue
index 36519717c9f..e3c046400af 100644
--- a/client/src/components/admin/DataManager/DataManagerTable.vue
+++ b/client/src/components/admin/DataManager/DataManagerTable.vue
@@ -82,6 +82,20 @@ export default {
             ];
         },
     },
+    created() {
+        axios
+            .get(`${getAppRoot()}data_manager/tool_data_table_info?table_name=${this.name}`)
+            .then((response) => {
+                this.dataTable = response.data.dataTable;
+                this.viewOnly = response.data.viewOnly;
+                this.message = response.data.message;
+                this.status = response.data.status;
+                this.loading = false;
+            })
+            .catch((error) => {
+                console.error(error);
+            });
+    },
     methods: {
         fields(columns) {
             // Columns and data are given as arrays. Use each column index as field
@@ -103,19 +117,5 @@ export default {
                 });
         },
     },
-    created() {
-        axios
-            .get(`${getAppRoot()}data_manager/tool_data_table_info?table_name=${this.name}`)
-            .then((response) => {
-                this.dataTable = response.data.dataTable;
-                this.viewOnly = response.data.viewOnly;
-                this.message = response.data.message;
-                this.status = response.data.status;
-                this.loading = false;
-            })
-            .catch((error) => {
-                console.error(error);
-            });
-    },
 };
 </script>
diff --git a/client/src/components/admin/DataTables.vue b/client/src/components/admin/DataTables.vue
index 4f6bb6a6ebe..53af81709ac 100644
--- a/client/src/components/admin/DataTables.vue
+++ b/client/src/components/admin/DataTables.vue
@@ -19,6 +19,11 @@ import DataTablesGrid from "./DataTablesGrid.vue";
 import DataManagerGrid from "./DataManagerGrid.vue";
 
 export default {
+    components: {
+        message: Message,
+        "data-tables-grid": DataTablesGrid,
+        "data-manager-grid": DataManagerGrid,
+    },
     data() {
         return {
             currentView: "data-tables-grid",
@@ -32,12 +37,6 @@ export default {
         };
     },
 
-    components: {
-        message: Message,
-        "data-tables-grid": DataTablesGrid,
-        "data-manager-grid": DataManagerGrid,
-    },
-
     computed: {
         currentProps() {
             let props;
@@ -59,6 +58,20 @@ export default {
         },
     },
 
+    created() {
+        axios
+            .get(`${getAppRoot()}admin/data_tables_list`)
+            .then((response) => {
+                this.isLoaded = true;
+                this.dataTables = response.data.data;
+                this.message = response.data.message;
+                this.status = response.data.status;
+            })
+            .catch((error) => {
+                console.error(error);
+            });
+    },
+
     methods: {
         showDataManager(dataManagerTableName) {
             axios
@@ -103,19 +116,5 @@ export default {
                 });
         },
     },
-
-    created() {
-        axios
-            .get(`${getAppRoot()}admin/data_tables_list`)
-            .then((response) => {
-                this.isLoaded = true;
-                this.dataTables = response.data.data;
-                this.message = response.data.message;
-                this.status = response.data.status;
-            })
-            .catch((error) => {
-                console.error(error);
-            });
-    },
 };
 </script>
diff --git a/client/src/components/admin/DataTablesGrid.vue b/client/src/components/admin/DataTablesGrid.vue
index 910f969c31e..c85b11b0e8b 100644
--- a/client/src/components/admin/DataTablesGrid.vue
+++ b/client/src/components/admin/DataTablesGrid.vue
@@ -20,6 +20,9 @@
 import BaseGrid from "./BaseGrid.vue";
 
 export default {
+    components: {
+        "base-grid": BaseGrid,
+    },
     props: {
         isLoaded: {
             type: Boolean,
@@ -42,10 +45,6 @@ export default {
         };
     },
 
-    components: {
-        "base-grid": BaseGrid,
-    },
-
     methods: {
         handleTableNameClick(event) {
             this.$emit("changeview", event.target.text);
diff --git a/client/src/components/admin/DataTypes.vue b/client/src/components/admin/DataTypes.vue
index e8088ba26e3..b609bdcaf33 100644
--- a/client/src/components/admin/DataTypes.vue
+++ b/client/src/components/admin/DataTypes.vue
@@ -39,18 +39,6 @@ export default {
         };
     },
 
-    methods: {
-        // Predefined columns with pretty headers (entries are optional)
-        prettyColumns() {
-            return [
-                { text: "Extension", dataIndex: "extension" },
-                { text: "Type", dataIndex: "type" },
-                { text: "MIME Type", dataIndex: "mimetype" },
-                { text: "Display in Upload", dataIndex: "display_in_upload" },
-            ];
-        },
-    },
-
     computed: {
         // Return predefined column headers merged
         // with all other column headers returned by the api
@@ -98,5 +86,17 @@ export default {
                 console.error(error);
             });
     },
+
+    methods: {
+        // Predefined columns with pretty headers (entries are optional)
+        prettyColumns() {
+            return [
+                { text: "Extension", dataIndex: "extension" },
+                { text: "Type", dataIndex: "type" },
+                { text: "MIME Type", dataIndex: "mimetype" },
+                { text: "Display in Upload", dataIndex: "display_in_upload" },
+            ];
+        },
+    },
 };
 </script>
diff --git a/client/src/components/admin/Dependencies/ContainerIndex.vue b/client/src/components/admin/Dependencies/ContainerIndex.vue
index 0d3fb0e8e8d..522642aa3e5 100644
--- a/client/src/components/admin/Dependencies/ContainerIndex.vue
+++ b/client/src/components/admin/Dependencies/ContainerIndex.vue
@@ -105,8 +105,8 @@ const RESOLVER_TYPE_OPTIONS = _.keys(DESCRIPTION).map((resolverType) => ({ value
 RESOLVER_TYPE_OPTIONS.splice(0, 0, { value: null, text: "*any*" });
 
 export default {
-    mixins: [DependencyIndexMixin],
     components: { ContainerResolutionDetails },
+    mixins: [DependencyIndexMixin],
     data() {
         return {
             error: null,
@@ -133,54 +133,6 @@ export default {
             resolutions: [],
         };
     },
-    methods: {
-        load() {
-            this.loading = true;
-            const params = this.apiParams();
-            getContainerResolutionToolbox(params)
-                .then((resolutions) => {
-                    this.resolutions = resolutions;
-                    this.loading = false;
-                })
-                .catch(this.handleError);
-        },
-        installSelected() {
-            this.loading = true;
-            resolveContainersWithInstall(this.selectedToolIds(), this.apiParams())
-                .then((resolutions) => {
-                    this.resolutions = resolutions;
-                    this.loading = false;
-                })
-                .catch(this.handleError);
-        },
-        apiParams() {
-            const params = {};
-            if (this.containerType) {
-                params.container_type = this.containerType;
-            }
-            if (this.resolverType) {
-                params.resolver_type = this.resolverType;
-            }
-            return params;
-        },
-        selectedToolIds() {
-            return this.items.filter((item) => item.selected).map((item) => item.tool_id);
-        },
-    },
-    watch: {
-        containerType: function (val) {
-            this.load();
-        },
-        resolverType: function (val) {
-            this.load();
-        },
-        filterResolution: function (val) {
-            if (val == "unresolved") {
-                this.filterResolverType = null;
-                this.filterContainerType = null;
-            }
-        },
-    },
     computed: {
         items: function () {
             return this.resolutions
@@ -220,5 +172,53 @@ export default {
                 });
         },
     },
+    watch: {
+        containerType: function (val) {
+            this.load();
+        },
+        resolverType: function (val) {
+            this.load();
+        },
+        filterResolution: function (val) {
+            if (val == "unresolved") {
+                this.filterResolverType = null;
+                this.filterContainerType = null;
+            }
+        },
+    },
+    methods: {
+        load() {
+            this.loading = true;
+            const params = this.apiParams();
+            getContainerResolutionToolbox(params)
+                .then((resolutions) => {
+                    this.resolutions = resolutions;
+                    this.loading = false;
+                })
+                .catch(this.handleError);
+        },
+        installSelected() {
+            this.loading = true;
+            resolveContainersWithInstall(this.selectedToolIds(), this.apiParams())
+                .then((resolutions) => {
+                    this.resolutions = resolutions;
+                    this.loading = false;
+                })
+                .catch(this.handleError);
+        },
+        apiParams() {
+            const params = {};
+            if (this.containerType) {
+                params.container_type = this.containerType;
+            }
+            if (this.resolverType) {
+                params.resolver_type = this.resolverType;
+            }
+            return params;
+        },
+        selectedToolIds() {
+            return this.items.filter((item) => item.selected).map((item) => item.tool_id);
+        },
+    },
 };
 </script>
diff --git a/client/src/components/admin/Dependencies/ResolutionIndex.vue b/client/src/components/admin/Dependencies/ResolutionIndex.vue
index c39e57b460b..b13e3f73640 100644
--- a/client/src/components/admin/Dependencies/ResolutionIndex.vue
+++ b/client/src/components/admin/Dependencies/ResolutionIndex.vue
@@ -105,8 +105,8 @@ const RESOLVER_TYPE_OPTIONS = _.keys(RESOLVER_DESCRIPTIONS).map((resolverType) =
 RESOLVER_TYPE_OPTIONS.splice(0, 0, { value: null, text: "*any*" });
 
 export default {
-    mixins: [DependencyIndexMixin],
     components: { ResolutionDetails },
+    mixins: [DependencyIndexMixin],
     data() {
         return {
             toggleState: false,
@@ -120,11 +120,6 @@ export default {
             requirements: [],
         };
     },
-    watch: {
-        resolverType: function (val) {
-            this.load();
-        },
-    },
     computed: {
         fields: function () {
             const fields = this.baseFields.slice();
@@ -186,6 +181,11 @@ export default {
             return toolIds;
         },
     },
+    watch: {
+        resolverType: function (val) {
+            this.load();
+        },
+    },
     methods: {
         unchecked: function () {
             return this.items.filter((item) => item.selected === false);
diff --git a/client/src/components/admin/Dependencies/UnusedIndex.vue b/client/src/components/admin/Dependencies/UnusedIndex.vue
index cdb1ac00d61..3a59c4aa92e 100644
--- a/client/src/components/admin/Dependencies/UnusedIndex.vue
+++ b/client/src/components/admin/Dependencies/UnusedIndex.vue
@@ -31,9 +31,6 @@ export default {
             paths: [],
         };
     },
-    created: function () {
-        this.load();
-    },
     computed: {
         items: function () {
             return this.paths.map((path) => {
@@ -49,6 +46,9 @@ export default {
             return false;
         },
     },
+    created: function () {
+        this.load();
+    },
     methods: {
         load() {
             getDependencyUnusedPaths()
diff --git a/client/src/components/admin/Home.vue b/client/src/components/admin/Home.vue
index fa16ffe346b..7e01164e8df 100644
--- a/client/src/components/admin/Home.vue
+++ b/client/src/components/admin/Home.vue
@@ -132,12 +132,6 @@ export default {
             required: true,
         },
     },
-    methods: {
-        useRouter: function (ev) {
-            const Galaxy = getGalaxyInstance();
-            Galaxy.page.router.push(ev.target.pathname.slice(root.length));
-        },
-    },
     computed: {
         adminDataTypesUrl: () => `${root}admin/data_types`,
         adminDataTablesUrl: () => `${root}admin/data_tables`,
@@ -154,5 +148,11 @@ export default {
         adminToolshedUrl: () => `${root}admin/toolshed`,
         adminToolVersionsUrl: () => `${root}admin/tool_versions`,
     },
+    methods: {
+        useRouter: function (ev) {
+            const Galaxy = getGalaxyInstance();
+            Galaxy.page.router.push(ev.target.pathname.slice(root.length));
+        },
+    },
 };
 </script>
diff --git a/client/src/components/admin/JobLock.vue b/client/src/components/admin/JobLock.vue
index dcb8d6f9b4e..40e8166f095 100644
--- a/client/src/components/admin/JobLock.vue
+++ b/client/src/components/admin/JobLock.vue
@@ -23,6 +23,9 @@ export default {
             this.handleJobLock(axios.put(`${getAppRoot()}api/job_lock`, { active: this.jobLock }));
         },
     },
+    created() {
+        this.initJobLock();
+    },
     methods: {
         initJobLock() {
             this.handleJobLock(axios.get(`${getAppRoot()}api/job_lock`));
@@ -38,8 +41,5 @@ export default {
                 });
         },
     },
-    created() {
-        this.initJobLock();
-    },
 };
 </script>
diff --git a/client/src/components/admin/Jobs.vue b/client/src/components/admin/Jobs.vue
index 8faf8385ae3..56e2b925366 100644
--- a/client/src/components/admin/Jobs.vue
+++ b/client/src/components/admin/Jobs.vue
@@ -73,8 +73,8 @@
             :fields="unfinishedJobFields"
             :items="unfinishedJobs"
             :filter="filter"
-            :tableCaption="runningTableCaption"
-            :noItemsMessage="runningNoJobsMessage"
+            :table-caption="runningTableCaption"
+            :no-items-message="runningNoJobsMessage"
             :loading="loading"
             :busy="busy">
             <template v-slot:head(selected)>
@@ -99,7 +99,7 @@
                 :fields="finishedJobFields"
                 :items="finishedJobs"
                 :filter="filter"
-                :noItemsMessage="finishedNoJobsMessage"
+                :no-items-message="finishedNoJobsMessage"
                 :loading="loading"
                 :busy="busy">
             </jobs-table>
@@ -149,6 +149,25 @@ export default {
             showAllRunning: false,
         };
     },
+    computed: {
+        finishedTableCaption() {
+            return `These jobs have completed in the previous ${this.cutoffMin} minutes.`;
+        },
+        runningTableCaption() {
+            return `These jobs are unfinished and have had their state updated in the previous ${this.cutoffMin} minutes. For currently running jobs, the "Last Update" column should indicate the runtime so far.`;
+        },
+        finishedNoJobsMessage() {
+            return `There are no recently finished jobs to show with current cutoff time of ${this.cutoffMin} minutes.`;
+        },
+        runningNoJobsMessage() {
+            let message = `There are no unfinished jobs`;
+            if (!this.showAllRunning) {
+                message += ` to show with current cutoff time of ${this.cutoffMin} minutes`;
+            }
+            message += ".";
+            return message;
+        },
+    },
     watch: {
         selectedStopJobIds(newVal) {
             if (newVal.length === 0) {
@@ -176,24 +195,8 @@ export default {
             this.finishedJobs = finishedJobs;
         },
     },
-    computed: {
-        finishedTableCaption() {
-            return `These jobs have completed in the previous ${this.cutoffMin} minutes.`;
-        },
-        runningTableCaption() {
-            return `These jobs are unfinished and have had their state updated in the previous ${this.cutoffMin} minutes. For currently running jobs, the "Last Update" column should indicate the runtime so far.`;
-        },
-        finishedNoJobsMessage() {
-            return `There are no recently finished jobs to show with current cutoff time of ${this.cutoffMin} minutes.`;
-        },
-        runningNoJobsMessage() {
-            let message = `There are no unfinished jobs`;
-            if (!this.showAllRunning) {
-                message += ` to show with current cutoff time of ${this.cutoffMin} minutes`;
-            }
-            message += ".";
-            return message;
-        },
+    created() {
+        this.update();
     },
     methods: {
         update() {
@@ -236,8 +239,5 @@ export default {
             this.selectedStopJobIds = checked ? this.jobsItemsModel.reduce((acc, j) => [...acc, j["id"]], []) : [];
         },
     },
-    created() {
-        this.update();
-    },
 };
 </script>
diff --git a/client/src/components/admin/SanitizeAllow.vue b/client/src/components/admin/SanitizeAllow.vue
index 6e6f7c2ec2d..d664ed6f668 100755
--- a/client/src/components/admin/SanitizeAllow.vue
+++ b/client/src/components/admin/SanitizeAllow.vue
@@ -111,6 +111,10 @@ import { getAppRoot } from "onload/loadConfig";
 import Message from "../Message.vue";
 
 export default {
+    components: {
+        message: Message,
+        "base-grid": BaseGrid,
+    },
     data() {
         return {
             isLoaded: false,
@@ -136,11 +140,6 @@ export default {
         };
     },
 
-    components: {
-        message: Message,
-        "base-grid": BaseGrid,
-    },
-
     created() {
         axios
             .get(`${getAppRoot()}api/sanitize_allow`)
diff --git a/client/src/components/login/Index.vue b/client/src/components/login/Index.vue
index efb845bfce2..f0ecf797f5f 100644
--- a/client/src/components/login/Index.vue
+++ b/client/src/components/login/Index.vue
@@ -21,25 +21,10 @@ import BootstrapVue from "bootstrap-vue";
 Vue.use(BootstrapVue);
 
 export default {
-    data() {
-        return {
-            login: true,
-        };
-    },
-    computed: {
-        showLogin: function () {
-            return this.login;
-        },
-    },
     components: {
         login: Login,
         register: Register,
     },
-    methods: {
-        toggleLogin: function () {
-            this.login = !this.login;
-        },
-    },
     props: {
         show_welcome_with_login: {
             type: Boolean,
@@ -66,5 +51,20 @@ export default {
             required: false,
         },
     },
+    data() {
+        return {
+            login: true,
+        };
+    },
+    computed: {
+        showLogin: function () {
+            return this.login;
+        },
+    },
+    methods: {
+        toggleLogin: function () {
+            this.login = !this.login;
+        },
+    },
 };
 </script>