Standardize vue component property order.

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

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>
 

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

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>

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">

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>
 

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);

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);

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);

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"]),
     },

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"]),
 

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"]),
     },

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>

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);

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) {

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>
 

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() {

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>

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() {

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,

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) {

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 },
     },

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>

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 },

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>

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;

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

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) {

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;

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 = {

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>
 

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>
 

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>

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"]),
     },

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();

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}`;

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 });

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>
 

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;

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);

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,

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>
 

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);

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,

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,

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

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>
 

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);

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;

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 {

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>

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;

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 };

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) => {

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;

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;

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>
 

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;

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>

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>

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;

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>
 

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>

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,

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,

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,

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,

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");
     },

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) {

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>
 

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>

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({

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();

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;

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) => {

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;

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>

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) {

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,

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);

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();

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();

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 {

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>

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 {

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 () {

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>

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>

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);
     },

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>
 

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>
 

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>

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>

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>
 

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>

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) {

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;

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);

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 = {};

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) {