From c2aa1feb74f2c3da7aafeccbbf49621b9fd94be0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jarda=20Kot=C4=9B=C5=A1ovec?= <jarda.kotesovec@gmail.com>
Date: Mon, 27 Nov 2023 12:28:38 +0100
Subject: [PATCH] pkp/pkp-lib#9538 Apply recommended lint rules for vue3

---
 .eslintrc.cjs                                 |   2 +-
 src/App.vue                                   |   2 +-
 .../ActivityIndicatorPopup.vue                |   6 +-
 src/components/Button/Button.vue              |   2 +-
 src/components/Composer/Composer.vue          |  92 ++++-----
 src/components/Container/AccessPage.vue       |  18 +-
 .../Container/AddContextContainer.vue         |   2 +-
 src/components/Container/AdminPage.vue        |   2 +-
 .../AdvancedSearchReviewerContainer.vue       |  20 +-
 src/components/Container/Container.vue        |  56 +++---
 src/components/Container/DecisionPage.vue     |  56 +++---
 src/components/Container/DoiPageOJS.vue       |   2 +-
 src/components/Container/DoiPageOMP.vue       |   2 +-
 src/components/Container/DoiPageOPS.vue       |   2 +-
 .../Container/FailedJobDetailsPage.vue        |   2 +-
 src/components/Container/FailedJobsPage.vue   |   2 +-
 src/components/Container/ImportExportPage.vue |   2 +-
 src/components/Container/JobsPage.vue         |  10 +-
 .../Container/ManageCatalogPage.vue           |   2 +-
 src/components/Container/ManageEmailsPage.vue |  22 +-
 src/components/Container/Page.vue             |  88 ++++----
 src/components/Container/PageOJS.vue          |   2 +-
 src/components/Container/SettingsPage.vue     |   2 +-
 .../Container/StartSubmissionPage.vue         |   2 +-
 .../Container/StatsEditorialPage.vue          |   2 +-
 src/components/Container/StatsPage.vue        | 103 +++++-----
 .../Container/StatsPublicationsPage.vue       |  14 +-
 src/components/Container/StatsUsersPage.vue   |   2 +-
 .../Container/SubmissionWizardPage.vue        | 188 +++++++++---------
 .../Container/SubmissionWizardPageOMP.vue     |   8 +-
 .../Container/SubmissionWizardPageOPS.vue     |  26 +--
 src/components/Container/WorkflowPage.vue     | 150 +++++++-------
 src/components/Container/WorkflowPageOJS.vue  |  50 ++---
 src/components/Container/WorkflowPageOMP.vue  |  24 +--
 src/components/Container/WorkflowPageOPS.vue  |  40 ++--
 src/components/DateRange/DateRange.vue        |  36 ++--
 src/components/Dropdown/Dropdown.vue          |  10 +-
 src/components/Expander/Expander.vue          |   2 +-
 src/components/FileAttacher/FileAttacher.vue  |   6 +-
 .../FileAttacher/FileAttacherFileStage.vue    |  42 ++--
 .../FileAttacher/FileAttacherLibrary.vue      |  20 +-
 .../FileAttacher/FileAttacherReviewFiles.vue  |  12 +-
 .../FileAttacher/FileAttacherUpload.vue       |  16 +-
 .../FileUploadProgress/FileUploadProgress.vue |   2 +-
 src/components/FileUploader/FileUploader.vue  |  40 ++--
 src/components/Filter/Filter.vue              |   2 +-
 src/components/Filter/FilterAutosuggest.vue   |  20 +-
 src/components/Filter/FilterSlider.vue        |   8 +-
 .../Filter/FilterSliderMultirange.vue         |   8 +-
 src/components/Form/Form.vue                  |  32 +--
 src/components/Form/FormGroup.vue             |  20 +-
 src/components/Form/FormLocales.vue           |   8 +-
 src/components/Form/FormPage.vue              |  54 ++---
 .../Form/context/AddContextForm.vue           |  24 +--
 src/components/Form/context/DateTimeForm.vue  |  48 ++---
 .../Form/fields/FieldArchivingPn.vue          | 100 +++++-----
 .../Form/fields/FieldAutosuggestPreset.vue    |  44 ++--
 .../Form/fields/FieldBaseAutosuggest.vue      |  34 ++--
 src/components/Form/fields/FieldColor.vue     |   8 +-
 .../Form/fields/FieldMetadataSetting.vue      |   8 +-
 src/components/Form/fields/FieldOptions.vue   |  92 ++++-----
 .../Form/fields/FieldPreparedContent.vue      |  14 +-
 src/components/Form/fields/FieldPubId.vue     |  18 +-
 .../Form/fields/FieldRadioInput.vue           |  48 ++---
 src/components/Form/fields/FieldRichText.vue  |   2 +-
 .../Form/fields/FieldRichTextarea.vue         |  54 ++---
 src/components/Form/fields/FieldSelect.vue    |  18 +-
 .../Form/fields/FieldSelectIssue.vue          |  10 +-
 src/components/Form/fields/FieldText.vue      |  38 ++--
 src/components/Form/fields/FieldTextarea.vue  |  18 +-
 src/components/Form/fields/FieldUpload.vue    |  76 +++----
 .../Form/fields/FieldUploadImage.vue          | 100 +++++-----
 src/components/Icon/Icon.vue                  |   4 +-
 .../InsertContent/InsertContent.vue           |   8 +-
 src/components/ListPanel/ListPanel.vue        |   4 +-
 .../announcements/AnnouncementsListPanel.vue  |  12 +-
 .../contributors/ContributorsListPanel.vue    |  30 +--
 src/components/ListPanel/doi/DoiListItem.vue  |  48 ++---
 src/components/ListPanel/doi/DoiListPanel.vue | 121 ++++++-----
 .../highlights/HighlightsListPanel.vue        |  22 +-
 .../institutions/InstitutionsListPanel.vue    |  12 +-
 .../SelectSubmissionFileListItem.vue          |   6 +-
 .../SubmissionFilesListItem.vue               |   6 +-
 .../SubmissionFilesListPanel.vue              |  24 +--
 .../ListPanel/submissions/CatalogListItem.vue |   4 +-
 .../submissions/CatalogListPanel.vue          |  60 +++---
 .../submissions/SubmissionsListItem.vue       |  16 +-
 .../submissions/SubmissionsListPanel.vue      |  82 ++++----
 .../users/SelectReviewerListItem.vue          |   9 +-
 .../users/SelectReviewerListPanel.vue         |  96 ++++-----
 src/components/Modal/Dialog.vue               |  20 +-
 src/components/Modal/Modal.vue                |   2 +-
 src/components/Modal/SideModalBody.vue        |   6 +-
 src/components/Search/Search.vue              |   8 +-
 src/components/Steps/Step.vue                 |   2 +-
 src/components/Steps/Steps.vue                | 128 ++++++------
 src/components/Table/Table.vue                |   2 +-
 src/components/Tabs/Tab.vue                   |   4 +-
 src/components/Tabs/Tabs.vue                  |   6 +-
 src/docs/Component.vue                        |  28 +--
 src/docs/Page.vue                             |   6 +-
 .../previews/PreviewActionPanel.vue           |   6 +-
 .../Badge/previews/PreviewBadge.vue           |  12 +-
 .../Button/previews/PreviewButton.vue         |   8 +-
 .../Chart/previews/PreviewChart.vue           |   2 +-
 .../Chart/previews/PreviewDoughnut.vue        |   2 +-
 .../Composer/previews/PreviewComposer.vue     |  54 ++---
 .../DateRange/previews/PreviewDateRange.vue   |  40 ++--
 .../previews/PreviewDecisionPage.vue          |  76 +++----
 .../components/File/previews/PreviewFile.vue  |  18 +-
 .../previews/ExampleFileAttacher.vue          |   2 +-
 .../previews/PreviewFileUploadProgress.vue    |  12 +-
 .../previews/PreviewFileUploader.vue          |   8 +-
 .../Filter/previews/PreviewFilter.vue         |  10 +-
 .../previews/PreviewFilterAutosuggest.vue     |   4 +-
 .../Filter/previews/PreviewFilterSlider.vue   |  20 +-
 .../PreviewFilterSliderMultirange.vue         |  16 +-
 .../previews/PreviewFieldArchivingPn.vue      |   2 +-
 .../PreviewFieldAutosuggestPreset.vue         |   2 +-
 .../ComponentFieldBaseAutosuggest.vue         |   4 +-
 .../previews/ExampleFieldUserAutosuggest.vue  |   2 +-
 .../previews/PreviewFieldBaseAutosuggest.vue  |   2 +-
 .../PreviewFieldBaseAutosuggestDisabled.vue   |   2 +-
 .../PreviewFieldBaseAutosuggestInline.vue     |   2 +-
 .../FieldColor/previews/PreviewFieldColor.vue |   2 +-
 .../FieldHtml/previews/PreviewFieldHtml.vue   |   2 +-
 .../previews/PreviewFieldMetadataSetting.vue  |   2 +-
 .../previews/PreviewFieldOptions.vue          |   2 +-
 .../previews/PreviewFieldOptionsConfirm.vue   |   2 +-
 .../previews/PreviewFieldOptionsOrderable.vue |   2 +-
 .../previews/PreviewFieldOptionsRadio.vue     |   2 +-
 .../previews/PreviewFieldPreparedContent.vue  |  12 +-
 .../fields/FieldPubId/ExampleFieldPubId.vue   |   2 +-
 .../FieldPubId/previews/PreviewFieldPubId.vue |   2 +-
 .../previews/PreviewFieldRadioInput.vue       |   2 +-
 .../previews/PreviewFieldRichText.vue         |   2 +-
 .../ComponentFieldRichTextarea.vue            |   6 +-
 .../previews/PreviewFieldRichTextarea.vue     |   2 +-
 .../PreviewFieldRichTextareaHeavyToolbar.vue  |   2 +-
 .../PreviewFieldRichTextareaLarge.vue         |   2 +-
 .../PreviewFieldRichTextareaMediumToolbar.vue |   2 +-
 .../PreviewFieldRichTextareaWordLimit.vue     |   2 +-
 .../previews/PreviewFieldSelect.vue           |   2 +-
 .../ComponentFieldSelectIssue.vue             |   4 +-
 .../previews/PreviewFieldSelectIssue.vue      |   2 +-
 .../PreviewFieldSelectIssuePublished.vue      |   2 +-
 .../PreviewFieldSelectIssueScheduled.vue      |   2 +-
 .../previews/PreviewFieldShowEnsuringLink.vue |   2 +-
 .../FieldText/previews/PreviewFieldText.vue   |   2 +-
 .../previews/PreviewFieldTextLarge.vue        |   2 +-
 .../previews/PreviewFieldTextOptIntoEdit.vue  |   6 +-
 .../previews/PreviewFieldTextPrefix.vue       |   2 +-
 .../previews/PreviewFieldTextSmall.vue        |   2 +-
 .../previews/PreviewFieldTextarea.vue         |   2 +-
 .../previews/PreviewFieldTextareaLarge.vue    |   2 +-
 .../previews/PreviewFieldTextareaSmall.vue    |   2 +-
 .../previews/PreviewFieldUpload.vue           |   2 +-
 .../previews/PreviewFieldUploadImage.vue      |   2 +-
 .../field-options-submission-agreement.js     |   2 +-
 .../Header/previews/PreviewHeader.vue         |   4 +-
 .../ComponentSelectReviewerListPanel.vue      |   2 +-
 .../ComponentSubmissionFilesListPanel.vue     |   2 +-
 .../PreviewAnnouncementsListPanel.vue         |  16 +-
 .../previews/PreviewCatalogListPanel.vue      |  18 +-
 .../previews/PreviewDoiListPanel.vue          |  10 +-
 .../previews/PreviewDoiListPanelOJS.vue       |  12 +-
 .../previews/PreviewHighlightsListPanel.vue   |  16 +-
 .../previews/PreviewInstitutionsListPanel.vue |  14 +-
 .../previews/PreviewListPanelActions.vue      |   2 +-
 .../previews/PreviewListPanelFilter.vue       |   8 +-
 .../previews/PreviewListPanelItemActions.vue  |   2 +-
 .../previews/PreviewListPanelItemExpander.vue |   6 +-
 .../previews/PreviewListPanelPagination.vue   |   6 +-
 .../previews/PreviewListPanelSearch.vue       |   2 +-
 .../previews/PreviewListPanelSelect.vue       |  16 +-
 .../PreviewSelectReviewerListPanel.vue        |  60 +++---
 .../PreviewSubmissionFilesListPanel.vue       |  28 +--
 .../previews/PreviewSubmissionsListPanel.vue  |  22 +-
 .../components/ListPanel/readme-highlights.md |  12 +-
 .../previews/PreviewManageEmailsPage.vue      |  36 ++--
 .../Modal/previews/PreviewModal.vue           |   2 +-
 .../Modal/previews/PreviewModalActions.vue    |   8 +-
 .../Modal/previews/PreviewModalForm.vue       |   2 +-
 .../Modal/previews/PreviewModalSide.vue       |   4 +-
 .../Modal/previews/PreviewModalTabs.vue       |   2 +-
 .../previews/PreviewNotification.vue          |   2 +-
 .../Orderer/previews/PreviewOrderer.vue       |   6 +-
 .../previews/PreviewOrdererDraggable.vue      |   4 +-
 .../components/Page/previews/PreviewPage.vue  |   4 +-
 .../Pagination/previews/PreviewPagination.vue |   4 +-
 .../previews/PreviewProgressBar.vue           |   6 +-
 .../Search/previews/PreviewSearch.vue         |   2 +-
 .../previews/PreviewStatsEditorialPage.vue    |  30 +--
 .../previews/PreviewStatsPublicationsPage.vue |  38 ++--
 .../Steps/previews/PreviewSteps.vue           |  20 +-
 .../previews/PreviewSubmissionWizardPage.vue  |  14 +-
 .../previews/PreviewSubmissionsPage.vue       |   6 +-
 .../Table/previews/PreviewLabelledBy.vue      |   2 +-
 .../Table/previews/PreviewPagination.vue      |   8 +-
 .../Table/previews/PreviewSorting.vue         |  16 +-
 .../Table/previews/PreviewTable.vue           |   4 +-
 .../components/Tabs/previews/PreviewBadge.vue |   6 +-
 .../Tabs/previews/PreviewDefault.vue          |   8 +-
 .../components/Tabs/previews/PreviewIcon.vue  |   6 +-
 .../Tabs/previews/PreviewNested.vue           |  12 +-
 .../components/Tabs/previews/PreviewSide.vue  |  14 +-
 .../components/Tabs/previews/PreviewTabs.vue  |   6 +-
 .../previews/PreviewWorkflowPage.vue          |  22 +-
 .../mixins/Fetch/previews/PreviewFetch.vue    |  32 +--
 .../Notify/previews/PreviewNotify.vue         |   6 +-
 src/mixins/autosave.js                        |   2 +-
 src/mixins/fetch.js                           |   2 +-
 src/pages/submissions/ColumnStage.vue         |   6 +-
 src/pages/submissions/ColumnTitle.vue         |   2 +-
 .../submissions/SubmissionSummaryModal.vue    |   2 +-
 215 files changed, 1937 insertions(+), 1936 deletions(-)

diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index 489bb5545..2bbea33df 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -7,7 +7,7 @@ module.exports = {
 		node: true,
 	},
 	extends: [
-		'plugin:vue/vue3-essential',
+		'plugin:vue/vue3-recommended',
 		'eslint:recommended',
 		'@vue/eslint-config-prettier/skip-formatting',
 		'plugin:storybook/recommended',
diff --git a/src/App.vue b/src/App.vue
index 7d4688ecd..99e5a0875 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -2,8 +2,8 @@
 	<vue-announcer class="sr-only" />
 	<PkpDialog
 		:open="$store.dialog.dialogOpened"
-		@close="$store.dialog.closeDialog()"
 		v-bind="$store.dialog.dialogProps"
+		@close="$store.dialog.closeDialog()"
 	></PkpDialog>
 	<nav class="nav" aria-label="Primary Navigation">
 		<nav-group>
diff --git a/src/components/ActivityIndicatorPopup/ActivityIndicatorPopup.vue b/src/components/ActivityIndicatorPopup/ActivityIndicatorPopup.vue
index 306a7f4f3..19f840bf7 100644
--- a/src/components/ActivityIndicatorPopup/ActivityIndicatorPopup.vue
+++ b/src/components/ActivityIndicatorPopup/ActivityIndicatorPopup.vue
@@ -5,7 +5,7 @@
 		</template>
 
 		<div>
-			<badge :isPrimary="true">
+			<badge :is-primary="true">
 				<icon icon="comment-o" :inline="true" />
 				Ongoing review - request accepted
 			</badge>
@@ -23,11 +23,11 @@
 			.
 		</div>
 		<div>
-			<PkpButton :isLink="true">Edit due date</PkpButton>
+			<PkpButton :is-link="true">Edit due date</PkpButton>
 		</div>
 		<div class="mt-4">
 			<PkpButton>View details</PkpButton>
-			<PkpButton class="ml-4" :isWarnable="true">Unassign</PkpButton>
+			<PkpButton class="ml-4" :is-warnable="true">Unassign</PkpButton>
 		</div>
 	</PkpPopover>
 </template>
diff --git a/src/components/Button/Button.vue b/src/components/Button/Button.vue
index 915144d1e..5d07fc3bb 100644
--- a/src/components/Button/Button.vue
+++ b/src/components/Button/Button.vue
@@ -15,7 +15,7 @@
 
 <script>
 export default {
-	name: 'pkpButton',
+	name: 'PkpButton',
 	props: {
 		element: {
 			type: String,
diff --git a/src/components/Composer/Composer.vue b/src/components/Composer/Composer.vue
index c408eda62..80528c467 100644
--- a/src/components/Composer/Composer.vue
+++ b/src/components/Composer/Composer.vue
@@ -12,11 +12,11 @@
 					</div>
 					<search
 						v-if="emailTemplatesApiUrl"
-						:searchLabel="findTemplateLabel"
+						:search-label="findTemplateLabel"
 						class="composer__templates__search"
-						:searchPhrase="searchPhrase"
+						:search-phrase="searchPhrase"
 						@search-phrase-changed="
-							(newSearchPhrase) => (this.searchPhrase = newSearchPhrase)
+							(newSearchPhrase) => (searchPhrase = newSearchPhrase)
 						"
 					/>
 					<ul
@@ -113,12 +113,12 @@
 						class="composer__recipients"
 						name="to"
 						:label="recipientsLabel"
-						:isLabelInline="true"
-						:deselectLabel="deselectLabel"
+						:is-label-inline="true"
+						:deselect-label="deselectLabel"
 						:all-errors="errors"
-						groupId="composer"
-						:formId="id"
-						:selectedLabel="recipientsLabel"
+						group-id="composer"
+						:form-id="id"
+						:selected-label="recipientsLabel"
 						:options="localizedRecipientOptions"
 						:selected="recipientsSelected"
 						:value="recipients"
@@ -127,8 +127,8 @@
 					/>
 					<button
 						v-if="!ccIsEnabled"
-						class="composer__ccToggle -linkButton"
 						ref="ccButtons"
+						class="composer__ccToggle -linkButton"
 						@click="enableCC"
 					>
 						{{ addCCLabel }}
@@ -142,14 +142,14 @@
 				>
 					<label :for="id + '-cc'">{{ ccLabel }}</label>
 					<input
-						type="text"
-						name="cc"
 						:id="id + '-cc'"
 						v-model="ccBinded"
+						type="text"
+						name="cc"
 						:aria-described-by="!!errors.cc ? id + '-cc-error' : ''"
 						:aria-invalid="!!errors.cc"
-						@focus="() => (this.isFocused = 'cc')"
-						@blur="() => (this.isFocused = '')"
+						@focus="() => (isFocused = 'cc')"
+						@blur="() => (isFocused = '')"
 					/>
 				</div>
 				<field-error
@@ -165,14 +165,14 @@
 				>
 					<label :for="id + '-bcc'">{{ bccLabel }}</label>
 					<input
-						type="text"
-						name="bcc"
 						:id="id + '-bcc'"
 						v-model="bccBinded"
+						type="text"
+						name="bcc"
 						:aria-described-by="!!errors.bcc ? id + '-bcc-error' : ''"
 						:aria-invalid="!!errors.bcc"
-						@focus="() => (this.isFocused = 'bcc')"
-						@blur="() => (this.isFocused = '')"
+						@focus="() => (isFocused = 'bcc')"
+						@blur="() => (isFocused = '')"
 					/>
 				</div>
 				<field-error
@@ -187,14 +187,14 @@
 				>
 					<label :for="id + '-subject'">{{ subjectLabel }}</label>
 					<input
-						type="text"
-						name="subject"
 						:id="id + '-subject'"
 						v-model="subjectBinded"
+						type="text"
+						name="subject"
 						:aria-described-by="!!errors.subject ? id + '-subject-error' : ''"
 						:aria-invalid="!!errors.subject"
-						@focus="() => (this.isFocused = 'subject')"
-						@blur="() => (this.isFocused = '')"
+						@focus="() => (isFocused = 'subject')"
+						@blur="() => (isFocused = '')"
 					/>
 				</div>
 				<field-error
@@ -206,27 +206,27 @@
 					class="composer__body"
 					name="body"
 					:label="bodyLabel"
-					groupId="message"
-					primaryLocale="en"
+					group-id="message"
+					primary-locale="en"
 					:all-errors="errors"
 					:init="bodyInit"
-					:formId="id"
+					:form-id="id"
 					plugins="link"
 					size="large"
 					toolbar="bold italic superscript subscript | link"
 					:value="body"
-					:preparedContent="compiledVariables"
-					:insertLabel="insertLabel"
-					:insertModalLabel="insertModalLabel"
-					:preparedContentLabel="insertContentLabel"
-					:searchLabel="insertSearchLabel"
-					@change="(name, prop, value) => this.emitChange({body: value})"
+					:prepared-content="compiledVariables"
+					:insert-label="insertLabel"
+					:insert-modal-label="insertModalLabel"
+					:prepared-content-label="insertContentLabel"
+					:search-label="insertSearchLabel"
+					@change="(name, prop, value) => emitChange({body: value})"
 				>
 					<template #footer>
 						<div
 							v-if="attachments.length"
-							class="composer__attachments"
 							ref="attachedFiles"
+							class="composer__attachments"
 						>
 							<span class="-screenReader">
 								{{ attachedFilesLabel }}
@@ -256,7 +256,7 @@
 					</template>
 				</field-prepared-content>
 				<modal
-					:closeLabel="t('common.close')"
+					:close-label="t('common.close')"
 					:name="fileAttacherModalId"
 					:title="attachFilesLabel"
 					:open="isModalOpenedFileAttacher"
@@ -298,7 +298,6 @@ import preparedContent from '@/mixins/preparedContent';
 
 export default {
 	name: 'Composer',
-	mixins: [ajaxErrorCallback, dialog, preparedContent],
 	components: {
 		FieldAutosuggestPreset,
 		FieldError,
@@ -307,6 +306,7 @@ export default {
 		Modal,
 		Search,
 	},
+	mixins: [ajaxErrorCallback, dialog, preparedContent],
 	props: {
 		addCCLabel: {
 			type: String,
@@ -664,6 +664,19 @@ export default {
 			);
 		},
 	},
+	watch: {
+		searchPhrase() {
+			this.$nextTick(() => this.search());
+		},
+	},
+	created() {
+		if (this.initialTemplateKey) {
+			this.loadTemplate(this.initialTemplateKey);
+		}
+	},
+	mounted() {
+		this.updateToPadding();
+	},
 	methods: {
 		/**
 		 * Add file attachments to the email
@@ -986,19 +999,6 @@ export default {
 			});
 		},
 	},
-	created() {
-		if (this.initialTemplateKey) {
-			this.loadTemplate(this.initialTemplateKey);
-		}
-	},
-	mounted() {
-		this.updateToPadding();
-	},
-	watch: {
-		searchPhrase() {
-			this.$nextTick(() => this.search());
-		},
-	},
 };
 </script>
 
diff --git a/src/components/Container/AccessPage.vue b/src/components/Container/AccessPage.vue
index 2ff0022b6..b911a0ec3 100644
--- a/src/components/Container/AccessPage.vue
+++ b/src/components/Container/AccessPage.vue
@@ -4,23 +4,15 @@ import NotifyUsersForm from '@/components/Form/context/NotifyUsersForm.vue';
 
 export default {
 	name: 'AccessPage',
-	extends: Page,
 	components: {
 		NotifyUsersForm,
 	},
+	extends: Page,
 	data() {
 		return {
 			totalBulkJobs: 0,
 		};
 	},
-	methods: {
-		/**
-		 * Reload the page to send another email
-		 */
-		reload() {
-			window.location.reload();
-		},
-	},
 	mounted() {
 		pkp.eventBus.$on('form-success', (formId, data) => {
 			if (formId !== pkp.const.FORM_NOTIFY_USERS) {
@@ -33,6 +25,14 @@ export default {
 	unmounted() {
 		pkp.eventBus.$off('form-success');
 	},
+	methods: {
+		/**
+		 * Reload the page to send another email
+		 */
+		reload() {
+			window.location.reload();
+		},
+	},
 };
 </script>
 
diff --git a/src/components/Container/AddContextContainer.vue b/src/components/Container/AddContextContainer.vue
index 6746533be..81a3c8d5f 100644
--- a/src/components/Container/AddContextContainer.vue
+++ b/src/components/Container/AddContextContainer.vue
@@ -4,9 +4,9 @@ import AddContextForm from '@/components/Form/context/AddContextForm.vue';
 
 export default {
 	name: 'AddContextContainer',
-	extends: Container,
 	components: {
 		AddContextForm,
 	},
+	extends: Container,
 };
 </script>
diff --git a/src/components/Container/AdminPage.vue b/src/components/Container/AdminPage.vue
index daf0d3c40..1e7653db3 100644
--- a/src/components/Container/AdminPage.vue
+++ b/src/components/Container/AdminPage.vue
@@ -6,7 +6,6 @@ import ActionPanel from '../ActionPanel/ActionPanel.vue';
 import AnnouncementsListPanel from '../ListPanel/announcements/AnnouncementsListPanel.vue';
 
 export default {
-	extends: Page,
 	name: 'AdminPage',
 	components: {
 		ActionPanel,
@@ -14,6 +13,7 @@ export default {
 		AnnouncementsListPanel,
 		ThemeForm,
 	},
+	extends: Page,
 	data() {
 		return {
 			announcementsEnabled: false,
diff --git a/src/components/Container/AdvancedSearchReviewerContainer.vue b/src/components/Container/AdvancedSearchReviewerContainer.vue
index 5f3463b1b..36af13fd8 100644
--- a/src/components/Container/AdvancedSearchReviewerContainer.vue
+++ b/src/components/Container/AdvancedSearchReviewerContainer.vue
@@ -5,26 +5,26 @@
 			<div class="list_outline">
 				<ol class="list_box">
 					<li
-						class="author_row"
 						v-for="(affiliations, author) in displayedItems"
 						:key="author"
+						class="author_row"
 					>
 						<strong>{{ author }}</strong>
-						<span v-if="affiliations"> - </span>
+						<span v-if="affiliations">-</span>
 						<span>{{ affiliations }}</span>
 					</li>
 				</ol>
-				<div class="action_container" v-if="authorCount > 4">
+				<div v-if="authorCount > 4" class="action_container">
 					<span
-						class="show_authors_action"
 						v-if="!showAllAuthors"
+						class="show_authors_action"
 						@click="toggleShowAllAuthors"
 					>
 						{{ `${labels.showAll} ${authorCount} ${labels.authorsLabel}` }}
 					</span>
 					<span
-						class="show_authors_action"
 						v-if="showAllAuthors"
+						class="show_authors_action"
 						@click="toggleShowAllAuthors"
 					>
 						{{ labels.showLess }}
@@ -49,11 +49,6 @@ export default {
 			showAllAuthors: false,
 		};
 	},
-	methods: {
-		toggleShowAllAuthors() {
-			this.showAllAuthors = !this.showAllAuthors;
-		},
-	},
 	computed: {
 		displayedItems() {
 			if (this.showAllAuthors) {
@@ -73,6 +68,11 @@ export default {
 			return Object.keys(this.authors).length;
 		},
 	},
+	methods: {
+		toggleShowAllAuthors() {
+			this.showAllAuthors = !this.showAllAuthors;
+		},
+	},
 };
 </script>
 <style lang="less">
diff --git a/src/components/Container/Container.vue b/src/components/Container/Container.vue
index ce66f503d..fd2daaec1 100644
--- a/src/components/Container/Container.vue
+++ b/src/components/Container/Container.vue
@@ -19,34 +19,6 @@ export default {
 			components: {},
 		};
 	},
-	methods: {
-		/**
-		 * Get a component by its key
-		 *
-		 * @param {String} key
-		 * @return {Object}
-		 */
-		get(key) {
-			return this.components[key] ? this.components[key] : {};
-		},
-
-		/**
-		 * Set data for a component
-		 *
-		 * Existing keys in the component that are not passed in the data
-		 * argument will not be modified or removed.
-		 *
-		 * @param {String} key
-		 * @param {Array} data Key/value object with new data
-		 */
-		set: function (key, data) {
-			let component = {...this.get(key)};
-			Object.keys(data).forEach(function (dataKey) {
-				component[dataKey] = data[dataKey];
-			});
-			this.components[key] = component;
-		},
-	},
 	mounted() {
 		/**
 		 * Listen for changes in the supported form languages and update
@@ -79,5 +51,33 @@ export default {
 	unmounted() {
 		pkp.eventBus.$off('set-form-languages');
 	},
+	methods: {
+		/**
+		 * Get a component by its key
+		 *
+		 * @param {String} key
+		 * @return {Object}
+		 */
+		get(key) {
+			return this.components[key] ? this.components[key] : {};
+		},
+
+		/**
+		 * Set data for a component
+		 *
+		 * Existing keys in the component that are not passed in the data
+		 * argument will not be modified or removed.
+		 *
+		 * @param {String} key
+		 * @param {Array} data Key/value object with new data
+		 */
+		set: function (key, data) {
+			let component = {...this.get(key)};
+			Object.keys(data).forEach(function (dataKey) {
+				component[dataKey] = data[dataKey];
+			});
+			this.components[key] = component;
+		},
+	},
 };
 </script>
diff --git a/src/components/Container/DecisionPage.vue b/src/components/Container/DecisionPage.vue
index 07481548f..5a2f0c9dc 100644
--- a/src/components/Container/DecisionPage.vue
+++ b/src/components/Container/DecisionPage.vue
@@ -17,8 +17,6 @@ const stepTypes = {
 };
 
 export default {
-	extends: Page,
-	mixins: [ajaxError, dialog, localizeSubmission],
 	components: {
 		ButtonRow,
 		Composer,
@@ -27,6 +25,8 @@ export default {
 		SelectSubmissionFileListItem,
 		Tooltip,
 	},
+	extends: Page,
+	mixins: [ajaxError, dialog, localizeSubmission],
 	data() {
 		return {
 			abandonDecisionLabel: '',
@@ -92,6 +92,32 @@ export default {
 			return this.currentStepIndex === this.steps.length - 1;
 		},
 	},
+	created() {
+		if (this.steps.length) {
+			/**
+			 * Start the first step
+			 */
+			this.openStep(this.steps[0].id);
+
+			/**
+			 * Set up email data for each email step
+			 */
+			this.steps = this.steps.map((step) => {
+				if (step.type !== stepTypes.email) {
+					return step;
+				}
+				return {
+					...step,
+					attachments: [],
+					subject: '',
+					body: '',
+					cc: '',
+					bcc: '',
+					recipients: step.recipientOptions.map((to) => to.value),
+				};
+			});
+		}
+	},
 	methods: {
 		/**
 		 * Open a confirmation prompt to cancel the
@@ -403,32 +429,6 @@ export default {
 			});
 		},
 	},
-	created() {
-		if (this.steps.length) {
-			/**
-			 * Start the first step
-			 */
-			this.openStep(this.steps[0].id);
-
-			/**
-			 * Set up email data for each email step
-			 */
-			this.steps = this.steps.map((step) => {
-				if (step.type !== stepTypes.email) {
-					return step;
-				}
-				return {
-					...step,
-					attachments: [],
-					subject: '',
-					body: '',
-					cc: '',
-					bcc: '',
-					recipients: step.recipientOptions.map((to) => to.value),
-				};
-			});
-		}
-	},
 };
 </script>
 
diff --git a/src/components/Container/DoiPageOJS.vue b/src/components/Container/DoiPageOJS.vue
index 62e3f4218..a09dcda38 100644
--- a/src/components/Container/DoiPageOJS.vue
+++ b/src/components/Container/DoiPageOJS.vue
@@ -4,9 +4,9 @@ import Page from '@/components/Container/Page.vue';
 
 export default {
 	name: 'DoiPageOJS',
-	extends: Page,
 	components: {
 		DoiListPanel,
 	},
+	extends: Page,
 };
 </script>
diff --git a/src/components/Container/DoiPageOMP.vue b/src/components/Container/DoiPageOMP.vue
index 54f466911..92ba54df0 100644
--- a/src/components/Container/DoiPageOMP.vue
+++ b/src/components/Container/DoiPageOMP.vue
@@ -4,9 +4,9 @@ import Page from '@/components/Container/Page.vue';
 
 export default {
 	name: 'DoiPageOMP',
-	extends: Page,
 	components: {
 		DoiListPanel,
 	},
+	extends: Page,
 };
 </script>
diff --git a/src/components/Container/DoiPageOPS.vue b/src/components/Container/DoiPageOPS.vue
index 7ac67e768..42f9ca30d 100644
--- a/src/components/Container/DoiPageOPS.vue
+++ b/src/components/Container/DoiPageOPS.vue
@@ -4,9 +4,9 @@ import Page from '@/components/Container/Page.vue';
 
 export default {
 	name: 'DoiPageOPS',
-	extends: Page,
 	components: {
 		DoiListPanel,
 	},
+	extends: Page,
 };
 </script>
diff --git a/src/components/Container/FailedJobDetailsPage.vue b/src/components/Container/FailedJobDetailsPage.vue
index 5a91eee5f..b985f070e 100644
--- a/src/components/Container/FailedJobDetailsPage.vue
+++ b/src/components/Container/FailedJobDetailsPage.vue
@@ -5,11 +5,11 @@ import TableCell from '@/components/Table/TableCell.vue';
 
 export default {
 	name: 'FailedJobDetailsPage',
-	extends: Page,
 	components: {
 		PkpTable,
 		TableCell,
 	},
+	extends: Page,
 	data() {
 		return {
 			columns: [],
diff --git a/src/components/Container/FailedJobsPage.vue b/src/components/Container/FailedJobsPage.vue
index 597e2a83a..033b9978e 100644
--- a/src/components/Container/FailedJobsPage.vue
+++ b/src/components/Container/FailedJobsPage.vue
@@ -5,11 +5,11 @@ import ButtonRow from '@/components/ButtonRow/ButtonRow.vue';
 
 export default {
 	name: 'FailedJobsPage',
-	extends: JobsPage,
 	components: {
 		TableCell,
 		ButtonRow,
 	},
+	extends: JobsPage,
 	data() {
 		return {
 			apiUrlRedispatchAll: null,
diff --git a/src/components/Container/ImportExportPage.vue b/src/components/Container/ImportExportPage.vue
index 85f9b3681..ad3e5b439 100644
--- a/src/components/Container/ImportExportPage.vue
+++ b/src/components/Container/ImportExportPage.vue
@@ -30,7 +30,7 @@ export default {
 				this.selectedSubmissions = [];
 			} else {
 				this.selectedSubmissions = this.components.submissions.items.map(
-					(s) => s.id
+					(s) => s.id,
 				);
 			}
 		},
diff --git a/src/components/Container/JobsPage.vue b/src/components/Container/JobsPage.vue
index 3cafe00f7..6a7bbb975 100644
--- a/src/components/Container/JobsPage.vue
+++ b/src/components/Container/JobsPage.vue
@@ -6,11 +6,12 @@ import ajaxError from '@/mixins/ajaxError';
 
 export default {
 	name: 'JobsPage',
-	extends: Page,
 	components: {
 		PkpTable,
 		Pagination,
 	},
+	extends: Page,
+	mixins: [ajaxError],
 	data() {
 		return {
 			i18nDescription: '',
@@ -24,7 +25,6 @@ export default {
 			apiUrl: null,
 		};
 	},
-	mixins: [ajaxError],
 	computed: {
 		description() {
 			return this.replaceLocaleParams(this.i18nDescription, {
@@ -32,6 +32,9 @@ export default {
 			});
 		},
 	},
+	created() {
+		this.loadList();
+	},
 	methods: {
 		handlePagination(page) {
 			this.isLoadingItems = true;
@@ -58,8 +61,5 @@ export default {
 			});
 		},
 	},
-	created() {
-		this.loadList();
-	},
 };
 </script>
diff --git a/src/components/Container/ManageCatalogPage.vue b/src/components/Container/ManageCatalogPage.vue
index 515f5f25d..837e0ada3 100644
--- a/src/components/Container/ManageCatalogPage.vue
+++ b/src/components/Container/ManageCatalogPage.vue
@@ -4,9 +4,9 @@ import CatalogListPanel from '@/components/ListPanel/submissions/CatalogListPane
 
 export default {
 	name: 'ManageCatalogPage',
-	extends: Page,
 	components: {
 		CatalogListPanel,
 	},
+	extends: Page,
 };
 </script>
diff --git a/src/components/Container/ManageEmailsPage.vue b/src/components/Container/ManageEmailsPage.vue
index 3e37e4202..52d3bd376 100644
--- a/src/components/Container/ManageEmailsPage.vue
+++ b/src/components/Container/ManageEmailsPage.vue
@@ -7,13 +7,13 @@ import dialog from '../../mixins/dialog';
 
 export default {
 	name: 'ManageEmailsPage',
-	extends: Page,
-	mixins: [dialog],
 	components: {
 		Modal,
 		PkpFilter,
 		Search,
 	},
+	extends: Page,
+	mixins: [dialog],
 	data() {
 		return {
 			activeFilters: {},
@@ -70,6 +70,15 @@ export default {
 			return newMailables;
 		},
 	},
+	watch: {
+		/**
+		 * Update the email template form whenever the current
+		 * email template is changed
+		 */
+		currentTemplate(newVal) {
+			this.setCurrentTemplateForm(newVal);
+		},
+	},
 	methods: {
 		/**
 		 * Add a filter to the active filters list
@@ -452,15 +461,6 @@ export default {
 			};
 		},
 	},
-	watch: {
-		/**
-		 * Update the email template form whenever the current
-		 * email template is changed
-		 */
-		currentTemplate(newVal) {
-			this.setCurrentTemplateForm(newVal);
-		},
-	},
 };
 </script>
 
diff --git a/src/components/Container/Page.vue b/src/components/Container/Page.vue
index 2fe8454fc..505560c92 100644
--- a/src/components/Container/Page.vue
+++ b/src/components/Container/Page.vue
@@ -7,12 +7,12 @@ import PkpAnnouncer from '@/components/Announcer/Announcer.vue';
 import {useDialogStore} from '@/stores/dialogStore.js';
 
 export default {
+	name: 'Page',
 	components: {
 		PkpDialog,
 		PkpAnnouncer,
 	},
 	extends: Container,
-	name: 'Page',
 	data() {
 		return {
 			breadcrumbs: [],
@@ -71,49 +71,6 @@ export default {
 
 		...mapStores(useDialogStore),
 	},
-	methods: {
-		/**
-		 * Dismiss a notification
-		 *
-		 * @param {String} key Notification key
-		 */
-		dismissNotification(key) {
-			this.notifications = this.notifications.filter((n) => {
-				return n.key !== key;
-			});
-		},
-
-		/**
-		 * Handle changes to the #hash in the URL
-		 *
-		 * By default, a page will emit events to open a tab.
-		 * Override this method in other page handlers to
-		 * respond to hash changes in a different way.
-		 */
-		openUrlHash() {
-			let parts = window.location.hash.slice(1).split('/');
-			while (parts.length) {
-				pkp.eventBus.$emit('open-tab', parts.shift());
-			}
-		},
-
-		/**
-		 * Open a modal showing the user's tasks
-		 */
-		openTasks() {
-			var opts = {
-				url: this.tasksUrl,
-				closeCallback: this.$refs.tasksButton.focus(),
-			};
-
-			$(
-				'<div id="' +
-					$.pkp.classes.Helper.uuid() +
-					'" ' +
-					'class="pkp_modal pkpModalWrapper" tabindex="-1"></div>',
-			).pkpHandler('$.pkp.controllers.modal.AjaxModalHandler', opts);
-		},
-	},
 	mounted() {
 		/**
 		 * Fire a callback when the URL #hash is changed
@@ -174,6 +131,49 @@ export default {
 		clearInterval(this.notificationInterval);
 		pkp.eventBus.$off('update:unread-tasks-count');
 	},
+	methods: {
+		/**
+		 * Dismiss a notification
+		 *
+		 * @param {String} key Notification key
+		 */
+		dismissNotification(key) {
+			this.notifications = this.notifications.filter((n) => {
+				return n.key !== key;
+			});
+		},
+
+		/**
+		 * Handle changes to the #hash in the URL
+		 *
+		 * By default, a page will emit events to open a tab.
+		 * Override this method in other page handlers to
+		 * respond to hash changes in a different way.
+		 */
+		openUrlHash() {
+			let parts = window.location.hash.slice(1).split('/');
+			while (parts.length) {
+				pkp.eventBus.$emit('open-tab', parts.shift());
+			}
+		},
+
+		/**
+		 * Open a modal showing the user's tasks
+		 */
+		openTasks() {
+			var opts = {
+				url: this.tasksUrl,
+				closeCallback: this.$refs.tasksButton.focus(),
+			};
+
+			$(
+				'<div id="' +
+					$.pkp.classes.Helper.uuid() +
+					'" ' +
+					'class="pkp_modal pkpModalWrapper" tabindex="-1"></div>',
+			).pkpHandler('$.pkp.controllers.modal.AjaxModalHandler', opts);
+		},
+	},
 };
 </script>
 
diff --git a/src/components/Container/PageOJS.vue b/src/components/Container/PageOJS.vue
index a3d2c2a27..2b034b21e 100644
--- a/src/components/Container/PageOJS.vue
+++ b/src/components/Container/PageOJS.vue
@@ -3,9 +3,9 @@ import Page from '@/components/Container/Page.vue';
 import SubmissionsPage from '@/pages/submissions/SubmissionsPage.vue';
 
 export default {
-	extends: Page,
 	components: {
 		SubmissionsPage,
 	},
+	extends: Page,
 };
 </script>
diff --git a/src/components/Container/SettingsPage.vue b/src/components/Container/SettingsPage.vue
index cecf12ec8..db1a6dff5 100644
--- a/src/components/Container/SettingsPage.vue
+++ b/src/components/Container/SettingsPage.vue
@@ -11,7 +11,6 @@ import DoiRegistrationSettingsForm from '@/components/Form/context/DoiRegistrati
 
 export default {
 	name: 'SettingsPage',
-	extends: Page,
 	components: {
 		AnnouncementsListPanel,
 		HighlightsListPanel,
@@ -22,6 +21,7 @@ export default {
 		DoiSetupSettingsForm,
 		DoiRegistrationSettingsForm,
 	},
+	extends: Page,
 	data() {
 		return {
 			announcementsNavLink: {},
diff --git a/src/components/Container/StartSubmissionPage.vue b/src/components/Container/StartSubmissionPage.vue
index b07cf8eec..616eb9e44 100644
--- a/src/components/Container/StartSubmissionPage.vue
+++ b/src/components/Container/StartSubmissionPage.vue
@@ -3,10 +3,10 @@ import Page from '@/components/Container/Page.vue';
 import StartSubmissionForm from '@/components/Form/submission/StartSubmissionForm.vue';
 
 export default {
-	extends: Page,
 	components: {
 		StartSubmissionForm,
 	},
+	extends: Page,
 	data() {
 		return {
 			form: {},
diff --git a/src/components/Container/StatsEditorialPage.vue b/src/components/Container/StatsEditorialPage.vue
index 604aa4b19..6855e8f50 100644
--- a/src/components/Container/StatsEditorialPage.vue
+++ b/src/components/Container/StatsEditorialPage.vue
@@ -6,11 +6,11 @@ import debounce from 'debounce';
 
 export default {
 	name: 'StatsEditorialPage',
-	extends: StatsPage,
 	components: {
 		DoughnutChart,
 		Tooltip,
 	},
+	extends: StatsPage,
 	data() {
 		return {
 			activeByStage: [],
diff --git a/src/components/Container/StatsPage.vue b/src/components/Container/StatsPage.vue
index 223c9cc90..1e9805bc4 100644
--- a/src/components/Container/StatsPage.vue
+++ b/src/components/Container/StatsPage.vue
@@ -10,8 +10,6 @@ import ajaxError from '@/mixins/ajaxError';
 
 export default {
 	name: 'StatsPage',
-	extends: Page,
-	mixins: [ajaxError],
 	components: {
 		DateRange,
 		PkpFilter,
@@ -20,6 +18,8 @@ export default {
 		PkpTable,
 		TableCell,
 	},
+	extends: Page,
+	mixins: [ajaxError],
 	data() {
 		return {
 			apiUrl: '',
@@ -63,6 +63,50 @@ export default {
 			return classes;
 		},
 	},
+	watch: {
+		activeFilters(newVal, oldVal) {
+			if (newVal === oldVal) {
+				return;
+			}
+			this.offset = 0;
+			this.get();
+		},
+		dateEnd(newVal, oldVal) {
+			if (newVal === oldVal) {
+				return;
+			}
+			this.offset = 0;
+			this.get();
+		},
+		dateStart(newVal, oldVal) {
+			if (newVal === oldVal) {
+				return;
+			}
+			this.offset = 0;
+			this.get();
+		},
+		isSidebarVisible(newVal, oldVal) {
+			if (newVal === oldVal) {
+				return;
+			}
+			this.setSidebarFocus();
+
+			// move focus into the sidebar when it is made visible
+			if (newVal) {
+				this.$nextTick(() => {
+					if (newVal && Object.keys(this.$refs).includes('sidebar')) {
+						this.setFocusIn(this.$refs.sidebar);
+					}
+				});
+			}
+		},
+	},
+	mounted() {
+		/**
+		 * Set the initial tabindex attributes in the sidebar
+		 */
+		this.setSidebarFocus();
+	},
 	methods: {
 		/**
 		 * Check if a filter is currently active
@@ -142,7 +186,7 @@ export default {
 			}
 			let filters = {...this.activeFilters};
 			filters[param] = filters[param].filter(
-				(filterVal) => filterVal !== value
+				(filterVal) => filterVal !== value,
 			);
 			this.activeFilters = filters;
 			this.get();
@@ -163,7 +207,7 @@ export default {
 			// Handle timezone offsets if date goes over Daylight Savings Time
 			// See: https://stackoverflow.com/a/11252167
 			dateStart.setMinutes(
-				dateStart.getMinutes() - dateStart.getTimezoneOffset()
+				dateStart.getMinutes() - dateStart.getTimezoneOffset(),
 			);
 			dateEnd.setMinutes(dateEnd.getMinutes() - dateEnd.getTimezoneOffset());
 
@@ -186,50 +230,6 @@ export default {
 				.forEach((el) => (el.tabIndex = tabIndex));
 		},
 	},
-	watch: {
-		activeFilters(newVal, oldVal) {
-			if (newVal === oldVal) {
-				return;
-			}
-			this.offset = 0;
-			this.get();
-		},
-		dateEnd(newVal, oldVal) {
-			if (newVal === oldVal) {
-				return;
-			}
-			this.offset = 0;
-			this.get();
-		},
-		dateStart(newVal, oldVal) {
-			if (newVal === oldVal) {
-				return;
-			}
-			this.offset = 0;
-			this.get();
-		},
-		isSidebarVisible(newVal, oldVal) {
-			if (newVal === oldVal) {
-				return;
-			}
-			this.setSidebarFocus();
-
-			// move focus into the sidebar when it is made visible
-			if (newVal) {
-				this.$nextTick(() => {
-					if (newVal && Object.keys(this.$refs).includes('sidebar')) {
-						this.setFocusIn(this.$refs.sidebar);
-					}
-				});
-			}
-		},
-	},
-	mounted() {
-		/**
-		 * Set the initial tabindex attributes in the sidebar
-		 */
-		this.setSidebarFocus();
-	},
 };
 </script>
 
@@ -276,8 +276,11 @@ export default {
 	left: 0;
 	width: 25%;
 	opacity: 1;
-	transition: opacity 0.2s ease-in-out 0.2s, left 0s ease-in-out 0.1s,
-		right 0s ease-in-out 0.1s, width 0.2s ease-in-out 0s;
+	transition:
+		opacity 0.2s ease-in-out 0.2s,
+		left 0s ease-in-out 0.1s,
+		right 0s ease-in-out 0.1s,
+		width 0.2s ease-in-out 0s;
 
 	+ .pkpStats__content {
 		width: 75%;
diff --git a/src/components/Container/StatsPublicationsPage.vue b/src/components/Container/StatsPublicationsPage.vue
index e32b59636..eaa304a52 100644
--- a/src/components/Container/StatsPublicationsPage.vue
+++ b/src/components/Container/StatsPublicationsPage.vue
@@ -11,7 +11,6 @@ import debounce from 'debounce';
 
 export default {
 	name: 'StatsPublicationsPage',
-	extends: StatsPage,
 	components: {
 		ActionPanel,
 		LineChart,
@@ -21,6 +20,7 @@ export default {
 		Modal,
 		Tooltip,
 	},
+	extends: StatsPage,
 	data() {
 		return {
 			count: 30,
@@ -506,12 +506,6 @@ export default {
 			this.timelineInterval = timelineInterval;
 		},
 	},
-	mounted() {
-		/**
-		 * Load the items
-		 */
-		this.getItems();
-	},
 	watch: {
 		count(newVal, oldVal) {
 			if (newVal === oldVal) {
@@ -575,6 +569,12 @@ export default {
 			this.getTimeline();
 		},
 	},
+	mounted() {
+		/**
+		 * Load the items
+		 */
+		this.getItems();
+	},
 };
 </script>
 
diff --git a/src/components/Container/StatsUsersPage.vue b/src/components/Container/StatsUsersPage.vue
index 3958439ff..7f8e4aee0 100644
--- a/src/components/Container/StatsUsersPage.vue
+++ b/src/components/Container/StatsUsersPage.vue
@@ -4,10 +4,10 @@ import Modal from '@/components/Modal/Modal.vue';
 
 export default {
 	name: 'StatsUsersPage',
-	extends: StatsPage,
 	components: {
 		Modal,
 	},
+	extends: StatsPage,
 	data() {
 		return {isModalOpenedExport: false};
 	},
diff --git a/src/components/Container/SubmissionWizardPage.vue b/src/components/Container/SubmissionWizardPage.vue
index 0ed50f4a8..d9ca8bdff 100644
--- a/src/components/Container/SubmissionWizardPage.vue
+++ b/src/components/Container/SubmissionWizardPage.vue
@@ -14,6 +14,13 @@ import localStorage from '@/mixins/localStorage';
 import moment from 'moment';
 
 export default {
+	components: {
+		ButtonRow,
+		ContributorsListPanel,
+		File,
+		Modal,
+		SubmissionFilesListPanel,
+	},
 	extends: Page,
 	mixins: [
 		ajaxError,
@@ -23,13 +30,6 @@ export default {
 		localizeSubmission,
 		localStorage,
 	],
-	components: {
-		ButtonRow,
-		ContributorsListPanel,
-		File,
-		Modal,
-		SubmissionFilesListPanel,
-	},
 	data() {
 		return {
 			autosavesKeyBase: 'submitAutosaves',
@@ -158,6 +158,93 @@ export default {
 			return this.i18nPageTitle.replace('{$step}', this.currentStep.name);
 		},
 	},
+	watch: {
+		/**
+		 * Update when the step changes
+		 */
+		currentStepIndex(newVal, oldVal) {
+			if (newVal === oldVal) {
+				return;
+			}
+
+			// Add forms to be autosaved
+			this.addAutosaves();
+
+			// Update the list of steps that have been started
+			this.steps.forEach((step, i) => {
+				if (
+					!this.startedSteps.includes(step.id) &&
+					i <= this.currentStepIndex
+				) {
+					this.startedSteps.push(step.id);
+				}
+			});
+
+			// Track step changes in the title and browser history
+			const step = this.steps[newVal];
+			document.title = this.getPageTitle(step);
+			if (step.id !== window.location.hash.replace('#', '')) {
+				this.addHistory(step);
+			}
+
+			// Trigger validation on the review step
+			if (newVal === this.steps.length - 1) {
+				this.validate();
+			}
+		},
+
+		/**
+		 * Set form data when validation errors are changed
+		 */
+		errors(newVal, oldVal) {
+			const keys = Object.keys(newVal);
+			this.steps.forEach((step, stepIndex) => {
+				step.sections.forEach((section, sectionIndex) => {
+					if (section.type === 'form') {
+						section.form.fields.forEach((field) => {
+							if (keys.includes(field.name)) {
+								this.steps[stepIndex].sections[sectionIndex].form.errors = {
+									...this.steps[stepIndex].sections[sectionIndex].form.errors,
+									...{[field.name]: newVal[field.name]},
+								};
+							}
+						});
+					}
+				});
+			});
+
+			pkp.eventBus.$emit('submission:submit:errors', newVal, this);
+		},
+
+		/**
+		 * Update the last autosave message as soon
+		 * as autosave finishes
+		 */
+		isAutosaving(newVal, oldVal) {
+			if (!newVal && oldVal) {
+				this.setLastAutosaveMessage();
+			}
+		},
+	},
+	created() {
+		/**
+		 * Open the correct step when the page is loaded
+		 */
+		if (!window.location.hash) {
+			const newStep = this.steps.find(
+				(step) => step.id === this.submission.submissionProgress,
+			);
+			this.openStep(newStep ? newStep.id : this.steps[0].id);
+		} else {
+			this.openStep(this.steps[0].id);
+		}
+
+		/**
+		 * Regularly update the last saved message
+		 * so it shows an accurate time
+		 */
+		setInterval(this.setLastAutosaveMessage, 3000);
+	},
 	methods: {
 		/**
 		 * Add stale forms that need to be autosaved
@@ -652,93 +739,6 @@ export default {
 			}, 500);
 		},
 	},
-	watch: {
-		/**
-		 * Update when the step changes
-		 */
-		currentStepIndex(newVal, oldVal) {
-			if (newVal === oldVal) {
-				return;
-			}
-
-			// Add forms to be autosaved
-			this.addAutosaves();
-
-			// Update the list of steps that have been started
-			this.steps.forEach((step, i) => {
-				if (
-					!this.startedSteps.includes(step.id) &&
-					i <= this.currentStepIndex
-				) {
-					this.startedSteps.push(step.id);
-				}
-			});
-
-			// Track step changes in the title and browser history
-			const step = this.steps[newVal];
-			document.title = this.getPageTitle(step);
-			if (step.id !== window.location.hash.replace('#', '')) {
-				this.addHistory(step);
-			}
-
-			// Trigger validation on the review step
-			if (newVal === this.steps.length - 1) {
-				this.validate();
-			}
-		},
-
-		/**
-		 * Set form data when validation errors are changed
-		 */
-		errors(newVal, oldVal) {
-			const keys = Object.keys(newVal);
-			this.steps.forEach((step, stepIndex) => {
-				step.sections.forEach((section, sectionIndex) => {
-					if (section.type === 'form') {
-						section.form.fields.forEach((field) => {
-							if (keys.includes(field.name)) {
-								this.steps[stepIndex].sections[sectionIndex].form.errors = {
-									...this.steps[stepIndex].sections[sectionIndex].form.errors,
-									...{[field.name]: newVal[field.name]},
-								};
-							}
-						});
-					}
-				});
-			});
-
-			pkp.eventBus.$emit('submission:submit:errors', newVal, this);
-		},
-
-		/**
-		 * Update the last autosave message as soon
-		 * as autosave finishes
-		 */
-		isAutosaving(newVal, oldVal) {
-			if (!newVal && oldVal) {
-				this.setLastAutosaveMessage();
-			}
-		},
-	},
-	created() {
-		/**
-		 * Open the correct step when the page is loaded
-		 */
-		if (!window.location.hash) {
-			const newStep = this.steps.find(
-				(step) => step.id === this.submission.submissionProgress,
-			);
-			this.openStep(newStep ? newStep.id : this.steps[0].id);
-		} else {
-			this.openStep(this.steps[0].id);
-		}
-
-		/**
-		 * Regularly update the last saved message
-		 * so it shows an accurate time
-		 */
-		setInterval(this.setLastAutosaveMessage, 3000);
-	},
 };
 </script>
 
diff --git a/src/components/Container/SubmissionWizardPageOMP.vue b/src/components/Container/SubmissionWizardPageOMP.vue
index c25d4ade9..dea987037 100644
--- a/src/components/Container/SubmissionWizardPageOMP.vue
+++ b/src/components/Container/SubmissionWizardPageOMP.vue
@@ -17,19 +17,19 @@ export default {
 			};
 		};
 		pkp.eventBus.$on('chapter:added', (data) =>
-			this.chapters.push(getChapter(data))
+			this.chapters.push(getChapter(data)),
 		);
 		pkp.eventBus.$on('chapter:edited', (data) => {
 			this.chapters = this.chapters.map((chapter) =>
-				chapter.id === data.id ? getChapter(data) : chapter
+				chapter.id === data.id ? getChapter(data) : chapter,
 			);
 		});
 		pkp.eventBus.$on(
 			'chapter:deleted',
 			(data) =>
 				(this.chapters = this.chapters.filter(
-					(chapter) => chapter.id !== data.id
-				))
+					(chapter) => chapter.id !== data.id,
+				)),
 		);
 	},
 };
diff --git a/src/components/Container/SubmissionWizardPageOPS.vue b/src/components/Container/SubmissionWizardPageOPS.vue
index 30a70433d..cc38802da 100644
--- a/src/components/Container/SubmissionWizardPageOPS.vue
+++ b/src/components/Container/SubmissionWizardPageOPS.vue
@@ -8,6 +8,19 @@ export default {
 			galleys: [],
 		};
 	},
+	created() {
+		pkp.eventBus.$on('galley:added', this.addGalley);
+		pkp.eventBus.$on('galley:edited', this.editGalley);
+		pkp.eventBus.$on('galley:deleted', this.deleteGalley);
+		pkp.eventBus.$on('submissionFile:added', this.setSubmissionFile);
+		pkp.eventBus.$on('submissionFile:edited', this.setSubmissionFile);
+	},
+	unmounted() {
+		pkp.eventBus.$off('galley:added');
+		pkp.eventBus.$off('galley:edited');
+		pkp.eventBus.$off('submissionFile:added');
+		pkp.eventBus.$off('submissionFile:edited');
+	},
 	methods: {
 		addGalley(galley) {
 			this.galleys.push(galley);
@@ -30,18 +43,5 @@ export default {
 			});
 		},
 	},
-	created() {
-		pkp.eventBus.$on('galley:added', this.addGalley);
-		pkp.eventBus.$on('galley:edited', this.editGalley);
-		pkp.eventBus.$on('galley:deleted', this.deleteGalley);
-		pkp.eventBus.$on('submissionFile:added', this.setSubmissionFile);
-		pkp.eventBus.$on('submissionFile:edited', this.setSubmissionFile);
-	},
-	unmounted() {
-		pkp.eventBus.$off('galley:added');
-		pkp.eventBus.$off('galley:edited');
-		pkp.eventBus.$off('submissionFile:added');
-		pkp.eventBus.$off('submissionFile:edited');
-	},
 };
 </script>
diff --git a/src/components/Container/WorkflowPage.vue b/src/components/Container/WorkflowPage.vue
index c226664bf..00d8d4ec9 100644
--- a/src/components/Container/WorkflowPage.vue
+++ b/src/components/Container/WorkflowPage.vue
@@ -11,8 +11,6 @@ import dialog from '@/mixins/dialog.js';
 
 export default {
 	name: 'WorkflowPage',
-	extends: Page,
-	mixins: [LocalizeSubmission, dialog, ajaxError],
 	components: {
 		ContributorsListPanel,
 		Composer,
@@ -20,6 +18,8 @@ export default {
 		Modal,
 		PkpHeader,
 	},
+	extends: Page,
+	mixins: [LocalizeSubmission, dialog, ajaxError],
 	data() {
 		return {
 			activityLogLabel: '',
@@ -103,6 +103,79 @@ export default {
 			});
 		},
 	},
+	watch: {
+		workingPublication(newVal, oldVal) {
+			this.setPublicationForms(newVal);
+			this.loadRepresentationsGrid(newVal);
+			if (newVal.id === this.currentPublication.id) {
+				this.currentPublication = {};
+				this.currentPublication = newVal;
+			}
+		},
+	},
+	created() {
+		/**
+		 * Subscribe to publication forms and update the publication
+		 * with the details that have changed
+		 */
+		pkp.eventBus.$on('form-success', (formId, newPublication) => {
+			if (this.publicationFormIds.includes(formId)) {
+				this.workingPublication = {};
+				this.workingPublication = newPublication;
+			}
+
+			// Update the submission's status when the publish form is completed
+			if (formId === pkp.const.FORM_PUBLISH) {
+				this.setPublicationForms(newPublication);
+				this.currentPublication = {};
+				this.currentPublication = newPublication;
+				this.submission.currentPublicationId = newPublication.id;
+				this.refreshSubmission();
+			}
+		});
+
+		/**
+		 * Open the unpublish confirmation modal when a global unpublish
+		 * event is fired
+		 */
+		pkp.eventBus.$on('unpublish:publication', this.openUnpublish);
+
+		/**
+		 * Open the modals to select the revision type when requested
+		 */
+		pkp.eventBus.$on('decision:revisions', (reviewRoundId) => {
+			this.components.selectRevisionDecision.hiddenFields['reviewRoundId'] =
+				reviewRoundId;
+			this.isModalOpenedSelectRevisionDecision = true;
+		});
+		pkp.eventBus.$on('recommendation:revisions', (reviewRoundId) => {
+			this.components.selectRevisionRecommendation.hiddenFields[
+				'reviewRoundId'
+			] = reviewRoundId;
+			this.isModalOpenedSelectRevisionRecommendation = true;
+		});
+
+		/**
+		 * Load forms
+		 */
+		this.setPublicationForms(this.workingPublication);
+	},
+	mounted() {
+		/**
+		 * Load publication grids
+		 *
+		 * Add a delay to allow the workflow requests to be sent first
+		 */
+		setTimeout(() => {
+			this.loadRepresentationsGrid(this.workingPublication);
+		}, 1000);
+	},
+	unmounted() {
+		pkp.eventBus.$off('form-success');
+		pkp.eventBus.$off('unpublish:publication');
+		pkp.eventBus.$off('decision:revisions');
+		pkp.eventBus.$off('recommendation:revisions');
+	},
 	methods: {
 		/**
 		 * Create a new version of the latest publication
@@ -527,79 +600,6 @@ export default {
 			this.workingPublication.authors = [...contributors];
 		},
 	},
-	watch: {
-		workingPublication(newVal, oldVal) {
-			this.setPublicationForms(newVal);
-			this.loadRepresentationsGrid(newVal);
-			if (newVal.id === this.currentPublication.id) {
-				this.currentPublication = {};
-				this.currentPublication = newVal;
-			}
-		},
-	},
-	created() {
-		/**
-		 * Subscribe to publication forms and update the publication
-		 * with the details that have changed
-		 */
-		pkp.eventBus.$on('form-success', (formId, newPublication) => {
-			if (this.publicationFormIds.includes(formId)) {
-				this.workingPublication = {};
-				this.workingPublication = newPublication;
-			}
-
-			// Update the submission's status when the publish form is completed
-			if (formId === pkp.const.FORM_PUBLISH) {
-				this.setPublicationForms(newPublication);
-				this.currentPublication = {};
-				this.currentPublication = newPublication;
-				this.submission.currentPublicationId = newPublication.id;
-				this.refreshSubmission();
-			}
-		});
-
-		/**
-		 * Open the unpublish confirmation modal when a global unpublish
-		 * event is fired
-		 */
-		pkp.eventBus.$on('unpublish:publication', this.openUnpublish);
-
-		/**
-		 * Open the modals to select the revision type when requested
-		 */
-		pkp.eventBus.$on('decision:revisions', (reviewRoundId) => {
-			this.components.selectRevisionDecision.hiddenFields['reviewRoundId'] =
-				reviewRoundId;
-			this.isModalOpenedSelectRevisionDecision = true;
-		});
-		pkp.eventBus.$on('recommendation:revisions', (reviewRoundId) => {
-			this.components.selectRevisionRecommendation.hiddenFields[
-				'reviewRoundId'
-			] = reviewRoundId;
-			this.isModalOpenedSelectRevisionRecommendation = true;
-		});
-
-		/**
-		 * Load forms
-		 */
-		this.setPublicationForms(this.workingPublication);
-	},
-	mounted() {
-		/**
-		 * Load publication grids
-		 *
-		 * Add a delay to allow the workflow requests to be sent first
-		 */
-		setTimeout(() => {
-			this.loadRepresentationsGrid(this.workingPublication);
-		}, 1000);
-	},
-	unmounted() {
-		pkp.eventBus.$off('form-success');
-		pkp.eventBus.$off('unpublish:publication');
-		pkp.eventBus.$off('decision:revisions');
-		pkp.eventBus.$off('recommendation:revisions');
-	},
 };
 </script>
 
diff --git a/src/components/Container/WorkflowPageOJS.vue b/src/components/Container/WorkflowPageOJS.vue
index 0cf0652a6..bcefd398e 100644
--- a/src/components/Container/WorkflowPageOJS.vue
+++ b/src/components/Container/WorkflowPageOJS.vue
@@ -12,31 +12,6 @@ export default {
 			selectIssueLabel: '',
 		};
 	},
-	methods: {
-		/**
-		 * Open a modal to select an issue if the user has opted to
-		 * schedule for publication before assigning to an issue
-		 */
-		openAssignToIssue() {
-			const sourceUrl = this.assignToIssueUrl.replace(
-				'__publicationId__',
-				this.workingPublication.id
-			);
-
-			const opts = {
-				title: this.selectIssueLabel,
-				url: sourceUrl,
-				closeOnFormSuccessId: pkp.const.FORM_ASSIGN_TO_ISSUE,
-			};
-
-			$(
-				'<div id="' +
-					$.pkp.classes.Helper.uuid() +
-					'" ' +
-					'class="pkp_modal pkpModalWrapper" tabIndex="-1"></div>'
-			).pkpHandler('$.pkp.controllers.modal.AjaxModalHandler', opts);
-		},
-	},
 	watch: {
 		workingPublication(newVal, oldVal) {
 			// Update the abstract word count when the section changes
@@ -145,6 +120,31 @@ export default {
 		 */
 		pkp.eventBus.$on('schedule:publication', this.openAssignToIssue);
 	},
+	methods: {
+		/**
+		 * Open a modal to select an issue if the user has opted to
+		 * schedule for publication before assigning to an issue
+		 */
+		openAssignToIssue() {
+			const sourceUrl = this.assignToIssueUrl.replace(
+				'__publicationId__',
+				this.workingPublication.id,
+			);
+
+			const opts = {
+				title: this.selectIssueLabel,
+				url: sourceUrl,
+				closeOnFormSuccessId: pkp.const.FORM_ASSIGN_TO_ISSUE,
+			};
+
+			$(
+				'<div id="' +
+					$.pkp.classes.Helper.uuid() +
+					'" ' +
+					'class="pkp_modal pkpModalWrapper" tabIndex="-1"></div>',
+			).pkpHandler('$.pkp.controllers.modal.AjaxModalHandler', opts);
+		},
+	},
 };
 </script>
 
diff --git a/src/components/Container/WorkflowPageOMP.vue b/src/components/Container/WorkflowPageOMP.vue
index 958c47c53..a7c24da38 100644
--- a/src/components/Container/WorkflowPageOMP.vue
+++ b/src/components/Container/WorkflowPageOMP.vue
@@ -25,6 +25,17 @@ export default {
 			return this.monographLabel;
 		},
 	},
+	watch: {
+		workingPublication(newVal, oldVal) {
+			if (newVal === oldVal) {
+				return;
+			}
+			this.loadChaptersGrid(newVal);
+		},
+	},
+	mounted() {
+		this.loadChaptersGrid(this.workingPublication);
+	},
 	methods: {
 		/**
 		 * Load/reload the chapters grid
@@ -38,7 +49,7 @@ export default {
 			const $chaptersEl = $(this.$refs.chapters);
 			const sourceUrl = this.chaptersGridUrl.replace(
 				'__publicationId__',
-				publication.id
+				publication.id,
 			);
 			if (!$.pkp.classes.Handler.hasHandler($chaptersEl)) {
 				$chaptersEl.pkpHandler('$.pkp.controllers.UrlInDivHandler', {
@@ -96,17 +107,6 @@ export default {
 			});
 		},
 	},
-	watch: {
-		workingPublication(newVal, oldVal) {
-			if (newVal === oldVal) {
-				return;
-			}
-			this.loadChaptersGrid(newVal);
-		},
-	},
-	mounted() {
-		this.loadChaptersGrid(this.workingPublication);
-	},
 };
 </script>
 
diff --git a/src/components/Container/WorkflowPageOPS.vue b/src/components/Container/WorkflowPageOPS.vue
index 752fb2ba9..ca2cb8089 100644
--- a/src/components/Container/WorkflowPageOPS.vue
+++ b/src/components/Container/WorkflowPageOPS.vue
@@ -9,26 +9,6 @@ export default {
 			sectionWordLimits: {},
 		};
 	},
-	methods: {
-		/**
-		 * Update the relation form to match a particular publication
-		 *
-		 * @param Object publication
-		 */
-		setRelationForm(publication) {
-			let form = {...this.components[pkp.const.FORM_ID_RELATION]};
-			form.action =
-				this.submissionApiUrl + '/publications/' + publication.id + '/relate';
-			form.fields = form.fields.map((field) => {
-				if (Object.keys(publication).includes(field.name)) {
-					field.value = publication[field.name];
-				}
-				return field;
-			});
-			this.components[pkp.const.FORM_ID_RELATION] = {};
-			this.components[pkp.const.FORM_ID_RELATION] = form;
-		},
-	},
 	watch: {
 		workingPublication(newVal, oldVal) {
 			// Update the abstract word count when the section changes
@@ -53,6 +33,26 @@ export default {
 			this.setRelationForm(newVal);
 		},
 	},
+	methods: {
+		/**
+		 * Update the relation form to match a particular publication
+		 *
+		 * @param Object publication
+		 */
+		setRelationForm(publication) {
+			let form = {...this.components[pkp.const.FORM_ID_RELATION]};
+			form.action =
+				this.submissionApiUrl + '/publications/' + publication.id + '/relate';
+			form.fields = form.fields.map((field) => {
+				if (Object.keys(publication).includes(field.name)) {
+					field.value = publication[field.name];
+				}
+				return field;
+			});
+			this.components[pkp.const.FORM_ID_RELATION] = {};
+			this.components[pkp.const.FORM_ID_RELATION] = form;
+		},
+	},
 };
 </script>
 
diff --git a/src/components/DateRange/DateRange.vue b/src/components/DateRange/DateRange.vue
index a4bac5e01..d7e38f7c0 100644
--- a/src/components/DateRange/DateRange.vue
+++ b/src/components/DateRange/DateRange.vue
@@ -3,8 +3,8 @@
 		<span class="-screenReader">{{ dateRangeLabel }}</span>
 		<span class="pkpDateRange__current" v-html="currentRange" />
 		<button
-			class="pkpDateRange__button"
 			ref="toggleButton"
+			class="pkpDateRange__button"
 			@click="toggle"
 			@blur="closeOnBlur"
 		>
@@ -13,7 +13,7 @@
 				{{ changeDateRangeLabel }}
 			</span>
 		</button>
-		<div v-if="options && this.isOpen" class="pkpDateRange__options">
+		<div v-if="options && isOpen" class="pkpDateRange__options">
 			<div class="pkpDateRange__optionGroup">
 				<div v-for="option in options" :key="option.value">
 					<button
@@ -31,15 +31,15 @@
 			>
 				<fieldset class="pkpDateRange__inputGroup">
 					<legend>{{ customRangeLabel }}</legend>
-					<div class="-screenReader" :id="uniqueId + '-describedBy'">
+					<div :id="uniqueId + '-describedBy'" class="-screenReader">
 						{{ dateFormatInstructionsLabel }}
 					</div>
 					<label>
 						<span class="-screenReader">{{ fromDateLabel }}</span>
 						<input
-							class="pkpDateRange__input pkpDateRange__input--start"
 							ref="dateStart"
 							v-model="localDateStart"
+							class="pkpDateRange__input pkpDateRange__input--start"
 							placeholder="YYYY-MM-DD"
 							:aria-describedby="uniqueId + '-describedBy'"
 							:aria-invalid="!!errorMessage"
@@ -50,9 +50,9 @@
 					<label>
 						<span class="-screenReader">{{ toDateLabel }}</span>
 						<input
-							class="pkpDateRange__input pkpDateRange__input--end"
 							ref="dateEnd"
 							v-model="localDateEnd"
+							class="pkpDateRange__input pkpDateRange__input--end"
 							placeholder="YYYY-MM-DD"
 							:aria-describedby="uniqueId + '-describedBy'"
 							:aria-invalid="!!errorMessage"
@@ -184,6 +184,17 @@ export default {
 			return this.dateStart + ' — ' + this.dateEnd;
 		},
 	},
+	watch: {
+		currentRange(newVal, oldVal) {
+			if (newVal !== oldVal) {
+				this.$emit('updated:current-range', newVal);
+			}
+		},
+	},
+	mounted() {
+		this.localDateStart = this.dateStart;
+		this.localDateEnd = this.dateEnd;
+	},
 	methods: {
 		/**
 		 * Open and close the range selection popup
@@ -257,7 +268,7 @@ export default {
 			if (!this.validateDateStartMin(this.localDateStart)) {
 				this.errorMessage = this.replaceLocaleParams(
 					this.invalidStartDateMinLabel,
-					{date: this.dateStartMin}
+					{date: this.dateStartMin},
 				);
 				return;
 			}
@@ -265,7 +276,7 @@ export default {
 			if (!this.validateDateEndMax(this.localDateEnd)) {
 				this.errorMessage = this.replaceLocaleParams(
 					this.invalidEndDateMaxLabel,
-					{date: this.dateEndMax}
+					{date: this.dateEndMax},
 				);
 				return;
 			}
@@ -370,17 +381,6 @@ export default {
 			return true;
 		},
 	},
-	mounted() {
-		this.localDateStart = this.dateStart;
-		this.localDateEnd = this.dateEnd;
-	},
-	watch: {
-		currentRange(newVal, oldVal) {
-			if (newVal !== oldVal) {
-				this.$emit('updated:current-range', newVal);
-			}
-		},
-	},
 };
 </script>
 
diff --git a/src/components/Dropdown/Dropdown.vue b/src/components/Dropdown/Dropdown.vue
index e40f4e0d3..10a80330a 100644
--- a/src/components/Dropdown/Dropdown.vue
+++ b/src/components/Dropdown/Dropdown.vue
@@ -2,10 +2,10 @@
 	<div class="pkpDropdown">
 		<pkp-button
 			ref="button"
-			:isActive="isActive"
-			:isLink="isLink"
-			:isPrimary="isPrimary"
-			:isWarnable="isWarnable"
+			:is-active="isActive"
+			:is-link="isLink"
+			:is-primary="isPrimary"
+			:is-warnable="isWarnable"
 			:aria-describedby="ariaDescribedBy"
 			:aria-controls="id"
 			:aria-expanded="isOpen"
@@ -19,8 +19,8 @@
 		</pkp-button>
 		<div
 			v-if="isOpen"
-			class="pkpDropdown__content"
 			:id="id"
+			class="pkpDropdown__content"
 			@click="preserveFocus"
 		>
 			<slot />
diff --git a/src/components/Expander/Expander.vue b/src/components/Expander/Expander.vue
index 960738128..a1fcdf096 100644
--- a/src/components/Expander/Expander.vue
+++ b/src/components/Expander/Expander.vue
@@ -1,5 +1,5 @@
 <template>
-	<button @click="$emit('toggle')" class="expander">
+	<button class="expander" @click="$emit('toggle')">
 		<icon v-if="isExpanded" icon="angle-up" />
 		<icon v-else icon="angle-down" />
 		<span v-if="isExpanded" class="-screenReader">
diff --git a/src/components/FileAttacher/FileAttacher.vue b/src/components/FileAttacher/FileAttacher.vue
index c6411bf0e..7fd67e779 100644
--- a/src/components/FileAttacher/FileAttacher.vue
+++ b/src/components/FileAttacher/FileAttacher.vue
@@ -2,8 +2,8 @@
 	<div class="fileAttacher">
 		<action-panel
 			v-for="(attacher, key) in attachers"
-			:key="key"
 			:id="'attacher' + key"
+			:key="key"
 		>
 			<h2>{{ attacher.label }}</h2>
 			<p v-html="attacher.description" />
@@ -17,15 +17,15 @@
 			</template>
 		</action-panel>
 		<modal
-			:closeLabel="t('common.close')"
+			:close-label="t('common.close')"
 			name="attacher"
 			:title="currentAttacher ? currentAttacher.label : ''"
 			:open="isModalOpenedAttacher"
 			@close="isModalOpenedAttacher = false"
 		>
 			<component
-				v-if="currentAttacher"
 				:is="currentAttacher.component"
+				v-if="currentAttacher"
 				v-bind="currentAttacher"
 				@selected:files="attachFiles"
 				@cancel="cancel"
diff --git a/src/components/FileAttacher/FileAttacherFileStage.vue b/src/components/FileAttacher/FileAttacherFileStage.vue
index a78bd2ae1..feb31234d 100644
--- a/src/components/FileAttacher/FileAttacherFileStage.vue
+++ b/src/components/FileAttacher/FileAttacherFileStage.vue
@@ -1,6 +1,6 @@
 <template>
 	<div class="fileAttacherFileStage" aria-live="polite">
-		<list-panel :items="files" :isLoading="isLoading">
+		<list-panel :items="files" :is-loading="isLoading">
 			<template #header>
 				<pkp-header>
 					<h2>{{ currentFileStage.label }}</h2>
@@ -28,15 +28,17 @@
 			</template>
 			<template #item="{item}">
 				<select-submission-file-list-item
-					:documentType="item.documentType"
-					:downloadLabel="downloadLabel"
-					:genreName="localize(item.genreName)"
-					:genreIsPrimary="!item.genreIsDependent && !item.genreIsSupplementary"
-					:fileId="item.id"
+					:document-type="item.documentType"
+					:download-label="downloadLabel"
+					:genre-name="localize(item.genreName)"
+					:genre-is-primary="
+						!item.genreIsDependent && !item.genreIsSupplementary
+					"
+					:file-id="item.id"
 					:name="localize(item.name)"
 					:url="item.url"
 				>
-					<input type="checkbox" :value="item.id" v-model="selected" />
+					<input v-model="selected" type="checkbox" :value="item.id" />
 				</select-submission-file-list-item>
 			</template>
 		</list-panel>
@@ -48,7 +50,7 @@
 				</pkp-button>
 			</template>
 			<pkp-button
-				:isDisabled="!selected.length"
+				:is-disabled="!selected.length"
 				@click="$emit('selected:files', selectedFiles)"
 			>
 				{{ attachSelectedLabel }}
@@ -67,7 +69,6 @@ import ajaxError from '@/mixins/ajaxError';
 
 export default {
 	name: 'FileAttacherFileStage',
-	mixins: [ajaxError],
 	components: {
 		ButtonRow,
 		Dropdown,
@@ -75,6 +76,7 @@ export default {
 		PkpHeader,
 		SelectSubmissionFileListItem,
 	},
+	mixins: [ajaxError],
 	props: {
 		attachSelectedLabel: {
 			type: String,
@@ -114,6 +116,17 @@ export default {
 			return this.files.filter((item) => this.selected.includes(item.id));
 		},
 	},
+	watch: {
+		/**
+		 * Update the files when a new file stage is selected
+		 */
+		currentFileStage(newVal, oldVal) {
+			this.getFiles();
+		},
+	},
+	created() {
+		this.currentFileStage = this.fileStages[0];
+	},
 	methods: {
 		getFiles() {
 			this.isLoading = true;
@@ -133,17 +146,6 @@ export default {
 			});
 		},
 	},
-	watch: {
-		/**
-		 * Update the files when a new file stage is selected
-		 */
-		currentFileStage(newVal, oldVal) {
-			this.getFiles();
-		},
-	},
-	created() {
-		this.currentFileStage = this.fileStages[0];
-	},
 };
 </script>
 
diff --git a/src/components/FileAttacher/FileAttacherLibrary.vue b/src/components/FileAttacher/FileAttacherLibrary.vue
index 783853f4b..29bc63eee 100644
--- a/src/components/FileAttacher/FileAttacherLibrary.vue
+++ b/src/components/FileAttacher/FileAttacherLibrary.vue
@@ -13,14 +13,14 @@
 			<select-submission-file-list-item
 				v-for="(file, i) in files"
 				:key="i"
-				:documentType="file.documentType"
-				:downloadLabel="downloadLabel"
-				:genreName="file.typeName"
-				:fileId="file.id"
+				:document-type="file.documentType"
+				:download-label="downloadLabel"
+				:genre-name="file.typeName"
+				:file-id="file.id"
 				:name="localize(file.name)"
 				:url="file.url"
 			>
-				<input type="checkbox" :value="file.id" v-model="selected" />
+				<input v-model="selected" type="checkbox" :value="file.id" />
 			</select-submission-file-list-item>
 		</div>
 		<button-row class="fileAttacher__footer">
@@ -31,7 +31,7 @@
 				</pkp-button>
 			</template>
 			<pkp-button
-				:isDisabled="!selected.length"
+				:is-disabled="!selected.length"
 				@click="$emit('selected:files', selectedFiles)"
 			>
 				{{ attachSelectedLabel }}
@@ -47,11 +47,11 @@ import ajaxError from '@/mixins/ajaxError';
 
 export default {
 	name: 'FileAttacherLibrary',
-	mixins: [ajaxError],
 	components: {
 		ButtonRow,
 		SelectSubmissionFileListItem,
 	},
+	mixins: [ajaxError],
 	props: {
 		attachSelectedLabel: {
 			type: String,
@@ -92,6 +92,9 @@ export default {
 			return this.files.filter((file) => this.selected.includes(file.id));
 		},
 	},
+	created() {
+		this.getFiles();
+	},
 	methods: {
 		getFiles() {
 			this.isLoading = true;
@@ -113,9 +116,6 @@ export default {
 			});
 		},
 	},
-	created() {
-		this.getFiles();
-	},
 };
 </script>
 
diff --git a/src/components/FileAttacher/FileAttacherReviewFiles.vue b/src/components/FileAttacher/FileAttacherReviewFiles.vue
index a8f88cba6..26f86078f 100644
--- a/src/components/FileAttacher/FileAttacherReviewFiles.vue
+++ b/src/components/FileAttacher/FileAttacherReviewFiles.vue
@@ -7,14 +7,14 @@
 			<select-submission-file-list-item
 				v-for="(file, i) in files"
 				:key="i"
-				:documentType="file.documentType"
-				:downloadLabel="downloadLabel"
-				:genreName="file.typeName"
-				:fileId="file.id"
+				:document-type="file.documentType"
+				:download-label="downloadLabel"
+				:genre-name="file.typeName"
+				:file-id="file.id"
 				:name="file.reviewerName + ' — ' + localize(file.name)"
 				:url="file.url"
 			>
-				<input type="checkbox" :value="file.id" v-model="selected" />
+				<input v-model="selected" type="checkbox" :value="file.id" />
 			</select-submission-file-list-item>
 		</template>
 		<button-row class="fileAttacher__footer">
@@ -25,7 +25,7 @@
 				</pkp-button>
 			</template>
 			<pkp-button
-				:isDisabled="!selected.length"
+				:is-disabled="!selected.length"
 				@click="$emit('selected:files', selectedFiles)"
 			>
 				{{ attachSelectedLabel }}
diff --git a/src/components/FileAttacher/FileAttacherUpload.vue b/src/components/FileAttacher/FileAttacherUpload.vue
index bb9c6bc04..8117ce420 100644
--- a/src/components/FileAttacher/FileAttacherUpload.vue
+++ b/src/components/FileAttacher/FileAttacherUpload.vue
@@ -14,7 +14,7 @@
 					<template v-if="'progress' in file">
 						<file-upload-progress
 							:key="i"
-							cancelUploadLabel="Cancel Upload"
+							cancel-upload-label="Cancel Upload"
 							:errors="file.errors"
 							:name="file.name"
 							:progress="file.progress"
@@ -25,12 +25,12 @@
 						<file
 							:id="'FileAttacherUpload__UploadedFile__' + i"
 							:name="file.form ? file.form.name : file.name"
-							:documentType="file.documentType || 'default'"
+							:document-type="file.documentType || 'default'"
 						/>
 						<pkp-button
 							:aria-describedby="'FileAttacherUpload__UploadedFile__' + i"
 							class="fileAttacherUploader__uploadedFile__remove"
-							:isWarnable="true"
+							:is-warnable="true"
 							@click="removeFile(i)"
 						>
 							<span class="aria-hidden">{{ t('common.remove') }}</span>
@@ -47,12 +47,12 @@
 				</template>
 			</div>
 			<file-uploader
+				id="previewFileUploader"
 				ref="uploader"
-				:apiUrl="temporaryFilesApiUrl"
+				:api-url="temporaryFilesApiUrl"
 				:files="files"
-				id="previewFileUploader"
 				:options="dropzoneOptions"
-				uploadProgressLabel="Uploading {$percent}% complete"
+				upload-progress-label="Uploading {$percent}% complete"
 				@updated:files="updateFiles"
 			/>
 		</div>
@@ -67,8 +67,8 @@
 				{{ addFilesLabel }}
 			</pkp-button>
 			<pkp-button
-				:isPrimary="true"
-				:isDisabled="!files.length || isUploading"
+				:is-primary="true"
+				:is-disabled="!files.length || isUploading"
 				@click="$emit('selected:files', files)"
 			>
 				{{ attachFilesLabel }}
diff --git a/src/components/FileUploadProgress/FileUploadProgress.vue b/src/components/FileUploadProgress/FileUploadProgress.vue
index f46cfdcbc..738873c1e 100644
--- a/src/components/FileUploadProgress/FileUploadProgress.vue
+++ b/src/components/FileUploadProgress/FileUploadProgress.vue
@@ -1,7 +1,7 @@
 <template>
 	<div class="fileUploadProgress">
 		<div class="fileUploadProgress__row">
-			<div class="fileUploadProgress__name" :id="uuid">
+			<div :id="uuid" class="fileUploadProgress__name">
 				{{ name }}
 			</div>
 			<div class="fileUploadProgress__actions">
diff --git a/src/components/FileUploader/FileUploader.vue b/src/components/FileUploader/FileUploader.vue
index 42e09ca62..0814e4810 100644
--- a/src/components/FileUploader/FileUploader.vue
+++ b/src/components/FileUploader/FileUploader.vue
@@ -1,8 +1,8 @@
 <template>
-	<div class="fileUploader" :class="{'-isDragging': isDragging}" :id="id">
+	<div :id="id" class="fileUploader" :class="{'-isDragging': isDragging}">
 		<vue-dropzone
-			ref="dropzone"
 			:id="dropzoneId"
+			ref="dropzone"
 			:options="dropzoneOptions"
 			@vdropzone-error="dropzoneError"
 			@vdropzone-files-added="dropzoneFilesAdded"
@@ -112,6 +112,24 @@ export default {
 			};
 		},
 	},
+	mounted() {
+		/**
+		 * Listen for when the user performs a drag-and-drop action
+		 */
+		document.addEventListener('dragenter', this.dragenter, true);
+		document.addEventListener('dragleave', this.dragleave, true);
+		document.addEventListener('dragover', this.drop, true);
+		document.addEventListener('drop', this.drop);
+	},
+	unmounted() {
+		/**
+		 * Clean up listeners
+		 */
+		document.removeEventListener('dragenter', this.dragenter, true);
+		document.removeEventListener('dragleave', this.dragleave, true);
+		document.removeEventListener('dragover', this.drop, true);
+		document.removeEventListener('drop', this.drop);
+	},
 	methods: {
 		/**
 		 * Cancel an upload in progress
@@ -314,24 +332,6 @@ export default {
 			this.$refs.dropzone.dropzone.hiddenFileInput.click();
 		},
 	},
-	mounted() {
-		/**
-		 * Listen for when the user performs a drag-and-drop action
-		 */
-		document.addEventListener('dragenter', this.dragenter, true);
-		document.addEventListener('dragleave', this.dragleave, true);
-		document.addEventListener('dragover', this.drop, true);
-		document.addEventListener('drop', this.drop);
-	},
-	unmounted() {
-		/**
-		 * Clean up listeners
-		 */
-		document.removeEventListener('dragenter', this.dragenter, true);
-		document.removeEventListener('dragleave', this.dragleave, true);
-		document.removeEventListener('dragover', this.drop, true);
-		document.removeEventListener('drop', this.drop);
-	},
 };
 </script>
 
diff --git a/src/components/Filter/Filter.vue b/src/components/Filter/Filter.vue
index c01d476f5..5e4f8cba4 100644
--- a/src/components/Filter/Filter.vue
+++ b/src/components/Filter/Filter.vue
@@ -1,9 +1,9 @@
 <template>
 	<div :class="classes">
 		<button
-			@click.prevent.stop="toggle(param, value)"
 			class="pkpFilter__label"
 			:class="{'-isActive': isFilterActive}"
+			@click.prevent.stop="toggle(param, value)"
 		>
 			{{ title }}
 		</button>
diff --git a/src/components/Filter/FilterAutosuggest.vue b/src/components/Filter/FilterAutosuggest.vue
index 9bca0d32d..181b21677 100644
--- a/src/components/Filter/FilterAutosuggest.vue
+++ b/src/components/Filter/FilterAutosuggest.vue
@@ -10,12 +10,12 @@ import FieldAutosuggestPreset from '@/components/Form/fields/FieldAutosuggestPre
 import FieldSelectUsers from '@/components/Form/fields/FieldSelectUsers.vue';
 import FieldSelectIssues from '@/components/Form/fields/FieldSelectIssues.vue';
 export default {
-	extends: Filter,
 	components: {
 		FieldAutosuggestPreset,
 		FieldSelectUsers,
 		FieldSelectIssues,
 	},
+	extends: Filter,
 	props: {
 		component: {
 			type: String,
@@ -41,15 +41,6 @@ export default {
 			};
 		},
 	},
-	methods: {
-		changeSelection(fieldName, fieldProp, newVal, localeKey) {
-			if (fieldProp === 'value') {
-				this.currentValue = newVal;
-			} else if (fieldProp === 'selected') {
-				this.currentSelected = newVal;
-			}
-		},
-	},
 	watch: {
 		currentValue(newVal, oldVal) {
 			if (newVal.length) {
@@ -59,6 +50,15 @@ export default {
 			}
 		},
 	},
+	methods: {
+		changeSelection(fieldName, fieldProp, newVal, localeKey) {
+			if (fieldProp === 'value') {
+				this.currentValue = newVal;
+			} else if (fieldProp === 'selected') {
+				this.currentSelected = newVal;
+			}
+		},
+	},
 };
 </script>
 
diff --git a/src/components/Filter/FilterSlider.vue b/src/components/Filter/FilterSlider.vue
index 4ecc6a5a6..edc868199 100644
--- a/src/components/Filter/FilterSlider.vue
+++ b/src/components/Filter/FilterSlider.vue
@@ -18,16 +18,16 @@
 		<div class="pkpFilter__input pkpFilter__input--slider">
 			<label class="-screenReader" for="slider">{{ title }}</label>
 			<input
+				id="slider"
+				v-model.number="currentValue"
 				type="range"
 				:max="max"
 				:min="min"
 				:disabled="!isFilterActive"
-				id="slider"
-				v-model.number="currentValue"
 			/>
 			<output
-				ref="output"
 				v-if="isFilterActive"
+				ref="output"
 				for="slider"
 				class="pkpFilter__value"
 				:style="valueStyles"
@@ -58,10 +58,10 @@ import Icon from '@/components/Icon/Icon.vue';
 import debounce from 'debounce';
 
 export default {
-	extends: Filter,
 	components: {
 		Icon,
 	},
+	extends: Filter,
 	props: {
 		max: {
 			type: Number,
diff --git a/src/components/Filter/FilterSliderMultirange.vue b/src/components/Filter/FilterSliderMultirange.vue
index 620290f28..cf52f1479 100644
--- a/src/components/Filter/FilterSliderMultirange.vue
+++ b/src/components/Filter/FilterSliderMultirange.vue
@@ -29,12 +29,12 @@
 					{{ moreThanLabel }}
 				</label>
 				<input
+					id="sliderMore"
+					v-model.number="currentValue[0]"
 					type="range"
 					:max="moreThanMax"
 					:min="min"
 					:disabled="!isFilterActive"
-					id="sliderMore"
-					v-model.number="currentValue[0]"
 				/>
 			</div>
 			<div class="pkpFilter__multirangeInput">
@@ -42,12 +42,12 @@
 					{{ lessThanLabel }}
 				</label>
 				<input
+					id="sliderLess"
+					v-model.number="currentValue[1]"
 					type="range"
 					:max="max"
 					:min="lessThanMin"
 					:disabled="!isFilterActive"
-					id="sliderLess"
-					v-model.number="currentValue[1]"
 				/>
 			</div>
 		</fieldset>
diff --git a/src/components/Form/Form.vue b/src/components/Form/Form.vue
index dbcfd5cc5..b3fd63046 100644
--- a/src/components/Form/Form.vue
+++ b/src/components/Form/Form.vue
@@ -9,7 +9,7 @@
 		/>
 		<form-locales
 			v-if="availableLocales.length > 1"
-			:primaryLocaleKey="primaryLocale"
+			:primary-locale-key="primaryLocale"
 			:locales="availableLocales"
 			:visible="visibleLocales"
 			@updateLocales="setVisibleLocales"
@@ -44,15 +44,15 @@
 				:groups="groups"
 				:fields="fields"
 				:errors="errors"
-				:formId="id"
-				:canSubmit="canSubmit"
-				:isCurrentPage="currentPage === page.id"
-				:isLastPage="index === pages.length - 1"
-				:lastSaveTimestamp="lastSaveTimestamp"
-				:primaryLocale="primaryLocale"
-				:visibleLocales="visibleLocales"
-				:availableLocales="availableLocales"
-				:isSaving="isSaving"
+				:form-id="id"
+				:can-submit="canSubmit"
+				:is-current-page="currentPage === page.id"
+				:is-last-page="index === pages.length - 1"
+				:last-save-timestamp="lastSaveTimestamp"
+				:primary-locale="primaryLocale"
+				:visible-locales="visibleLocales"
+				:available-locales="availableLocales"
+				:is-saving="isSaving"
 				@change="fieldChanged"
 				@pageSubmitted="nextPage"
 				@previousPage="setCurrentPage(false)"
@@ -234,6 +234,12 @@ export default {
 			};
 		},
 	},
+	mounted() {
+		// Set the current page
+		if (!this.currentPage) {
+			this.currentPage = this.pages[0].id;
+		}
+	},
 	methods: {
 		/**
 		 * Move to the next page or submit form if we're at the last page
@@ -554,12 +560,6 @@ export default {
 			this.$emit('set', this.id, {errors: errors});
 		},
 	},
-	mounted() {
-		// Set the current page
-		if (!this.currentPage) {
-			this.currentPage = this.pages[0].id;
-		}
-	},
 };
 </script>
 
diff --git a/src/components/Form/FormGroup.vue b/src/components/Form/FormGroup.vue
index a4f9233a0..5528f30e8 100644
--- a/src/components/Form/FormGroup.vue
+++ b/src/components/Form/FormGroup.vue
@@ -11,24 +11,24 @@
 		<div class="pkpFormGroup__fields">
 			<template v-for="field in fieldsInGroup">
 				<template v-if="field.isMultilingual">
-					<div class="pkpFormGroup__localeGroup -pkpClearfix" :key="field.name">
+					<div :key="field.name" class="pkpFormGroup__localeGroup -pkpClearfix">
 						<div
 							v-for="locale in availableLocales"
 							:key="locale.key"
 							class="pkpFormGroup__locale"
 							:class="{
 								'pkpFormGroup__locale--isVisible': visibleLocales.includes(
-									locale.key
+									locale.key,
 								),
 							}"
 						>
 							<component
 								:is="field.component"
 								v-bind="field"
-								:allErrors="errors"
-								:localeKey="locale.key"
-								:formId="formId"
-								:primaryLocale="primaryLocale"
+								:all-errors="errors"
+								:locale-key="locale.key"
+								:form-id="formId"
+								:primary-locale="primaryLocale"
 								:locales="availableLocales"
 								@change="fieldChanged"
 								@set-errors="setFieldErrors"
@@ -41,8 +41,8 @@
 						:is="field.component"
 						v-bind="field"
 						:key="field.name"
-						:allErrors="errors"
-						:formId="formId"
+						:all-errors="errors"
+						:form-id="formId"
 						@change="fieldChanged"
 						@set-errors="setFieldErrors"
 					></component>
@@ -125,7 +125,7 @@ export default {
 		 */
 		fieldsInGroup() {
 			return this.fields.filter(
-				(field) => field.groupId === this.id && this.shouldShowField(field)
+				(field) => field.groupId === this.id && this.shouldShowField(field),
 			);
 		},
 
@@ -164,7 +164,7 @@ export default {
 			const whenFieldName =
 				typeof field.showWhen === 'string' ? field.showWhen : field.showWhen[0];
 			const whenField = this.fields.find(
-				(field) => field.name === whenFieldName
+				(field) => field.name === whenFieldName,
 			);
 			if (!whenField) {
 				return false;
diff --git a/src/components/Form/FormLocales.vue b/src/components/Form/FormLocales.vue
index 9bc6a5e06..82640939b 100644
--- a/src/components/Form/FormLocales.vue
+++ b/src/components/Form/FormLocales.vue
@@ -2,9 +2,9 @@
 	<div v-if="locales.length" class="pkpFormLocales">
 		<button
 			v-for="locale in additionalLocales"
+			:key="locale.key"
 			class="pkpFormLocales__locale"
 			type="button"
-			:key="locale.key"
 			:label="locale.label"
 			:class="{
 				'pkpFormLocales__locale--isActive': visible.includes(locale.key),
@@ -14,7 +14,7 @@
 			{{ locale.label }}
 		</button>
 		<span class="pkpFormLocales__locale pkpFormLocales__locale--isPrimary">
-			{{ this.primaryLocale.label }}
+			{{ primaryLocale.label }}
 		</span>
 	</div>
 </template>
@@ -44,7 +44,7 @@ export default {
 		 */
 		primaryLocale() {
 			return this.locales.find(
-				(locale) => locale.key === this.primaryLocaleKey
+				(locale) => locale.key === this.primaryLocaleKey,
 			);
 		},
 
@@ -55,7 +55,7 @@ export default {
 		 */
 		additionalLocales() {
 			return this.locales.filter(
-				(locale) => locale.key !== this.primaryLocaleKey
+				(locale) => locale.key !== this.primaryLocaleKey,
 			);
 		},
 	},
diff --git a/src/components/Form/FormPage.vue b/src/components/Form/FormPage.vue
index f2242053d..66dd656b8 100644
--- a/src/components/Form/FormPage.vue
+++ b/src/components/Form/FormPage.vue
@@ -6,17 +6,17 @@
 			v-bind="group"
 			:fields="fields"
 			:errors="errors"
-			:primaryLocale="primaryLocale"
-			:visibleLocales="visibleLocales"
-			:availableLocales="availableLocales"
-			:formId="formId"
+			:primary-locale="primaryLocale"
+			:visible-locales="visibleLocales"
+			:available-locales="availableLocales"
+			:form-id="formId"
 			@change="fieldChanged"
 			@set-errors="setErrors"
 		/>
 		<button-row
 			v-if="hasFooter"
-			class="pkpFormPage__footer"
 			ref="footer"
+			class="pkpFormPage__footer"
 			aria-live="polite"
 		>
 			<form-errors
@@ -71,12 +71,6 @@ export default {
 		FormErrors,
 		FormGroup,
 	},
-	data() {
-		return {
-			hasRecentSave: false,
-			recentSaveInterval: null,
-		};
-	},
 	props: {
 		id: String,
 		groups: Array,
@@ -99,6 +93,12 @@ export default {
 		},
 		isSaving: Boolean,
 	},
+	data() {
+		return {
+			hasRecentSave: false,
+			recentSaveInterval: null,
+		};
+	},
 	computed: {
 		/**
 		 * All groups assigned to this page
@@ -124,6 +124,22 @@ export default {
 			);
 		},
 	},
+	mounted() {
+		/**
+		 * Set an interval timer to check if there is a recent save
+		 */
+		this.recentSaveInterval = setInterval(() => {
+			const expire = this.lastSaveTimestamp + 5000;
+			if (this.hasRecentSave && expire < Date.now()) {
+				this.hasRecentSave = false;
+			} else if (!this.hasRecentSave && expire > Date.now()) {
+				this.hasRecentSave = true;
+			}
+		}, 250);
+	},
+	unmounted() {
+		clearInterval(this.recentSaveInterval);
+	},
 	methods: {
 		/**
 		 * Emit an event when a field's prop has changed
@@ -203,22 +219,6 @@ export default {
 			this.$emit('set-errors', errors);
 		},
 	},
-	mounted() {
-		/**
-		 * Set an interval timer to check if there is a recent save
-		 */
-		this.recentSaveInterval = setInterval(() => {
-			const expire = this.lastSaveTimestamp + 5000;
-			if (this.hasRecentSave && expire < Date.now()) {
-				this.hasRecentSave = false;
-			} else if (!this.hasRecentSave && expire > Date.now()) {
-				this.hasRecentSave = true;
-			}
-		}, 250);
-	},
-	unmounted() {
-		clearInterval(this.recentSaveInterval);
-	},
 };
 </script>
 
diff --git a/src/components/Form/context/AddContextForm.vue b/src/components/Form/context/AddContextForm.vue
index ea0dca70b..c6f2136ed 100644
--- a/src/components/Form/context/AddContextForm.vue
+++ b/src/components/Form/context/AddContextForm.vue
@@ -10,18 +10,6 @@ export default {
 			required: true,
 		},
 	},
-	methods: {
-		/**
-		 * Redirect to the admin's context settings wizard when successful
-		 */
-		success: function (r) {
-			pkp.eventBus.$emit('form-success', this.id, r);
-
-			if (r.id) {
-				window.location.href = this.editContextUrl.replace('__id__', r.id);
-			}
-		},
-	},
 	watch: {
 		submitValues(newVal, oldVal) {
 			// When the primaryLocale is not included in the supportedLocales,
@@ -34,5 +22,17 @@ export default {
 			}
 		},
 	},
+	methods: {
+		/**
+		 * Redirect to the admin's context settings wizard when successful
+		 */
+		success: function (r) {
+			pkp.eventBus.$emit('form-success', this.id, r);
+
+			if (r.id) {
+				window.location.href = this.editContextUrl.replace('__id__', r.id);
+			}
+		},
+	},
 };
 </script>
diff --git a/src/components/Form/context/DateTimeForm.vue b/src/components/Form/context/DateTimeForm.vue
index 0d8d4ca83..1ed63f559 100644
--- a/src/components/Form/context/DateTimeForm.vue
+++ b/src/components/Form/context/DateTimeForm.vue
@@ -43,6 +43,22 @@ export default {
 			]),
 		};
 	},
+	mounted() {
+		this.$nextTick(function () {
+			let dateTime = moment();
+			this.fields.forEach((field) => {
+				this.availableLocales.forEach((locale) => {
+					dateTime.locale(this.getMomentLocale(locale.key));
+					field.options[locale.key].forEach((option) => {
+						const formatString = this.convertDateFormat(option.label);
+						if (formatString) {
+							option.label = dateTime.format(formatString);
+						}
+					});
+				});
+			});
+		});
+	},
 	methods: {
 		/**
 		 * Update label and value of the dateTimeFormatShort and
@@ -67,7 +83,7 @@ export default {
 
 			if (
 				!['dateFormatShort', 'dateFormatLong', 'timeFormat'].find(
-					(fieldName) => fieldName === name
+					(fieldName) => fieldName === name,
 				)
 			) {
 				this.$emit('set', this.id, {fields: newFields});
@@ -75,10 +91,10 @@ export default {
 			}
 
 			const shortDate = this.fields.find(
-				(field) => field.name === 'dateFormatShort'
+				(field) => field.name === 'dateFormatShort',
 			);
 			const longDate = this.fields.find(
-				(field) => field.name === 'dateFormatLong'
+				(field) => field.name === 'dateFormatLong',
 			);
 			const time = this.fields.find((field) => field.name === 'timeFormat');
 
@@ -104,13 +120,13 @@ export default {
 
 			// Determine labels for the short and long date & time fields
 			const shortDateOption = shortDate.options[localeKey].find(
-				(option) => option.value === shortDate.value[localeKey]
+				(option) => option.value === shortDate.value[localeKey],
 			);
 			const longDateOption = longDate.options[localeKey].find(
-				(option) => option.value === longDate.value[localeKey]
+				(option) => option.value === longDate.value[localeKey],
 			);
 			const timeOption = time.options[localeKey].find(
-				(option) => option.value === time.value[localeKey]
+				(option) => option.value === time.value[localeKey],
 			);
 
 			// If there isn't label for the date or time in case of custom input, use latter as a label
@@ -129,7 +145,7 @@ export default {
 				name,
 				localeKey,
 				{value: shortDateTimeValue, label: shortDateTimeLabel},
-				{value: longDateTimeValue, label: longDateTimeLabel}
+				{value: longDateTimeValue, label: longDateTimeLabel},
 			);
 
 			this.$emit('set', this.id, {fields: newFields});
@@ -150,7 +166,7 @@ export default {
 			name,
 			localeKey,
 			shortDateTime,
-			longDateTime
+			longDateTime,
 		) {
 			return newFields.map((field) => {
 				if (
@@ -232,21 +248,5 @@ export default {
 			return convertedLabel;
 		},
 	},
-	mounted() {
-		this.$nextTick(function () {
-			let dateTime = moment();
-			this.fields.forEach((field) => {
-				this.availableLocales.forEach((locale) => {
-					dateTime.locale(this.getMomentLocale(locale.key));
-					field.options[locale.key].forEach((option) => {
-						const formatString = this.convertDateFormat(option.label);
-						if (formatString) {
-							option.label = dateTime.format(formatString);
-						}
-					});
-				});
-			});
-		});
-	},
 };
 </script>
diff --git a/src/components/Form/fields/FieldArchivingPn.vue b/src/components/Form/fields/FieldArchivingPn.vue
index 021704016..e8713d622 100644
--- a/src/components/Form/fields/FieldArchivingPn.vue
+++ b/src/components/Form/fields/FieldArchivingPn.vue
@@ -18,8 +18,8 @@
 			<tooltip v-if="tooltip" aria-hidden="true" :tooltip="tooltip" label="" />
 			<span
 				v-if="tooltip"
-				class="-screenReader"
 				:id="describedByTooltipId"
+				class="-screenReader"
 				v-html="tooltip"
 			/>
 			<help-button
@@ -32,9 +32,9 @@
 		</legend>
 		<div
 			v-if="description"
+			:id="describedByDescriptionId"
 			class="pkpFormField__description pkpFormField--options__description"
 			v-html="description"
-			:id="describedByDescriptionId"
 		/>
 		<div
 			v-if="terms && value"
@@ -46,7 +46,7 @@
 			:id="describedByErrorId"
 			:messages="errors"
 		/>
-		<input type="hidden" v-model="selectedValue" />
+		<input v-model="selectedValue" type="hidden" />
 		<div class="pkpFormField__control">
 			<label
 				v-for="option in localizedOptions"
@@ -54,8 +54,8 @@
 				class="pkpFormField--options__option"
 			>
 				<input
-					class="pkpFormField--options__input"
 					v-model="selectedValue"
+					class="pkpFormField--options__input"
 					:value="option.value"
 					type="checkbox"
 					:name="name"
@@ -111,6 +111,52 @@ export default {
 			isSaving: false,
 		};
 	},
+	watch: {
+		/**
+		 * When the input value changes, update the selected value if the input
+		 * option is the currently selected option
+		 */
+		value: function (newVal, oldVal) {
+			if (newVal === oldVal) {
+				return;
+			}
+			if (newVal) {
+				this.addSettingsListener();
+			} else {
+				this.removeSettingsListener();
+			}
+
+			this.isSaving = true;
+
+			$.ajax({
+				method: 'POST',
+				url: newVal ? this.enablePluginUrl : this.disablePluginUrl,
+				data: {
+					csrfToken: pkp.currentUser.csrfToken,
+					disableNotification: false,
+				},
+				success: this.success,
+				error: this.error,
+				complete: this.complete,
+			});
+		},
+	},
+	mounted() {
+		/**
+		 * Add the event listener to show the settings modal
+		 */
+		if (this.value) {
+			this.addSettingsListener();
+		}
+	},
+	beforeUnmount() {
+		/**
+		 * Remove the event listener for the settings button
+		 */
+		if (!this.value) {
+			$('.pkpFormField--archivingPn__terms button', this.$el).off();
+		}
+	},
 	methods: {
 		/**
 		 * Add an event listener to show the settings modal when the button in the
@@ -186,52 +232,6 @@ export default {
 			this.isSaving = false;
 		},
 	},
-	watch: {
-		/**
-		 * When the input value changes, update the selected value if the input
-		 * option is the currently selected option
-		 */
-		value: function (newVal, oldVal) {
-			if (newVal === oldVal) {
-				return;
-			}
-			if (newVal) {
-				this.addSettingsListener();
-			} else {
-				this.removeSettingsListener();
-			}
-
-			this.isSaving = true;
-
-			$.ajax({
-				method: 'POST',
-				url: newVal ? this.enablePluginUrl : this.disablePluginUrl,
-				data: {
-					csrfToken: pkp.currentUser.csrfToken,
-					disableNotification: false,
-				},
-				success: this.success,
-				error: this.error,
-				complete: this.complete,
-			});
-		},
-	},
-	mounted() {
-		/**
-		 * Add the event listener to show the settings modal
-		 */
-		if (this.value) {
-			this.addSettingsListener();
-		}
-	},
-	beforeUnmount() {
-		/**
-		 * Remove the event listener for the settings button
-		 */
-		if (!this.value) {
-			$('.pkpFormField--archivingPn__terms button', this.$el).off();
-		}
-	},
 };
 </script>
 
diff --git a/src/components/Form/fields/FieldAutosuggestPreset.vue b/src/components/Form/fields/FieldAutosuggestPreset.vue
index 1e750af15..e85d21415 100644
--- a/src/components/Form/fields/FieldAutosuggestPreset.vue
+++ b/src/components/Form/fields/FieldAutosuggestPreset.vue
@@ -10,6 +10,27 @@ export default {
 			required: true,
 		},
 	},
+	watch: {
+		/**
+		 * Update the selected property when the value
+		 * is changed outside of the field.
+		 */
+		value(newVal, oldVal) {
+			if (!newVal || newVal === oldVal) {
+				return;
+			}
+			// Check for duplicate object and array values
+			if (JSON.stringify(newVal) === JSON.stringify(oldVal)) {
+				return;
+			}
+			const localizedNewValue = this.isMultilingual
+				? newVal[this.localeKey]
+				: newVal;
+			this.setSelected(
+				this.options.filter((s) => localizedNewValue.includes(s.value)),
+			);
+		},
+	},
 	methods: {
 		/**
 		 * Get suggestions from the preset options
@@ -24,7 +45,7 @@ export default {
 			// See: https://stackoverflow.com/a/3561711/1723499
 			const regex = new RegExp(
 				this.inputValue.replace(/[-/\\^$*+?.()|[\]{}]/g, '\\$&'),
-				'gi'
+				'gi',
 			);
 			this.suggestions = this.options.filter((option) => {
 				if (this.currentValue.includes(option.value)) {
@@ -38,26 +59,5 @@ export default {
 			});
 		},
 	},
-	watch: {
-		/**
-		 * Update the selected property when the value
-		 * is changed outside of the field.
-		 */
-		value(newVal, oldVal) {
-			if (!newVal || newVal === oldVal) {
-				return;
-			}
-			// Check for duplicate object and array values
-			if (JSON.stringify(newVal) === JSON.stringify(oldVal)) {
-				return;
-			}
-			const localizedNewValue = this.isMultilingual
-				? newVal[this.localeKey]
-				: newVal;
-			this.setSelected(
-				this.options.filter((s) => localizedNewValue.includes(s.value))
-			);
-		},
-	},
 };
 </script>
diff --git a/src/components/Form/fields/FieldBaseAutosuggest.vue b/src/components/Form/fields/FieldBaseAutosuggest.vue
index e7ac0d3e3..9f0241f44 100644
--- a/src/components/Form/fields/FieldBaseAutosuggest.vue
+++ b/src/components/Form/fields/FieldBaseAutosuggest.vue
@@ -7,20 +7,20 @@
 			'pkpAutosuggest--rtl': isRTL,
 		}"
 	>
-		<div class="pkpFormField__heading" ref="heading">
+		<div ref="heading" class="pkpFormField__heading">
 			<form-field-label
-				:controlId="controlId"
+				:control-id="controlId"
 				:label="label"
-				:localeLabel="localeLabel"
-				:isRequired="isRequired"
-				:requiredLabel="t('common.required')"
-				:multilingualLabel="multilingualLabel"
+				:locale-label="localeLabel"
+				:is-required="isRequired"
+				:required-label="t('common.required')"
+				:multilingual-label="multilingualLabel"
 			/>
 			<tooltip v-if="tooltip" aria-hidden="true" :tooltip="tooltip" label="" />
 			<span
 				v-if="tooltip"
-				class="-screenReader"
 				:id="describedByTooltipId"
+				class="-screenReader"
 				v-html="tooltip"
 			/>
 			<help-button
@@ -33,20 +33,20 @@
 		</div>
 		<div
 			v-if="isPrimaryLocale && description"
+			:id="describedByDescriptionId"
 			class="pkpFormField__description"
 			v-html="description"
-			:id="describedByDescriptionId"
 		/>
 		<div class="pkpFormField__control pkpAutosuggest__control">
 			<div
+				:id="describedBySelectedId"
+				ref="values"
 				class="pkpAutosuggest__inputWrapper pkpFormField__input"
 				:class="{
 					'pkpAutosuggest__inputWrapper--multilingual':
 						isMultilingual && locales.length > 1,
 					'pkpAutosuggest__inputWrapper--focus': isFocused,
 				}"
-				ref="values"
-				:id="describedBySelectedId"
 				@click="setFocusToInput"
 			>
 				<span class="-screenReader">{{ selectedLabel }}</span>
@@ -54,8 +54,8 @@
 					{{ t('common.none') }}
 				</span>
 				<pkp-badge
-					v-else
 					v-for="item in currentSelected"
+					v-else
 					:key="item.value"
 					class="pkpAutosuggest__selection"
 				>
@@ -75,10 +75,10 @@
 					v-if="!isDisabled"
 					:id="autosuggestId"
 					:key="autosuggestId"
-					:modelValue="null"
-					@update:modelValue="selectSuggestion"
+					:model-value="null"
 					class="pkpAutosuggest__autosuggester"
 					as="div"
+					@update:modelValue="selectSuggestion"
 				>
 					<ComboboxInput
 						ref="autosuggestInput"
@@ -98,8 +98,8 @@
 								inputValue?.length &&
 								!suggestions.includes(inputValue)
 							"
-							as="template"
 							v-slot="{active}"
+							as="template"
 						>
 							<li
 								class="autosuggest__results-item"
@@ -111,8 +111,8 @@
 						<ComboboxOption
 							v-for="suggestion in suggestions"
 							:key="suggestion.value"
-							:value="suggestion"
 							v-slot="{active}"
+							:value="suggestion"
 							as="template"
 						>
 							<li
@@ -154,8 +154,6 @@ import debounce from 'debounce';
 
 export default {
 	name: 'FieldBaseAutosuggest',
-	extends: FieldBase,
-	mixins: [ajaxError],
 	components: {
 		PkpBadge,
 		Combobox,
@@ -163,6 +161,8 @@ export default {
 		ComboboxOption,
 		ComboboxOptions,
 	},
+	extends: FieldBase,
+	mixins: [ajaxError],
 	props: {
 		apiUrl: {
 			type: String,
diff --git a/src/components/Form/fields/FieldColor.vue b/src/components/Form/fields/FieldColor.vue
index 1d14dfe77..7ec0b83f3 100644
--- a/src/components/Form/fields/FieldColor.vue
+++ b/src/components/Form/fields/FieldColor.vue
@@ -20,8 +20,8 @@
 			/>
 			<span
 				v-if="isPrimaryLocale && tooltip"
-				class="-screenReader"
 				:id="describedByTooltipId"
+				class="-screenReader"
 				v-html="tooltip"
 			/>
 			<help-button
@@ -34,15 +34,15 @@
 		</legend>
 		<div
 			v-if="isPrimaryLocale && description"
+			:id="describedByDescriptionId"
 			class="pkpFormField__description"
 			v-html="description"
-			:id="describedByDescriptionId"
 		/>
 		<div class="pkpFormField__control">
 			<color-picker
 				:value="currentValue"
+				:disable-alpha="true"
 				@input="setValue"
-				:disableAlpha="true"
 			/>
 			<field-error
 				v-if="errors && errors.length"
@@ -59,10 +59,10 @@ import {Chrome} from '@lk77/vue3-color';
 
 export default {
 	name: 'FieldColor',
-	extends: FieldBase,
 	components: {
 		'color-picker': Chrome,
 	},
+	extends: FieldBase,
 	methods: {
 		/**
 		 * Update the current value when the color picker changes
diff --git a/src/components/Form/fields/FieldMetadataSetting.vue b/src/components/Form/fields/FieldMetadataSetting.vue
index 6bd748894..1ba1dd348 100644
--- a/src/components/Form/fields/FieldMetadataSetting.vue
+++ b/src/components/Form/fields/FieldMetadataSetting.vue
@@ -5,8 +5,8 @@
 			<tooltip v-if="tooltip" aria-hidden="true" :tooltip="tooltip" label="" />
 			<span
 				v-if="tooltip"
-				class="-screenReader"
 				:id="describedByTooltipId"
+				class="-screenReader"
 				v-html="tooltip"
 			/>
 			<help-button
@@ -19,9 +19,9 @@
 		</legend>
 		<div
 			v-if="description"
+			:id="describedByDescriptionId"
 			class="pkpFormField__description pkpFormField--options__description"
 			v-html="description"
-			:id="describedByDescriptionId"
 		/>
 		<field-error
 			v-if="errors && errors.length"
@@ -35,9 +35,9 @@
 				class="pkpFormField--options__option"
 			>
 				<input
+					v-model="isEnabled"
 					class="pkpFormField--options__input"
 					type="checkbox"
-					v-model="isEnabled"
 					:value="option.value"
 					:aria-describedby="describedByIds"
 					:aria-invalid="errors && errors.length"
@@ -55,8 +55,8 @@
 					class="pkpFormField--options__option"
 				>
 					<input
-						class="pkpFormField--options__input pkpFormField--metadata__submissionInput"
 						v-model="selectedValue"
+						class="pkpFormField--options__input pkpFormField--metadata__submissionInput"
 						type="radio"
 						:value="option.value"
 						:aria-invalid="errors && errors.length"
diff --git a/src/components/Form/fields/FieldOptions.vue b/src/components/Form/fields/FieldOptions.vue
index 353883bea..8ff72d30c 100644
--- a/src/components/Form/fields/FieldOptions.vue
+++ b/src/components/Form/fields/FieldOptions.vue
@@ -20,8 +20,8 @@
 			/>
 			<span
 				v-if="isPrimaryLocale && tooltip"
-				class="-screenReader"
 				:id="describedByTooltipId"
+				class="-screenReader"
 				v-html="tooltip"
 			/>
 			<help-button
@@ -34,16 +34,16 @@
 		</legend>
 		<div
 			v-if="isPrimaryLocale && description"
+			:id="describedByDescriptionId"
 			class="pkpFormField__description pkpFormField--options__description"
 			v-html="description"
-			:id="describedByDescriptionId"
 		/>
 		<div class="pkpFormField__control">
 			<VueDraggable
 				ref="el"
 				v-model="localizedOptions"
-				@end="updateValueOrder"
 				:disabled="!isOrderable"
+				@end="updateValueOrder"
 			>
 				<label
 					v-for="option in localizedOptions"
@@ -58,8 +58,8 @@
 					-->
 					<input
 						v-if="type === 'checkbox'"
-						class="pkpFormField--options__input"
 						v-model="selectedValue"
+						class="pkpFormField--options__input"
 						:value="option.value"
 						type="checkbox"
 						:name="localizedName"
@@ -69,8 +69,8 @@
 					/>
 					<input
 						v-else
-						class="pkpFormField--options__input"
 						v-model="selectedValue"
+						class="pkpFormField--options__input"
 						:value="option.value"
 						type="radio"
 						:name="localizedName"
@@ -84,10 +84,10 @@
 					/>
 					<orderer
 						v-if="isOrderable"
+						:item-id="option.value"
+						:item-title="option.label"
 						@up="optionOrderUp"
 						@down="optionOrderDown"
-						:itemId="option.value"
-						:itemTitle="option.label"
 					/>
 				</label>
 			</VueDraggable>
@@ -113,11 +113,11 @@ import Orderer from '@/components/Orderer/Orderer.vue';
 
 export default {
 	name: 'FieldOptions',
-	extends: FieldBase,
 	components: {
 		VueDraggable,
 		Orderer,
 	},
+	extends: FieldBase,
 	props: {
 		type: {
 			validator: function (value) {
@@ -173,6 +173,44 @@ export default {
 			return classes;
 		},
 	},
+	watch: {
+		/**
+		 * Sync the selectedValue to the value if it is changed programatically
+		 */
+		value(newVal, oldVal) {
+			if (JSON.stringify(newVal) === JSON.stringify(oldVal)) {
+				return;
+			}
+			this.selectedValue = this.isMultilingual
+				? this.value[this.localeKey]
+				: this.value;
+		},
+
+		/**
+		 * Whenever the selected value changes, emit an event to update the value of
+		 * this field in the form component.
+		 */
+		selectedValue: function (newVal, oldVal) {
+			if (JSON.stringify(newVal) === JSON.stringify(oldVal)) {
+				return;
+			}
+			if (this.isOrderable) {
+				newVal = this.localizedOptions
+					.filter((option) => newVal.includes(option.value))
+					.map((option) => option.value);
+			}
+			this.$emit('change', this.name, 'value', newVal, this.localeKey);
+		},
+
+		/**
+		 * Whenever the options change, override the localized options with them
+		 */
+		options: function (newVal) {
+			this.localizedOptions = this.isMultilingual
+				? newVal[this.localeKey]
+				: newVal;
+		},
+	},
 	methods: {
 		/**
 		 * Move an option up in the list
@@ -223,44 +261,6 @@ export default {
 				.map((option) => option.value);
 		},
 	},
-	watch: {
-		/**
-		 * Sync the selectedValue to the value if it is changed programatically
-		 */
-		value(newVal, oldVal) {
-			if (JSON.stringify(newVal) === JSON.stringify(oldVal)) {
-				return;
-			}
-			this.selectedValue = this.isMultilingual
-				? this.value[this.localeKey]
-				: this.value;
-		},
-
-		/**
-		 * Whenever the selected value changes, emit an event to update the value of
-		 * this field in the form component.
-		 */
-		selectedValue: function (newVal, oldVal) {
-			if (JSON.stringify(newVal) === JSON.stringify(oldVal)) {
-				return;
-			}
-			if (this.isOrderable) {
-				newVal = this.localizedOptions
-					.filter((option) => newVal.includes(option.value))
-					.map((option) => option.value);
-			}
-			this.$emit('change', this.name, 'value', newVal, this.localeKey);
-		},
-
-		/**
-		 * Whenever the options change, override the localized options with them
-		 */
-		options: function (newVal) {
-			this.localizedOptions = this.isMultilingual
-				? newVal[this.localeKey]
-				: newVal;
-		},
-	},
 };
 </script>
 
diff --git a/src/components/Form/fields/FieldPreparedContent.vue b/src/components/Form/fields/FieldPreparedContent.vue
index 522aa2e48..48239ff4e 100644
--- a/src/components/Form/fields/FieldPreparedContent.vue
+++ b/src/components/Form/fields/FieldPreparedContent.vue
@@ -9,18 +9,18 @@
 		<template #footer>
 			<slot name="footer" />
 			<modal
-				:closeLabel="t('common.close')"
+				:close-label="t('common.close')"
 				:name="preparedContentId"
 				:title="insertModalLabel"
 				:open="isModalPreparedContentOpened"
 				@close="isModalPreparedContentOpened = false"
 			>
 				<insert-content
-					:insertLabel="insertLabel"
-					:items="preparedContent"
-					:itemsLabel="preparedContentLabel"
-					:searchLabel="searchLabel"
 					ref="insertContent"
+					:insert-label="insertLabel"
+					:items="preparedContent"
+					:items-label="preparedContentLabel"
+					:search-label="searchLabel"
 					@insert="insert"
 				/>
 			</modal>
@@ -36,13 +36,13 @@ import preparedContent from '../../../mixins/preparedContent';
 
 export default {
 	name: 'FieldPreparedContent',
-	extends: FieldRichTextarea,
-	mixins: [preparedContent],
 	components: {
 		FieldRichTextarea,
 		InsertContent,
 		Modal,
 	},
+	extends: FieldRichTextarea,
+	mixins: [preparedContent],
 	props: {
 		/** @see InsertContent.props.insertLabel */
 		insertLabel: {
diff --git a/src/components/Form/fields/FieldPubId.vue b/src/components/Form/fields/FieldPubId.vue
index 75377c72a..23917910f 100644
--- a/src/components/Form/fields/FieldPubId.vue
+++ b/src/components/Form/fields/FieldPubId.vue
@@ -2,16 +2,16 @@
 	<div class="pkpFormField pkpFormField--pubid">
 		<div class="pkpFormField__heading">
 			<form-field-label
-				:controlId="controlId"
+				:control-id="controlId"
 				:label="label"
-				:isRequired="isRequired"
-				:requiredLabel="t('common.required')"
+				:is-required="isRequired"
+				:required-label="t('common.required')"
 			/>
 			<tooltip v-if="tooltip" aria-hidden="true" :tooltip="tooltip" label="" />
 			<span
 				v-if="tooltip"
-				class="-screenReader"
 				:id="describedByTooltipId"
+				class="-screenReader"
 				v-html="tooltip"
 			/>
 			<help-button
@@ -24,16 +24,16 @@
 		</div>
 		<div
 			v-if="description"
+			:id="describedByDescriptionId"
 			class="pkpFormField__description"
 			v-html="description"
-			:id="describedByDescriptionId"
 		/>
 		<div class="pkpFormField__control">
 			<input
-				class="pkpFormField__input pkpFormField--text__input pkpFormField--pubid__input"
+				:id="controlId"
 				ref="input"
 				v-model="currentValue"
-				:id="controlId"
+				class="pkpFormField__input pkpFormField--text__input pkpFormField--pubid__input"
 				:name="localizedName"
 				:aria-describedby="describedByIds"
 				:aria-invalid="errors && errors.length"
@@ -50,15 +50,15 @@
 			<pkp-button
 				v-else-if="pattern && currentValue"
 				class="pkpFormField--pubid__button"
-				:isWarnable="true"
+				:is-warnable="true"
 				@click="() => (currentValue = '')"
 			>
 				{{ clearIdLabel }}
 			</pkp-button>
 			<div
 				v-if="pattern && !canGenerateId && !currentValue"
-				class="pkpFormField--pubid__warning"
 				:id="describedByDescriptionId"
+				class="pkpFormField--pubid__warning"
 			>
 				<icon icon="exclamation-triangle" :inline="true" />
 				{{ missingPartsLabel }}
diff --git a/src/components/Form/fields/FieldRadioInput.vue b/src/components/Form/fields/FieldRadioInput.vue
index af186943a..405ffa643 100644
--- a/src/components/Form/fields/FieldRadioInput.vue
+++ b/src/components/Form/fields/FieldRadioInput.vue
@@ -20,8 +20,8 @@
 			/>
 			<span
 				v-if="isPrimaryLocale && tooltip"
-				class="-screenReader"
 				:id="describedByTooltipId"
+				class="-screenReader"
 				v-html="tooltip"
 			/>
 			<help-button
@@ -34,16 +34,16 @@
 		</legend>
 		<div
 			v-if="isPrimaryLocale && description"
+			:id="describedByDescriptionId"
 			class="pkpFormField__description pkpFormField--options__description"
 			v-html="description"
-			:id="describedByDescriptionId"
 		/>
 		<field-error
 			v-if="errors && errors.length"
 			:id="describedByErrorId"
 			:messages="errors"
 		/>
-		<input type="hidden" v-model="selectedValue" />
+		<input v-model="selectedValue" type="hidden" />
 		<div class="pkpFormField__control">
 			<label
 				v-for="option in localizedOptions"
@@ -52,8 +52,8 @@
 			>
 				<template v-if="!option.isInput">
 					<input
-						class="pkpFormField--options__input"
 						v-model="selectedValue"
+						class="pkpFormField--options__input"
 						:value="option.value"
 						type="radio"
 						:name="localizedName"
@@ -65,9 +65,9 @@
 				</template>
 				<template v-else>
 					<input
+						ref="inputRadio"
 						class="pkpFormField--options__input"
 						type="radio"
-						ref="inputRadio"
 						:name="localizedName"
 						:aria-describedby="describedByIds"
 						:aria-invalid="errors && errors.length"
@@ -76,10 +76,10 @@
 					/>
 					<span v-if="option.label">{{ option.label }}</span>
 					<input
+						ref="inputText"
+						v-model="inputValue"
 						class="pkpFormField__input pkpFormField--options__input--text"
 						type="text"
-						v-model="inputValue"
-						ref="inputText"
 						:aria-describedby="describedByIds"
 						:aria-invalid="errors && errors.length"
 						:disabled="option.disabled"
@@ -127,23 +127,6 @@ export default {
 				.includes(this.selectedValue);
 		},
 	},
-	methods: {
-		/**
-		 * Select the option with an input field
-		 */
-		selectInput() {
-			this.selectedValue = this.inputValue;
-			this.$refs.inputRadio[0].checked = true;
-			this.$refs.inputText[0].focus();
-		},
-
-		/**
-		 * Set the seletected value to the input field's vale
-		 */
-		setInputToSelected() {
-			this.selectedValue = this.inputValue;
-		},
-	},
 	watch: {
 		/**
 		 * When the input value changes, update the selected value if the input
@@ -170,6 +153,23 @@ export default {
 			}
 		}
 	},
+	methods: {
+		/**
+		 * Select the option with an input field
+		 */
+		selectInput() {
+			this.selectedValue = this.inputValue;
+			this.$refs.inputRadio[0].checked = true;
+			this.$refs.inputText[0].focus();
+		},
+
+		/**
+		 * Set the seletected value to the input field's vale
+		 */
+		setInputToSelected() {
+			this.selectedValue = this.inputValue;
+		},
+	},
 };
 </script>
 
diff --git a/src/components/Form/fields/FieldRichText.vue b/src/components/Form/fields/FieldRichText.vue
index 227cf4e66..e795ff5e4 100644
--- a/src/components/Form/fields/FieldRichText.vue
+++ b/src/components/Form/fields/FieldRichText.vue
@@ -113,7 +113,7 @@ export default {
 			const toolbarButton = this.$el.querySelector('.tox-tbtn[aria-owns]');
 			if (toolbarButton) {
 				const toolbarPopup = document.getElementById(
-					toolbarButton.getAttribute('aria-owns')
+					toolbarButton.getAttribute('aria-owns'),
 				);
 				if (toolbarPopup) {
 					const focusEl = document.activeElement;
diff --git a/src/components/Form/fields/FieldRichTextarea.vue b/src/components/Form/fields/FieldRichTextarea.vue
index 53e4987b4..9f5b7ddac 100644
--- a/src/components/Form/fields/FieldRichTextarea.vue
+++ b/src/components/Form/fields/FieldRichTextarea.vue
@@ -5,12 +5,12 @@
 	>
 		<div class="pkpFormField__heading">
 			<form-field-label
-				:controlId="controlId"
+				:control-id="controlId"
 				:label="label"
-				:localeLabel="localeLabel"
-				:isRequired="isRequired"
-				:requiredLabel="t('common.required')"
-				:multilingualLabel="multilingualLabel"
+				:locale-label="localeLabel"
+				:is-required="isRequired"
+				:required-label="t('common.required')"
+				:multilingual-label="multilingualLabel"
 			/>
 			<tooltip
 				v-if="isPrimaryLocale && tooltip"
@@ -20,8 +20,8 @@
 			/>
 			<span
 				v-if="isPrimaryLocale && tooltip"
-				class="-screenReader"
 				:id="describedByTooltipId"
+				class="-screenReader"
 				v-html="tooltip"
 			/>
 			<help-button
@@ -34,19 +34,19 @@
 		</div>
 		<div
 			v-if="isPrimaryLocale && description"
+			:id="describedByDescriptionId"
 			class="pkpFormField__description"
 			v-html="description"
-			:id="describedByDescriptionId"
 		/>
 		<div
 			class="pkpFormField__control pkpFormField--richTextarea__control"
-			:class="'pkpFormField--richTextArea__control--' + this.size"
+			:class="'pkpFormField--richTextArea__control--' + size"
 		>
 			<editor
-				class="pkpFormField__input pkpFormField--richTextarea__input"
-				v-model="currentValue"
-				ref="editor"
 				:id="controlId"
+				ref="editor"
+				v-model="currentValue"
+				class="pkpFormField__input pkpFormField--richTextarea__input"
 				:toolbar="toolbar"
 				:plugins="plugins"
 				:init="compiledInit"
@@ -104,10 +104,10 @@ import debounce from 'debounce';
 
 export default {
 	name: 'FieldRichTextarea',
-	extends: FieldBase,
 	components: {
 		Editor,
 	},
+	extends: FieldBase,
 	props: {
 		// @see https://www.tiny.cloud/docs/configure/integration-and-setup/
 		init: {
@@ -251,6 +251,21 @@ export default {
 			return $.pkp.app.rtlLocales.includes(this.localeKey);
 		},
 	},
+	watch: {
+		value(newVal, oldVal) {
+			if (newVal === oldVal) {
+				return;
+			}
+			if (this.isMultilingual) {
+				newVal = newVal[this.localeKey];
+			}
+			debounce(this.setWordCount, 250)();
+			this.$emit('change', this.name, 'value', newVal, this.localeKey);
+		},
+	},
+	mounted() {
+		debounce(this.setWordCount, 1000)();
+	},
 	methods: {
 		/**
 		 * When the input control loses focus
@@ -285,21 +300,6 @@ export default {
 			this.wordCount = 0;
 		},
 	},
-	watch: {
-		value(newVal, oldVal) {
-			if (newVal === oldVal) {
-				return;
-			}
-			if (this.isMultilingual) {
-				newVal = newVal[this.localeKey];
-			}
-			debounce(this.setWordCount, 250)();
-			this.$emit('change', this.name, 'value', newVal, this.localeKey);
-		},
-	},
-	mounted() {
-		debounce(this.setWordCount, 1000)();
-	},
 };
 </script>
 
diff --git a/src/components/Form/fields/FieldSelect.vue b/src/components/Form/fields/FieldSelect.vue
index 291558fae..cec4ad49f 100644
--- a/src/components/Form/fields/FieldSelect.vue
+++ b/src/components/Form/fields/FieldSelect.vue
@@ -2,18 +2,18 @@
 	<div class="pkpFormField pkpFormField--select">
 		<div class="pkpFormField__heading">
 			<form-field-label
-				:controlId="controlId"
+				:control-id="controlId"
 				:label="label"
-				:localeLabel="localeLabel"
-				:isRequired="isRequired"
-				:requiredLabel="t('common.required')"
-				:multilingualLabel="multilingualLabel"
+				:locale-label="localeLabel"
+				:is-required="isRequired"
+				:required-label="t('common.required')"
+				:multilingual-label="multilingualLabel"
 			/>
 			<tooltip v-if="tooltip" aria-hidden="true" :tooltip="tooltip" label="" />
 			<span
 				v-if="tooltip"
-				class="-screenReader"
 				:id="describedByTooltipId"
+				class="-screenReader"
 				v-html="tooltip"
 			/>
 			<help-button
@@ -26,9 +26,9 @@
 		</div>
 		<div
 			v-if="isPrimaryLocale && description"
+			:id="describedByDescriptionId"
 			class="pkpFormField__description"
 			v-html="description"
-			:id="describedByDescriptionId"
 		/>
 		<div
 			class="pkpFormField__control"
@@ -38,9 +38,9 @@
 			}"
 		>
 			<select
-				class="pkpFormField__input pkpFormField--select__input"
-				v-model="currentValue"
 				:id="controlId"
+				v-model="currentValue"
+				class="pkpFormField__input pkpFormField--select__input"
 				:name="localizedName"
 				:aria-describedby="describedByIds"
 				:aria-invalid="errors && errors.length"
diff --git a/src/components/Form/fields/FieldSelectIssue.vue b/src/components/Form/fields/FieldSelectIssue.vue
index bd9422977..117e4d07b 100644
--- a/src/components/Form/fields/FieldSelectIssue.vue
+++ b/src/components/Form/fields/FieldSelectIssue.vue
@@ -2,16 +2,16 @@
 	<div class="pkpFormField pkpFormField--select pkpFormField--selectIssue">
 		<div class="pkpFormField__heading">
 			<form-field-label
-				:controlId="controlId"
+				:control-id="controlId"
 				:label="label"
-				:isRequired="isRequired"
-				:requiredLabel="t('common.required')"
+				:is-required="isRequired"
+				:required-label="t('common.required')"
 			/>
 			<tooltip v-if="tooltip" aria-hidden="true" :tooltip="tooltip" label="" />
 			<span
 				v-if="tooltip"
-				class="-screenReader"
 				:id="describedByTooltipId"
+				class="-screenReader"
 				v-html="tooltip"
 			/>
 			<help-button
@@ -24,9 +24,9 @@
 		</div>
 		<div
 			v-if="description"
+			:id="describedByDescriptionId"
 			class="pkpFormField__description"
 			v-html="description"
-			:id="describedByDescriptionId"
 		/>
 		<div class="pkpFormField__control">
 			<span class="pkpFormField__description">
diff --git a/src/components/Form/fields/FieldText.vue b/src/components/Form/fields/FieldText.vue
index f7958fa54..7c9853f2e 100644
--- a/src/components/Form/fields/FieldText.vue
+++ b/src/components/Form/fields/FieldText.vue
@@ -2,12 +2,12 @@
 	<div class="pkpFormField pkpFormField--text" :class="classes">
 		<div class="pkpFormField__heading">
 			<form-field-label
-				:controlId="controlId"
+				:control-id="controlId"
 				:label="label"
-				:localeLabel="localeLabel"
-				:isRequired="isRequired"
-				:requiredLabel="t('common.required')"
-				:multilingualLabel="multilingualLabel"
+				:locale-label="localeLabel"
+				:is-required="isRequired"
+				:required-label="t('common.required')"
+				:multilingual-label="multilingualLabel"
 			/>
 			<tooltip
 				v-if="isPrimaryLocale && tooltip"
@@ -17,8 +17,8 @@
 			/>
 			<span
 				v-if="isPrimaryLocale && tooltip"
-				class="-screenReader"
 				:id="describedByTooltipId"
+				class="-screenReader"
 				v-html="tooltip"
 			/>
 			<help-button
@@ -31,18 +31,18 @@
 		</div>
 		<div
 			v-if="isPrimaryLocale && description"
+			:id="describedByDescriptionId"
 			class="pkpFormField__description"
 			v-html="description"
-			:id="describedByDescriptionId"
 		/>
 		<div class="pkpFormField__control" :class="controlClasses">
 			<div class="pkpFormField__control_top">
 				<input
-					class="pkpFormField__input pkpFormField--text__input"
+					:id="controlId"
 					ref="input"
 					v-model="currentValue"
+					class="pkpFormField__input pkpFormField--text__input"
 					:type="inputType"
-					:id="controlId"
 					:name="localizedName"
 					:aria-describedby="describedByIds"
 					:aria-invalid="errors && errors.length"
@@ -52,11 +52,11 @@
 				/>
 				<span
 					v-if="prefix"
-					class="pkpFormField__inputPrefix"
-					v-html="prefix"
 					ref="prefix"
+					class="pkpFormField__inputPrefix"
 					:style="prefixStyles"
 					@click="setFocus"
+					v-html="prefix"
 				/>
 				<multilingual-progress
 					v-if="isMultilingual && locales.length > 1"
@@ -136,14 +136,6 @@ export default {
 			return classes;
 		},
 	},
-	methods: {
-		/**
-		 * Set focus to the control input
-		 */
-		setFocus() {
-			this.$refs.input.focus();
-		},
-	},
 	mounted() {
 		/**
 		 * Increase input padding to account for a prefix if one exists and truncate
@@ -200,6 +192,14 @@ export default {
 			this.isDisabled = true;
 		}
 	},
+	methods: {
+		/**
+		 * Set focus to the control input
+		 */
+		setFocus() {
+			this.$refs.input.focus();
+		},
+	},
 };
 </script>
 
diff --git a/src/components/Form/fields/FieldTextarea.vue b/src/components/Form/fields/FieldTextarea.vue
index a9e6261bc..8eaad7c31 100644
--- a/src/components/Form/fields/FieldTextarea.vue
+++ b/src/components/Form/fields/FieldTextarea.vue
@@ -2,12 +2,12 @@
 	<div class="pkpFormField pkpFormField--textarea" :class="classes">
 		<div class="pkpFormField__heading">
 			<form-field-label
-				:controlId="controlId"
+				:control-id="controlId"
 				:label="label"
-				:localeLabel="localeLabel"
-				:isRequired="isRequired"
-				:requiredLabel="t('common.required')"
-				:multilingualLabel="multilingualLabel"
+				:locale-label="localeLabel"
+				:is-required="isRequired"
+				:required-label="t('common.required')"
+				:multilingual-label="multilingualLabel"
 			/>
 			<tooltip
 				v-if="isPrimaryLocale && tooltip"
@@ -17,8 +17,8 @@
 			/>
 			<span
 				v-if="isPrimaryLocale && tooltip"
-				class="-screenReader"
 				:id="describedByTooltipId"
+				class="-screenReader"
 				v-html="tooltip"
 			/>
 			<help-button
@@ -31,15 +31,15 @@
 		</div>
 		<div
 			v-if="isPrimaryLocale && description"
+			:id="describedByDescriptionId"
 			class="pkpFormField__description"
 			v-html="description"
-			:id="describedByDescriptionId"
 		/>
 		<div class="pkpFormField__control">
 			<textarea
-				class="pkpFormField__input pkpFormField--textarea__input"
-				v-model="currentValue"
 				:id="controlId"
+				v-model="currentValue"
+				class="pkpFormField__input pkpFormField--textarea__input"
 				:name="localizedName"
 				:aria-describedby="describedByIds"
 				:aria-invalid="errors && errors.length"
diff --git a/src/components/Form/fields/FieldUpload.vue b/src/components/Form/fields/FieldUpload.vue
index a8026ebb3..0915369bc 100644
--- a/src/components/Form/fields/FieldUpload.vue
+++ b/src/components/Form/fields/FieldUpload.vue
@@ -2,18 +2,18 @@
 	<div class="pkpFormField pkpFormField--upload">
 		<div class="pkpFormField__heading">
 			<form-field-label
-				:controlId="dropzoneHiddenFileId"
+				:control-id="dropzoneHiddenFileId"
 				:label="label"
-				:localeLabel="localeLabel"
-				:isRequired="isRequired"
-				:requiredLabel="t('common.required')"
-				:multilingualLabel="multilingualLabel"
+				:locale-label="localeLabel"
+				:is-required="isRequired"
+				:required-label="t('common.required')"
+				:multilingual-label="multilingualLabel"
 			/>
 			<tooltip v-if="tooltip" aria-hidden="true" :tooltip="tooltip" label="" />
 			<span
 				v-if="tooltip"
-				class="-screenReader"
 				:id="describedByTooltipId"
+				class="-screenReader"
 				v-html="tooltip"
 			/>
 			<help-button
@@ -26,14 +26,14 @@
 		</div>
 		<div
 			v-if="isPrimaryLocale && description"
+			:id="describedByDescriptionId"
 			class="pkpFormField__description"
 			v-html="description"
-			:id="describedByDescriptionId"
 		/>
 		<div
-			class="pkpFormField__control pkpFormField--upload__control"
-			ref="control"
 			:id="controlId"
+			ref="control"
+			class="pkpFormField__control pkpFormField--upload__control"
 			aria-live="polite"
 		>
 			<div v-if="currentValue" class="pkpFormField--upload__preview">
@@ -41,7 +41,7 @@
 					{{ fileName }}
 				</span>
 				<div class="pkpFormField--upload__previewActions">
-					<pkp-button :isWarnable="true" @click="clear">
+					<pkp-button :is-warnable="true" @click="clear">
 						{{ t('common.remove') }}
 					</pkp-button>
 					<pkp-button v-if="initialValue && !isInitialValue" @click="revert">
@@ -64,8 +64,8 @@
 			<div :class="{'-screenReader': currentValue}">
 				<vue-dropzone
 					v-if="isComponentMounted"
-					ref="dropzone"
 					:id="dropzoneId"
+					ref="dropzone"
 					:options="dropzoneOptions"
 					@vdropzone-file-added="onAddFile"
 					@vdropzone-success="success"
@@ -80,9 +80,9 @@
 				<div class="pkpFormField--upload__uploadActions">
 					<!-- keyboard-accessible file upload. Keep this element in the dom for screen readers -->
 					<pkp-button
+						:id="dropzoneClickableId"
 						class="pkpFormField--upload__addFile"
 						:disabled="!!uploadFile"
-						:id="dropzoneClickableId"
 					>
 						{{ uploadFileLabel }}
 					</pkp-button>
@@ -111,10 +111,10 @@ import VueDropzone from 'dropzone-vue3';
 
 export default {
 	name: 'FieldUpload',
-	extends: FieldBase,
 	components: {
 		VueDropzone,
 	},
+	extends: FieldBase,
 	props: {
 		options: Object,
 		restoreLabel: String,
@@ -233,6 +233,31 @@ export default {
 			};
 		},
 	},
+	mounted() {
+		this.isComponentMounted = true;
+
+		// not ideal, but first this component needs to get mounted
+		// than vue-dropzone gets mounted and afterwards vue-dropzone
+		// DOM can be manipulated
+		setTimeout(() => {
+			/**
+			 * Add attributes to the hidden file input field so that labels and
+			 * descriptions can be accessed by those using assistive devices.
+			 */
+			this.$refs.dropzone.dropzone.hiddenFileInput.id =
+				this.dropzoneHiddenFileId;
+			this.$refs.dropzone.dropzone.hiddenFileInput.setAttribute(
+				'aria-describedby',
+				this.describedByIds,
+			);
+
+			/**
+			 * Set the initial data, which can't be set in the data() function because it relies on
+			 * a computed property
+			 */
+			this.initialValue = this.currentValue ? this.currentValue : null;
+		});
+	},
 	methods: {
 		/**
 		 * Clear the current value
@@ -351,31 +376,6 @@ export default {
 			});
 		},
 	},
-	mounted() {
-		this.isComponentMounted = true;
-
-		// not ideal, but first this component needs to get mounted
-		// than vue-dropzone gets mounted and afterwards vue-dropzone
-		// DOM can be manipulated
-		setTimeout(() => {
-			/**
-			 * Add attributes to the hidden file input field so that labels and
-			 * descriptions can be accessed by those using assistive devices.
-			 */
-			this.$refs.dropzone.dropzone.hiddenFileInput.id =
-				this.dropzoneHiddenFileId;
-			this.$refs.dropzone.dropzone.hiddenFileInput.setAttribute(
-				'aria-describedby',
-				this.describedByIds,
-			);
-
-			/**
-			 * Set the initial data, which can't be set in the data() function because it relies on
-			 * a computed property
-			 */
-			this.initialValue = this.currentValue ? this.currentValue : null;
-		});
-	},
 };
 </script>
 
diff --git a/src/components/Form/fields/FieldUploadImage.vue b/src/components/Form/fields/FieldUploadImage.vue
index afbebe2b9..cd40306fd 100644
--- a/src/components/Form/fields/FieldUploadImage.vue
+++ b/src/components/Form/fields/FieldUploadImage.vue
@@ -2,18 +2,18 @@
 	<div class="pkpFormField pkpFormField--upload pkpFormField--uploadImage">
 		<div class="pkpFormField__heading">
 			<form-field-label
-				:controlId="dropzoneHiddenFileId"
+				:control-id="dropzoneHiddenFileId"
 				:label="label"
-				:localeLabel="localeLabel"
-				:isRequired="isRequired"
-				:requiredLabel="t('common.required')"
-				:multilingualLabel="multilingualLabel"
+				:locale-label="localeLabel"
+				:is-required="isRequired"
+				:required-label="t('common.required')"
+				:multilingual-label="multilingualLabel"
 			/>
 			<tooltip v-if="tooltip" aria-hidden="true" :tooltip="tooltip" label="" />
 			<span
 				v-if="tooltip"
-				class="-screenReader"
 				:id="describedByTooltipId"
+				class="-screenReader"
 				v-html="tooltip"
 			/>
 			<help-button
@@ -26,19 +26,19 @@
 		</div>
 		<div
 			v-if="isPrimaryLocale && description"
+			:id="describedByDescriptionId"
 			class="pkpFormField__description"
 			v-html="description"
-			:id="describedByDescriptionId"
 		/>
 		<div
-			class="pkpFormField__control pkpFormField--upload__control"
-			ref="control"
 			:id="controlId"
+			ref="control"
+			class="pkpFormField__control pkpFormField--upload__control"
 			aria-live="polite"
 		>
 			<div v-if="currentValue" class="pkpFormField--upload__preview">
 				<img
-					v-if="this.thumbnail"
+					v-if="thumbnail"
 					class="pkpFormField--uploadImage__thumbnail"
 					:alt="thumbnailDescription"
 					:src="thumbnail"
@@ -48,20 +48,20 @@
 						{{ altTextLabel }}
 					</label>
 					<input
+						:id="altTextId"
+						v-model="altTextValue"
 						class="pkpFormField__input pkpFormField--uploadImage__altTextInput"
 						type="text"
-						v-model="altTextValue"
-						:id="altTextId"
 						:aria-describedby="altTextDescriptionId"
 					/>
 					<div
+						:id="altTextDescriptionId"
 						class="pkpFormField--uploadImage__altTextDescription"
 						v-html="altTextDescription"
-						:id="altTextDescriptionId"
 					/>
 				</div>
 				<div class="pkpFormField--upload__previewActions">
-					<pkp-button :isWarnable="true" @click="clear">
+					<pkp-button :is-warnable="true" @click="clear">
 						{{ t('common.remove') }}
 					</pkp-button>
 					<pkp-button v-if="initialValue && !isInitialValue" @click="revert">
@@ -84,8 +84,8 @@
 			<div :class="{'-screenReader': currentValue}">
 				<vue-dropzone
 					v-if="isComponentMounted"
-					ref="dropzone"
 					:id="dropzoneId"
+					ref="dropzone"
 					:options="dropzoneOptions"
 					@vdropzone-file-added="onAddFile"
 					@vdropzone-thumbnail="onThumbnail"
@@ -101,9 +101,9 @@
 				<div class="pkpFormField--upload__uploadActions">
 					<!-- keyboard-accessible file upload -->
 					<pkp-button
+						:id="dropzoneClickableId"
 						class="pkpFormField--upload__addFile"
 						:disabled="!!uploadFile"
-						:id="dropzoneClickableId"
 					>
 						{{ uploadFileLabel }}
 					</pkp-button>
@@ -186,40 +186,6 @@ export default {
 			return this.compileId('altTextDescription');
 		},
 	},
-	methods: {
-		/**
-		 * Respond to dropzone.js event when a file is successfully uploaded
-		 *
-		 * @param {Object} file Details about the file
-		 * @param {Object} response The server response
-		 * @see https://www.dropzonejs.com/#event-success
-		 */
-		success: function (file, response) {
-			this.isUploading = false;
-			this.$emit(
-				'change',
-				this.name,
-				'value',
-				{
-					temporaryFileId: response.id,
-					altText: '',
-				},
-				this.localeKey,
-			);
-			this.setFocusToControl();
-		},
-
-		/**
-		 * Respond to a dropzone.js event when it creates a thumbnail
-		 *
-		 * @param {Object} file Details about the file
-		 * @see https://www.dropzonejs.com/#event-thumbnail
-		 */
-		onThumbnail: function (file) {
-			this.uploadFile = {...file};
-			this.setFocusToControl();
-		},
-	},
 	watch: {
 		/**
 		 * Whenever the current value changes, update the altTextValue to keep
@@ -280,6 +246,40 @@ export default {
 			this.altTextValue = this.currentValue ? this.currentValue.altText : '';
 		});
 	},
+	methods: {
+		/**
+		 * Respond to dropzone.js event when a file is successfully uploaded
+		 *
+		 * @param {Object} file Details about the file
+		 * @param {Object} response The server response
+		 * @see https://www.dropzonejs.com/#event-success
+		 */
+		success: function (file, response) {
+			this.isUploading = false;
+			this.$emit(
+				'change',
+				this.name,
+				'value',
+				{
+					temporaryFileId: response.id,
+					altText: '',
+				},
+				this.localeKey,
+			);
+			this.setFocusToControl();
+		},
+
+		/**
+		 * Respond to a dropzone.js event when it creates a thumbnail
+		 *
+		 * @param {Object} file Details about the file
+		 * @see https://www.dropzonejs.com/#event-thumbnail
+		 */
+		onThumbnail: function (file) {
+			this.uploadFile = {...file};
+			this.setFocusToControl();
+		},
+	},
 };
 </script>
 
diff --git a/src/components/Icon/Icon.vue b/src/components/Icon/Icon.vue
index 54aa7e7ab..2cfcf5de3 100644
--- a/src/components/Icon/Icon.vue
+++ b/src/components/Icon/Icon.vue
@@ -27,7 +27,7 @@
 			/>
 		</g>
 	</svg>
-	<span class="inline-block" v-else-if="isPkpIcon">
+	<span v-else-if="isPkpIcon" class="inline-block">
 		<component :is="pkpIcons[icon]"></component>
 	</span>
 	<span v-else class="fa" :class="classes" aria-hidden="true"></span>
@@ -42,6 +42,7 @@ import OpenLeft from './OpenLeft.vue';
 import OpenRight from './OpenRight.vue';
 
 export default {
+	name: 'Icon',
 	components: {
 		EnvelopeClosed,
 		QuestionmarkCircle,
@@ -50,7 +51,6 @@ export default {
 		OpenLeft,
 		OpenRight,
 	},
-	name: 'Icon',
 	props: {
 		icon: String,
 		inline: Boolean,
diff --git a/src/components/InsertContent/InsertContent.vue b/src/components/InsertContent/InsertContent.vue
index 68d7845b3..0a70bb243 100644
--- a/src/components/InsertContent/InsertContent.vue
+++ b/src/components/InsertContent/InsertContent.vue
@@ -1,16 +1,16 @@
 <template>
 	<div class="insertContent">
 		<search
-			:searchLabel="searchLabel"
-			:searchPhrase="searchPhrase"
-			@search-phrase-changed="(newVal) => (this.searchPhrase = newVal)"
+			:search-label="searchLabel"
+			:search-phrase="searchPhrase"
+			@search-phrase-changed="(newVal) => (searchPhrase = newVal)"
 		/>
 		<ol class="insertContent__items" :aria-label="itemsLabel">
 			<li
 				v-for="item in current"
+				:id="'insert-content-' + item.key"
 				:key="item.key"
 				class="insertContent__item"
-				:id="'insert-content-' + item.key"
 			>
 				<div class="insertContent__item__header">
 					<div class="insertContent__item__value">
diff --git a/src/components/ListPanel/ListPanel.vue b/src/components/ListPanel/ListPanel.vue
index dbb9837e4..27ec5ebc2 100644
--- a/src/components/ListPanel/ListPanel.vue
+++ b/src/components/ListPanel/ListPanel.vue
@@ -11,8 +11,8 @@
 			<transition name="listPanel__sidebar">
 				<div
 					v-if="!!$slots.sidebar && isSidebarVisible"
-					class="listPanel__sidebar"
 					ref="sidebar"
+					class="listPanel__sidebar"
 				>
 					<slot name="sidebar" />
 				</div>
@@ -30,8 +30,8 @@
 										<slot name="item-title" :item="item">{{ item.title }}</slot>
 									</div>
 									<div
-										class="listPanel__itemSubtitle"
 										v-if="!!$slots['item-subtitle'] || item.subtitle"
+										class="listPanel__itemSubtitle"
 									>
 										<slot name="item-subtitle" :item="item">
 											{{ item.subtitle }}
diff --git a/src/components/ListPanel/announcements/AnnouncementsListPanel.vue b/src/components/ListPanel/announcements/AnnouncementsListPanel.vue
index ee6b4d82e..870b693ec 100644
--- a/src/components/ListPanel/announcements/AnnouncementsListPanel.vue
+++ b/src/components/ListPanel/announcements/AnnouncementsListPanel.vue
@@ -8,7 +8,7 @@
 						<spinner v-if="isLoading" />
 						<template #actions>
 							<search
-								:searchPhrase="searchPhrase"
+								:search-phrase="searchPhrase"
 								@search-phrase-changed="setSearchPhrase"
 							/>
 							<pkp-button @click="openAddModal">
@@ -27,22 +27,22 @@
 					<pkp-button @click="openEditModal(item.id)">
 						{{ t('common.edit') }}
 					</pkp-button>
-					<pkp-button :isWarnable="true" @click="openDeleteModal(item.id)">
+					<pkp-button :is-warnable="true" @click="openDeleteModal(item.id)">
 						{{ t('common.delete') }}
 					</pkp-button>
 				</template>
 				<template #footer>
 					<pagination
 						v-if="lastPage > 1"
-						:currentPage="currentPage"
-						:isLoading="isLoading"
-						:lastPage="lastPage"
+						:current-page="currentPage"
+						:is-loading="isLoading"
+						:last-page="lastPage"
 						@set-page="setPage"
 					/>
 				</template>
 			</list-panel>
 			<modal
-				:closeLabel="t('common.close')"
+				:close-label="t('common.close')"
 				name="form"
 				:title="activeFormTitle"
 				:open="isModalOpenedForm"
diff --git a/src/components/ListPanel/contributors/ContributorsListPanel.vue b/src/components/ListPanel/contributors/ContributorsListPanel.vue
index 04d8ece04..f34ff494a 100644
--- a/src/components/ListPanel/contributors/ContributorsListPanel.vue
+++ b/src/components/ListPanel/contributors/ContributorsListPanel.vue
@@ -12,29 +12,29 @@
 						<spinner v-if="isLoading" />
 						<template #actions>
 							<pkp-button
-								icon="sort"
-								:isActive="isOrdering"
-								@click="toggleOrdering"
 								v-if="
 									publication.status !== getConstant('STATUS_PUBLISHED') &&
 									canEditPublication
 								"
+								icon="sort"
+								:is-active="isOrdering"
 								:disabled="isLoading"
+								@click="toggleOrdering"
 							>
 								{{ orderingLabel }}
 							</pkp-button>
 							<pkp-button
 								v-if="isOrdering"
-								:isWarnable="true"
-								@click="cancelOrdering"
+								:is-warnable="true"
 								:disabled="isLoading"
+								@click="cancelOrdering"
 							>
 								{{ t('common.cancel') }}
 							</pkp-button>
 							<pkp-button
 								v-if="!isOrdering"
-								@click="openPreviewModal"
 								:disabled="isLoading"
+								@click="openPreviewModal"
 							>
 								{{ i18nPreview }}
 							</pkp-button>
@@ -44,8 +44,8 @@
 									publication.status !== getConstant('STATUS_PUBLISHED') &&
 									canEditPublication
 								"
-								@click="openAddModal"
 								:disabled="isLoading"
+								@click="openAddModal"
 							>
 								{{ i18nAddContributor }}
 							</pkp-button>
@@ -70,32 +70,32 @@
 				>
 					<template v-if="isOrdering">
 						<orderer
+							:item-id="item.id"
+							:item-title="item.fullName"
 							@up="contributorItemOrderUp(item)"
 							@down="contributorItemOrderDown(item)"
-							:itemId="item.id"
-							:itemTitle="item.fullName"
 						/>
 					</template>
 					<template v-else>
 						<badge
 							v-if="publication.primaryContactId == item.id"
-							:isPrimary="true"
+							:is-primary="true"
 						>
 							{{ i18nPrimaryContact }}
 						</badge>
 						<pkp-button
 							v-else
-							@click="setPrimaryContact(item.id)"
 							:disabled="isLoading"
+							@click="setPrimaryContact(item.id)"
 						>
 							{{ i18nSetPrimaryContact }}
 						</pkp-button>
-						<pkp-button @click="openEditModal(item.id)" :disabled="isLoading">
+						<pkp-button :disabled="isLoading" @click="openEditModal(item.id)">
 							{{ t('common.edit') }}
 						</pkp-button>
 						<pkp-button
 							:disabled="isLoading"
-							:isWarnable="true"
+							:is-warnable="true"
 							@click="openDeleteModal(item.id)"
 						>
 							{{ t('common.delete') }}
@@ -104,7 +104,7 @@
 				</template>
 			</list-panel>
 			<modal
-				:closeLabel="t('common.close')"
+				:close-label="t('common.close')"
 				:name="formModal"
 				:title="activeFormTitle"
 				:open="isModalOpenedForm"
@@ -117,7 +117,7 @@
 				/>
 			</modal>
 			<modal
-				:closeLabel="t('common.close')"
+				:close-label="t('common.close')"
 				:name="previewModal"
 				:title="i18nContributors"
 				:open="isModalOpenedPreview"
diff --git a/src/components/ListPanel/doi/DoiListItem.vue b/src/components/ListPanel/doi/DoiListItem.vue
index 503acae91..8aa07b27d 100644
--- a/src/components/ListPanel/doi/DoiListItem.vue
+++ b/src/components/ListPanel/doi/DoiListItem.vue
@@ -55,8 +55,8 @@
 				</div>
 
 				<expander
-					:isExpanded="isExpanded"
-					:itemName="item.id.toString()"
+					:is-expanded="isExpanded"
+					:item-name="item.id.toString()"
 					@toggle="toggleExpanded"
 				/>
 			</div>
@@ -74,13 +74,13 @@
 					</table-cell>
 					<table-cell :column="doiListColumns[1]" :row="row">
 						<input
-							class="pkpFormField__input pkpFormField--text__input"
 							:id="row.uid"
-							type="text"
-							:readonly="!(isEditingDois && !isSaving)"
 							v-model="
 								mutableDois.find((doi) => doi.uid === row.uid).identifier
 							"
+							class="pkpFormField__input pkpFormField--text__input"
+							type="text"
+							:readonly="!(isEditingDois && !isSaving)"
 						/>
 					</table-cell>
 				</template>
@@ -89,13 +89,13 @@
 				class="listPanel__itemExpandedActions doiListPanel__itemExpandedActions"
 			>
 				<div
-					class="doiListPanel__itemExpandedActions--actionsBar"
 					v-if="
 						item.versions.length > 1 &&
 						!isEditingDois &&
 						!isSaving &&
 						versionDois
 					"
+					class="doiListPanel__itemExpandedActions--actionsBar"
 				>
 					{{
 						t('doi.manager.versions.countStatement', {
@@ -121,14 +121,14 @@
 
 			<!-- Registration Agency Actions -->
 			<div
-				class="doiListItem__depositorDetails"
 				v-if="isRegistrationPluginConfigured"
+				class="doiListItem__depositorDetails"
 			>
 				<div class="doiListItem__depositorName">
 					{{ registrationAgencyInfo['displayName'] }}
 				</div>
 
-				<span class="doiListItem__depositorDescription" v-if="item.isPublished">
+				<span v-if="item.isPublished" class="doiListItem__depositorDescription">
 					{{
 						isDeposited
 							? itemRegistrationAgency === null
@@ -141,29 +141,29 @@
 							  })
 					}}
 				</span>
-				<span class="doiListItem__depositorDescription" v-else>
+				<span v-else class="doiListItem__depositorDescription">
 					{{ t('manager.dois.registration.notPublishedDescription') }}
 				</span>
 				<div class="doiListItem__depositorActions">
 					<pkp-button
+						v-if="isDeposited && hasRegisteredMessage"
 						ref="recordedMessageModalButton"
 						:is-disabled="isEditingDois"
 						@click="isModalOpenedRegisteredMessage = true"
-						v-if="isDeposited && hasRegisteredMessage"
 					>
 						{{ t('manager.dois.registration.viewRecord') }}
 					</pkp-button>
 					<pkp-button
+						v-else-if="!isDeposited && item.isPublished"
 						:is-disabled="isEditingDois"
 						@click="handleDepositorActions"
-						v-else-if="!isDeposited && item.isPublished"
 					>
 						{{ t('manager.dois.registration.depositDois') }}
 					</pkp-button>
 					<pkp-button
+						v-if="hasErrors && hasErrorMessage"
 						ref="errorMessageModalButton"
 						:is-disabled="isEditingDois"
-						v-if="hasErrors && hasErrorMessage"
 						@click="isModalOpenedErrorMessage = true"
 					>
 						{{ t('manager.dois.registration.viewError') }}
@@ -205,9 +205,9 @@
 			@close="isModalOpenedVersion = false"
 		>
 			<div
-				class="doiListItem__versionContainer"
 				v-for="version in item.versions"
 				:key="version.id"
+				class="doiListItem__versionContainer"
 			>
 				<a
 					:href="version.urlPublished"
@@ -230,13 +230,13 @@
 						</table-cell>
 						<table-cell :column="doiListColumns[1]" :row="row">
 							<input
-								class="pkpFormField__input pkpFormField--text__input"
 								:id="row.uid"
-								type="text"
-								:readonly="!(isEditingDois && !isSaving)"
 								v-model="
 									mutableDois.find((doi) => doi.uid === row.uid).identifier
 								"
+								class="pkpFormField__input pkpFormField--text__input"
+								type="text"
+								:readonly="!(isEditingDois && !isSaving)"
 							/>
 						</table-cell>
 					</template>
@@ -537,6 +537,14 @@ export default {
 			return this.item.type + '-versionsModal-' + this.item.id;
 		},
 	},
+	watch: {
+		item: function () {
+			this.updateMutableDois(this.item.doiObjects);
+		},
+	},
+	mounted() {
+		this.updateMutableDois(this.item.doiObjects);
+	},
 	methods: {
 		updateMutableDois(doiObjects) {
 			let dois = [];
@@ -825,14 +833,6 @@ export default {
 			})} ${dateInfo}`;
 		},
 	},
-	mounted() {
-		this.updateMutableDois(this.item.doiObjects);
-	},
-	watch: {
-		item: function () {
-			this.updateMutableDois(this.item.doiObjects);
-		},
-	},
 };
 </script>
 
diff --git a/src/components/ListPanel/doi/DoiListPanel.vue b/src/components/ListPanel/doi/DoiListPanel.vue
index c6a6e3cfd..9cf6e2a12 100644
--- a/src/components/ListPanel/doi/DoiListPanel.vue
+++ b/src/components/ListPanel/doi/DoiListPanel.vue
@@ -1,14 +1,14 @@
 <template>
 	<div class="doiListPanel">
 		<slot>
-			<list-panel :items="mappedItems" :isSidebarVisible="true">
+			<list-panel :items="mappedItems" :is-sidebar-visible="true">
 				<template #header>
 					<pkp-header>
 						<h2>{{ title }}</h2>
 						<spinner v-if="isLoading" />
 						<template #actions>
 							<search
-								:searchPhrase="searchPhrase"
+								:search-phrase="searchPhrase"
 								@search-phrase-changed="setSearchPhrase"
 							/>
 
@@ -112,8 +112,8 @@
 							</dropdown>
 
 							<pkp-button
-								:is-primary="true"
 								v-if="isRegistrationPluginConfigured"
+								:is-primary="true"
 								@click="openBulkDepositAll"
 							>
 								{{ t('manager.dois.actions.deposit.all') }}
@@ -123,7 +123,7 @@
 				</template>
 
 				<template #sidebar>
-					<pkp-header :isOneLine="false">
+					<pkp-header :is-one-line="false">
 						<h3>
 							<icon icon="filter" :inline="true" />
 							{{ t('common.filter') }}
@@ -146,11 +146,11 @@
 							<h4>{{ filterSet.heading }}</h4>
 						</pkp-header>
 						<component
+							:is="filter.filterType || 'pkp-filter'"
 							v-for="filter in filterSet.filters"
 							:key="filter.param + filter.value"
-							:is="filter.filterType || 'pkp-filter'"
 							v-bind="filter"
-							:isFilterActive="isFilterActive(filter.param, filter.value)"
+							:is-filter-active="isFilterActive(filter.param, filter.value)"
 							@add-filter="addFilter"
 							@remove-filter="removeFilter"
 							@update-filter="addFilter"
@@ -192,9 +192,9 @@
 				<template #footer>
 					<pagination
 						v-if="lastPage > 1"
-						:currentPage="currentPage"
-						:isLoading="isLoading"
-						:lastPage="lastPage"
+						:current-page="currentPage"
+						:is-loading="isLoading"
+						:last-page="lastPage"
 						@set-page="setPage"
 					/>
 				</template>
@@ -255,12 +255,9 @@
 			:open="isModalOpenedFailedDoiAction"
 			@close="closeFailedDoiActionModal"
 		>
-			<p>{{ this.t('manager.dois.update.partialFailure') }}</p>
+			<p>{{ t('manager.dois.update.partialFailure') }}</p>
 			<ul>
-				<li
-					v-for="errorMessage in this.failedDoiActions"
-					v-bind:key="errorMessage.index"
-				>
+				<li v-for="errorMessage in failedDoiActions" :key="errorMessage.index">
 					{{ errorMessage }}
 				</li>
 			</ul>
@@ -383,6 +380,54 @@ export default {
 			isModalOpenedFailedDoiAction: false,
 		};
 	},
+	computed: {
+		canAssignDois() {
+			return (
+				this.doiPrefix &&
+				this.doiPrefix?.length > 0 &&
+				this.enabledDoiTypes.length > 0
+			);
+		},
+		isAllSelected() {
+			return this.selected.length && this.selected.length === this.items.length;
+		},
+		isAllExpanded() {
+			return this.expanded.length && this.expanded.length === this.items.length;
+		},
+		mappedItems() {
+			return this.items.map((item) => {
+				let newItem = {
+					id: item.id,
+					type: this.itemType,
+					title: this.getItemTitle(item),
+					urlPublished: this.getUrlPublished(item),
+					isPublished: this.getIsPublished(item),
+					versions: this.getVersions(item),
+					doiObjects: [],
+				};
+				newItem = this.addDoiObjects(newItem);
+
+				return newItem;
+			});
+		},
+		isRegistrationPluginConfigured() {
+			return this.registrationAgencyInfo['isConfigured'];
+		},
+	},
+	watch: {
+		/**
+		 *
+		 * @param {Array} newVal
+		 * @param {Array} oldVal
+		 */
+		failedDoiActions(newVal, oldVal) {
+			if (newVal.length !== 0) {
+				this.isModalOpenedFailedDoiAction = true;
+			} else if (this.isModalOpenedFailedDoiAction === true) {
+				this.closeFailedDoiActionModal();
+			}
+		},
+	},
 	methods: {
 		/**
 		 * Set the list of items
@@ -943,54 +988,6 @@ export default {
 			this.failedDoiActions = [];
 		},
 	},
-	computed: {
-		canAssignDois() {
-			return (
-				this.doiPrefix &&
-				this.doiPrefix?.length > 0 &&
-				this.enabledDoiTypes.length > 0
-			);
-		},
-		isAllSelected() {
-			return this.selected.length && this.selected.length === this.items.length;
-		},
-		isAllExpanded() {
-			return this.expanded.length && this.expanded.length === this.items.length;
-		},
-		mappedItems() {
-			return this.items.map((item) => {
-				let newItem = {
-					id: item.id,
-					type: this.itemType,
-					title: this.getItemTitle(item),
-					urlPublished: this.getUrlPublished(item),
-					isPublished: this.getIsPublished(item),
-					versions: this.getVersions(item),
-					doiObjects: [],
-				};
-				newItem = this.addDoiObjects(newItem);
-
-				return newItem;
-			});
-		},
-		isRegistrationPluginConfigured() {
-			return this.registrationAgencyInfo['isConfigured'];
-		},
-	},
-	watch: {
-		/**
-		 *
-		 * @param {Array} newVal
-		 * @param {Array} oldVal
-		 */
-		failedDoiActions(newVal, oldVal) {
-			if (newVal.length !== 0) {
-				this.isModalOpenedFailedDoiAction = true;
-			} else if (this.isModalOpenedFailedDoiAction === true) {
-				this.closeFailedDoiActionModal();
-			}
-		},
-	},
 };
 </script>
 
diff --git a/src/components/ListPanel/highlights/HighlightsListPanel.vue b/src/components/ListPanel/highlights/HighlightsListPanel.vue
index 1c9ab34d5..9761973ca 100644
--- a/src/components/ListPanel/highlights/HighlightsListPanel.vue
+++ b/src/components/ListPanel/highlights/HighlightsListPanel.vue
@@ -10,23 +10,23 @@
 							<pkp-button
 								v-if="!isOrdering"
 								icon="sort"
-								:isActive="isOrdering"
-								@click="isOrdering = true"
+								:is-active="isOrdering"
 								:disabled="isLoading"
+								@click="isOrdering = true"
 							>
 								{{ t('common.order') }}
 							</pkp-button>
 							<template v-else>
 								<pkp-button
 									icon="sort"
-									:isActive="true"
-									@click="saveOrder"
+									:is-active="true"
 									:disabled="isLoading"
+									@click="saveOrder"
 								>
 									{{ i18nSaveOrder }}
 								</pkp-button>
 								<pkp-button
-									:isWarnable="true"
+									:is-warnable="true"
 									:disabled="isLoading"
 									@click="isOrdering = false"
 								>
@@ -39,14 +39,14 @@
 						</template>
 					</pkp-header>
 				</template>
-				<template v-slot:item-title="{item}">
+				<template #item-title="{item}">
 					{{ localize(item.title) }}
 				</template>
-				<template v-slot:item-actions="{item}">
+				<template #item-actions="{item}">
 					<orderer
 						v-if="isOrdering"
-						:itemId="item.id"
-						:itemTitle="localize(item.title)"
+						:item-id="item.id"
+						:item-title="localize(item.title)"
 						@up="orderUp(item)"
 						@down="orderDown(item)"
 					></orderer>
@@ -55,7 +55,7 @@
 					</pkp-button>
 					<pkp-button
 						v-if="!isOrdering"
-						:isWarnable="true"
+						:is-warnable="true"
 						@click="openDeleteModal(item.id)"
 					>
 						{{ t('common.delete') }}
@@ -63,7 +63,7 @@
 				</template>
 			</list-panel>
 			<modal
-				:closeLabel="t('common.close')"
+				:close-label="t('common.close')"
 				name="form"
 				:title="activeFormTitle"
 				:open="isModalOpened"
diff --git a/src/components/ListPanel/institutions/InstitutionsListPanel.vue b/src/components/ListPanel/institutions/InstitutionsListPanel.vue
index 1fd753ba2..a31274b50 100644
--- a/src/components/ListPanel/institutions/InstitutionsListPanel.vue
+++ b/src/components/ListPanel/institutions/InstitutionsListPanel.vue
@@ -8,7 +8,7 @@
 						<spinner v-if="isLoading" />
 						<template #actions>
 							<search
-								:searchPhrase="searchPhrase"
+								:search-phrase="searchPhrase"
 								@search-phrase-changed="setSearchPhrase"
 							/>
 							<pkp-button @click="openAddModal">
@@ -30,7 +30,7 @@
 						{{ t('common.edit') }}
 					</pkp-button>
 					<pkp-button
-						:isWarnable="true"
+						:is-warnable="true"
 						:aria-describedby="'institution-' + item.id"
 						@click="openDeleteModal(item.id)"
 					>
@@ -40,15 +40,15 @@
 				<template #footer>
 					<pagination
 						v-if="lastPage > 1"
-						:currentPage="currentPage"
-						:isLoading="isLoading"
-						:lastPage="lastPage"
+						:current-page="currentPage"
+						:is-loading="isLoading"
+						:last-page="lastPage"
 						@set-page="setPage"
 					/>
 				</template>
 			</list-panel>
 			<modal
-				:closeLabel="t('common.close')"
+				:close-label="t('common.close')"
 				name="form"
 				:title="activeFormTitle"
 				:open="isModalOpenedForm"
diff --git a/src/components/ListPanel/submissionFiles/SelectSubmissionFileListItem.vue b/src/components/ListPanel/submissionFiles/SelectSubmissionFileListItem.vue
index 23876d498..b83a3ef15 100644
--- a/src/components/ListPanel/submissionFiles/SelectSubmissionFileListItem.vue
+++ b/src/components/ListPanel/submissionFiles/SelectSubmissionFileListItem.vue
@@ -5,10 +5,10 @@
 				<slot />
 			</div>
 			<file
-				class="selectSubmissionFileListItem__file"
-				:documentType="documentType"
-				:fileId="fileId"
 				:id="describedById"
+				class="selectSubmissionFileListItem__file"
+				:document-type="documentType"
+				:file-id="fileId"
 				:name="name"
 			/>
 		</label>
diff --git a/src/components/ListPanel/submissionFiles/SubmissionFilesListItem.vue b/src/components/ListPanel/submissionFiles/SubmissionFilesListItem.vue
index 2bb5939cc..12ae7e8b1 100644
--- a/src/components/ListPanel/submissionFiles/SubmissionFilesListItem.vue
+++ b/src/components/ListPanel/submissionFiles/SubmissionFilesListItem.vue
@@ -6,12 +6,12 @@
 				<div class="listPanel__itemIdentity">
 					<div class="listPanel__itemSubtitle">
 						<a
+							:id="nameId"
 							class="listPanel__item--submissionFile__link"
 							:href="item.url"
-							:id="nameId"
 						>
 							<submission-files-file
-								:documentType="item.documentType"
+								:document-type="item.documentType"
 								:name="localize(item.name)"
 							/>
 						</a>
@@ -84,7 +84,7 @@
 		<!-- Uploads in progress not yet saved as submission files -->
 		<template v-else>
 			<file-upload-progress
-				:cancelUploadLabel="cancelUploadLabel"
+				:cancel-upload-label="cancelUploadLabel"
 				:errors="item.errors || []"
 				:name="item.name"
 				:progress="item.progress"
diff --git a/src/components/ListPanel/submissionFiles/SubmissionFilesListPanel.vue b/src/components/ListPanel/submissionFiles/SubmissionFilesListPanel.vue
index e69ce127b..5fc65f1db 100644
--- a/src/components/ListPanel/submissionFiles/SubmissionFilesListPanel.vue
+++ b/src/components/ListPanel/submissionFiles/SubmissionFilesListPanel.vue
@@ -22,14 +22,14 @@
 			<template #item="{item}">
 				<slot name="item" :item="item">
 					<submission-files-list-item
-						:apiUrl="apiUrl"
-						:cancelUploadLabel="cancelUploadLabel"
-						:genrePromptLabel="genrePromptLabel"
-						:fileStage="fileStage"
+						:api-url="apiUrl"
+						:cancel-upload-label="cancelUploadLabel"
+						:genre-prompt-label="genrePromptLabel"
+						:file-stage="fileStage"
 						:genres="genres"
 						:item="item"
-						:otherLabel="otherLabel"
-						:stageId="stageId"
+						:other-label="otherLabel"
+						:stage-id="stageId"
 						@cancel="cancelUpload"
 						@edit="edit"
 						@remove="remove"
@@ -39,18 +39,18 @@
 			</template>
 		</list-panel>
 		<file-uploader
+			:id="id + '-uploader'"
 			ref="uploader"
-			:apiUrl="apiUrl"
-			:filenameLocale="primaryLocale"
+			:api-url="apiUrl"
+			:filename-locale="primaryLocale"
 			:files="items"
-			:id="id + '-uploader'"
 			:options="options"
-			:queryParams="{fileStage}"
-			:uploadProgressLabel="uploadProgressLabel"
+			:query-params="{fileStage}"
+			:upload-progress-label="uploadProgressLabel"
 			@updated:files="setFiles"
 		/>
 		<modal
-			:closeLabel="t('common.close')"
+			:close-label="t('common.close')"
 			:name="formModal"
 			:title="editingLabel"
 			:open="isModalOpenedForm"
diff --git a/src/components/ListPanel/submissions/CatalogListItem.vue b/src/components/ListPanel/submissions/CatalogListItem.vue
index a7c1672d1..b67427c87 100644
--- a/src/components/ListPanel/submissions/CatalogListItem.vue
+++ b/src/components/ListPanel/submissions/CatalogListItem.vue
@@ -63,10 +63,10 @@
 		</div>
 		<orderer
 			v-if="isOrdering"
+			:item-id="item.id"
+			:item-title="item.title"
 			@up="$emit('order-up', item)"
 			@down="$emit('order-down', item)"
-			:itemId="item.id"
-			:itemTitle="item.title"
 		/>
 		<div
 			v-if="isSaving || isLoading"
diff --git a/src/components/ListPanel/submissions/CatalogListPanel.vue b/src/components/ListPanel/submissions/CatalogListPanel.vue
index b24f1059e..350b85e0c 100644
--- a/src/components/ListPanel/submissions/CatalogListPanel.vue
+++ b/src/components/ListPanel/submissions/CatalogListPanel.vue
@@ -1,7 +1,7 @@
 <template>
 	<div>
 		<list-panel
-			:isSidebarVisible="isSidebarVisible"
+			:is-sidebar-visible="isSidebarVisible"
 			:items="items"
 			class="listPanel--catalog"
 			:class="{
@@ -15,11 +15,11 @@
 					<spinner v-if="isLoading" />
 					<template #actions>
 						<search
-							:searchPhrase="searchPhrase"
+							:search-phrase="searchPhrase"
 							@search-phrase-changed="setSearchPhrase"
 						/>
 						<pkp-button
-							:isActive="isSidebarVisible"
+							:is-active="isSidebarVisible"
 							@click="isSidebarVisible = !isSidebarVisible"
 						>
 							<icon icon="filter" :inline="true" />
@@ -29,7 +29,7 @@
 							<pkp-button
 								class="listPanel--catalog__orderToggle"
 								icon="sort"
-								:isActive="isOrdering"
+								:is-active="isOrdering"
 								@click="toggleOrdering"
 							>
 								{{ orderingLabel }}
@@ -37,7 +37,7 @@
 							<pkp-button
 								v-if="isOrdering"
 								class="listPanel--catalog__orderCancel"
-								:isWarnable="true"
+								:is-warnable="true"
 								@click="cancelOrdering"
 							>
 								{{ t('common.cancel') }}
@@ -70,7 +70,7 @@
 			</template>
 
 			<template #sidebar>
-				<pkp-header :isOneLine="false">
+				<pkp-header :is-one-line="false">
 					<h3>
 						<icon icon="filter" :inline="true" />
 						{{ t('common.filter') }}
@@ -88,7 +88,7 @@
 						v-for="filter in filterSet.filters"
 						:key="filter.param + filter.value"
 						v-bind="filter"
-						:isFilterActive="isFilterActive(filter.param, filter.value)"
+						:is-filter-active="isFilterActive(filter.param, filter.value)"
 						@add-filter="addFilter"
 						@remove-filter="removeFilter"
 					/>
@@ -104,10 +104,10 @@
 				<catalog-list-item
 					:key="item.id"
 					:item="item"
-					:filterAssocType="filterAssocType"
-					:filterAssocId="filterAssocId"
-					:isOrdering="isOrdering"
-					:apiUrl="apiUrl"
+					:filter-assoc-type="filterAssocType"
+					:filter-assoc-id="filterAssocId"
+					:is-ordering="isOrdering"
+					:api-url="apiUrl"
 					@update:item="updateItem"
 					@order-up="itemOrderUp"
 					@order-down="itemOrderDown"
@@ -116,15 +116,15 @@
 			<template #footer>
 				<pagination
 					v-if="lastPage > 1"
-					:currentPage="currentPage"
-					:isLoading="isLoading"
-					:lastPage="lastPage"
+					:current-page="currentPage"
+					:is-loading="isLoading"
+					:last-page="lastPage"
 					@set-page="setPage"
 				/>
 			</template>
 		</list-panel>
 		<modal
-			:closeLabel="t('common.close')"
+			:close-label="t('common.close')"
 			name="addCatalogEntry"
 			:title="t('submission.catalogEntry.new')"
 			:open="isModalOpenedAddCatalogEntry"
@@ -349,6 +349,21 @@ export default {
 			return this.contextId;
 		},
 	},
+	created() {
+		/**
+		 * When a filter is set, update the sort order to match the setting of
+		 * the series or catalog
+		 *
+		 * Set this watcher before the mounted hook so that the get params are
+		 * updated before the ajax request is made in SubmissionListPanel.mounted.
+		 */
+		this.$watch('activeFilters', function (newVal, oldVal) {
+			if (newVal === oldVal) {
+				return;
+			}
+			this.updateSortOrder();
+		});
+	},
 	methods: {
 		/**
 		 * When the add entry form has been successfully submitted
@@ -613,21 +628,6 @@ export default {
 			this.isOrdering = !this.isOrdering;
 		},
 	},
-	created() {
-		/**
-		 * When a filter is set, update the sort order to match the setting of
-		 * the series or catalog
-		 *
-		 * Set this watcher before the mounted hook so that the get params are
-		 * updated before the ajax request is made in SubmissionListPanel.mounted.
-		 */
-		this.$watch('activeFilters', function (newVal, oldVal) {
-			if (newVal === oldVal) {
-				return;
-			}
-			this.updateSortOrder();
-		});
-	},
 };
 </script>
 
diff --git a/src/components/ListPanel/submissions/SubmissionsListItem.vue b/src/components/ListPanel/submissions/SubmissionsListItem.vue
index 262cc00a7..d821004d8 100644
--- a/src/components/ListPanel/submissions/SubmissionsListItem.vue
+++ b/src/components/ListPanel/submissions/SubmissionsListItem.vue
@@ -97,12 +97,12 @@
 						</div>
 						<badge
 							class="listPanel__item--submission__stage"
-							:isButton="!isArchived"
+							:is-button="!isArchived"
 							:label="currentStageDescription"
 							:stage="isArchived ? '' : currentStage"
-							:isPrimary="isScheduled"
-							:isSuccess="isPublished"
-							:isWarnable="isDeclined"
+							:is-primary="isScheduled"
+							:is-success="isPublished"
+							:is-warnable="isDeclined"
 							@click="filterByStage(activeStage.id)"
 						>
 							{{ currentStageLabel }}
@@ -151,8 +151,8 @@
 				</pkp-button>
 				<expander
 					v-if="!currentUserIsReviewer"
-					:isExpanded="isExpanded"
-					:itemName="currentPublication.authorsStringShort"
+					:is-expanded="isExpanded"
+					:item-name="currentPublication.authorsStringShort"
 					@toggle="isExpanded = !isExpanded"
 				/>
 			</div>
@@ -204,7 +204,7 @@
 				</pkp-button>
 				<pkp-button
 					v-if="currentUserCanDelete"
-					:isWarnable="true"
+					:is-warnable="true"
 					@click="deleteSubmissionPrompt"
 				>
 					{{ t('common.delete') }}
@@ -225,12 +225,12 @@ import dialog from '@/mixins/dialog';
 
 export default {
 	name: 'SubmissionsListItem',
-	mixins: [ajaxError, fetch, localizeSubmission, dialog],
 	components: {
 		Expander,
 		List,
 		ListItem,
 	},
+	mixins: [ajaxError, fetch, localizeSubmission, dialog],
 	props: {
 		apiUrl: {
 			type: String,
diff --git a/src/components/ListPanel/submissions/SubmissionsListPanel.vue b/src/components/ListPanel/submissions/SubmissionsListPanel.vue
index 0cd4ea3f7..a52f13b0b 100644
--- a/src/components/ListPanel/submissions/SubmissionsListPanel.vue
+++ b/src/components/ListPanel/submissions/SubmissionsListPanel.vue
@@ -1,7 +1,7 @@
 <template>
 	<div class="submissionsListPanel">
 		<list-panel
-			:isSidebarVisible="isSidebarVisible"
+			:is-sidebar-visible="isSidebarVisible"
 			:items="items"
 			class="listPanel--submissions"
 		>
@@ -11,11 +11,11 @@
 					<spinner v-if="isLoading" />
 					<template #actions>
 						<search
-							:searchPhrase="searchPhrase"
+							:search-phrase="searchPhrase"
 							@search-phrase-changed="setSearchPhrase"
 						/>
 						<pkp-button
-							:isActive="isSidebarVisible"
+							:is-active="isSidebarVisible"
 							@click="isSidebarVisible = !isSidebarVisible"
 						>
 							<icon icon="filter" :inline="true" />
@@ -32,7 +32,7 @@
 				</pkp-header>
 			</template>
 			<template #sidebar>
-				<pkp-header :isOneLine="false">
+				<pkp-header :is-one-line="false">
 					<h3>
 						<icon icon="filter" :inline="true" />
 						{{ t('common.filter') }}
@@ -47,11 +47,11 @@
 						<h4>{{ filterSet.heading }}</h4>
 					</pkp-header>
 					<component
+						:is="filter.filterType || 'pkp-filter'"
 						v-for="filter in filterSet.filters"
 						:key="filter.param + filter.value"
-						:is="filter.filterType || 'pkp-filter'"
 						v-bind="filter"
-						:isFilterActive="isFilterActive(filter.param, filter.value)"
+						:is-filter-active="isFilterActive(filter.param, filter.value)"
 						@add-filter="addFilter"
 						@remove-filter="removeFilter"
 						@update-filter="addFilter"
@@ -74,9 +74,9 @@
 					<submissions-list-item
 						:key="item.id"
 						:item="item"
-						:apiUrl="apiUrl"
-						:infoUrl="infoUrl"
-						:assignParticipantUrl="assignParticipantUrl"
+						:api-url="apiUrl"
+						:info-url="infoUrl"
+						:assign-participant-url="assignParticipantUrl"
 						@addFilter="addFilter"
 					/>
 				</slot>
@@ -84,9 +84,9 @@
 			<template #footer>
 				<pagination
 					v-if="lastPage > 1"
-					:currentPage="currentPage"
-					:isLoading="isLoading"
-					:lastPage="lastPage"
+					:current-page="currentPage"
+					:is-loading="isLoading"
+					:last-page="lastPage"
 					@set-page="setPage"
 				/>
 			</template>
@@ -106,7 +106,6 @@ import SubmissionsListItem from '@/components/ListPanel/submissions/SubmissionsL
 import fetch from '@/mixins/fetch';
 
 export default {
-	mixins: [fetch],
 	components: {
 		ListPanel,
 		Pagination,
@@ -117,6 +116,7 @@ export default {
 		Search,
 		SubmissionsListItem,
 	},
+	mixins: [fetch],
 	props: {
 		addUrl: {
 			type: String,
@@ -198,6 +198,34 @@ export default {
 			);
 		},
 	},
+	mounted() {
+		/**
+		 * Refresh the list when a submission is updated
+		 */
+		pkp.eventBus.$on('updated:submission', () => this.get());
+
+		/**
+		 * Remove a submission from the list when it is deleted
+		 */
+		pkp.eventBus.$on('deleted:submission', (data) => {
+			if (
+				!data.id ||
+				!this.items.find((submission) => submission.id === data.id)
+			) {
+				return;
+			}
+			this.setItems(
+				this.items.filter((item) => {
+					return data.id !== item.id;
+				}),
+				this.itemsMax - 1,
+			);
+		});
+	},
+	unmounted() {
+		pkp.eventBus.$off('updated:submission');
+		pkp.eventBus.$off('deleted:submission');
+	},
 	methods: {
 		/**
 		 * Add a filter
@@ -317,33 +345,5 @@ export default {
 			return hasRole;
 		},
 	},
-	mounted() {
-		/**
-		 * Refresh the list when a submission is updated
-		 */
-		pkp.eventBus.$on('updated:submission', () => this.get());
-
-		/**
-		 * Remove a submission from the list when it is deleted
-		 */
-		pkp.eventBus.$on('deleted:submission', (data) => {
-			if (
-				!data.id ||
-				!this.items.find((submission) => submission.id === data.id)
-			) {
-				return;
-			}
-			this.setItems(
-				this.items.filter((item) => {
-					return data.id !== item.id;
-				}),
-				this.itemsMax - 1,
-			);
-		});
-	},
-	unmounted() {
-		pkp.eventBus.$off('updated:submission');
-		pkp.eventBus.$off('deleted:submission');
-	},
 };
 </script>
diff --git a/src/components/ListPanel/users/SelectReviewerListItem.vue b/src/components/ListPanel/users/SelectReviewerListItem.vue
index 07c3b487f..fa749ce5c 100644
--- a/src/components/ListPanel/users/SelectReviewerListItem.vue
+++ b/src/components/ListPanel/users/SelectReviewerListItem.vue
@@ -73,8 +73,8 @@
 					<icon icon="lock" :inline="true" />
 					{{ warnOnAssignmentLabel }}
 					<button
-						@click.prevent="unlockAssignment"
 						class="listPanel__item--reviewer__noticeAction"
+						@click.prevent="unlockAssignment"
 					>
 						{{ warnOnAssignmentUnlockLabel }}
 					</button>
@@ -127,8 +127,8 @@
 					</template>
 				</pkp-button>
 				<expander
-					:isExpanded="isExpanded"
-					:itemName="item.fullName"
+					:is-expanded="isExpanded"
+					:item-name="item.fullName"
 					@toggle="isExpanded = !isExpanded"
 				/>
 			</div>
@@ -461,7 +461,8 @@ export default {
 		 */
 		affiliationMatch(affiliation) {
 			return this.authorAffiliations.some(
-				(a) => a && a.toLowerCase() === this.localize(affiliation).toLowerCase()
+				(a) =>
+					a && a.toLowerCase() === this.localize(affiliation).toLowerCase(),
 			);
 		},
 	},
diff --git a/src/components/ListPanel/users/SelectReviewerListPanel.vue b/src/components/ListPanel/users/SelectReviewerListPanel.vue
index 6b96b2c5a..e9af5dcd5 100644
--- a/src/components/ListPanel/users/SelectReviewerListPanel.vue
+++ b/src/components/ListPanel/users/SelectReviewerListPanel.vue
@@ -3,7 +3,7 @@
 		<slot>
 			<list-panel
 				class="listPanel--selectReviewer"
-				:isSidebarVisible="isSidebarVisible"
+				:is-sidebar-visible="isSidebarVisible"
 				:items="currentReviewers"
 			>
 				<template #header>
@@ -14,11 +14,11 @@
 						<spinner v-if="isLoading" />
 						<template #actions>
 							<search
-								:searchPhrase="searchPhrase"
+								:search-phrase="searchPhrase"
 								@search-phrase-changed="setSearchPhrase"
 							/>
 							<pkp-button
-								:isActive="isSidebarVisible"
+								:is-active="isSidebarVisible"
 								@click="isSidebarVisible = !isSidebarVisible"
 							>
 								<icon icon="filter" :inline="true" />
@@ -28,18 +28,18 @@
 					</pkp-header>
 				</template>
 				<template #sidebar>
-					<pkp-header :isOneLine="false">
+					<pkp-header :is-one-line="false">
 						<h2>
 							<icon icon="filter" :inline="true" />
 							{{ t('common.filter') }}
 						</h2>
 					</pkp-header>
 					<component
+						:is="filter.filterType || 'filter-slider'"
 						v-for="filter in filters"
 						:key="filter.param"
-						:is="filter.filterType || 'filter-slider'"
 						v-bind="filter"
-						:isFilterActive="isFilterActive(filter.param, filter.value)"
+						:is-filter-active="isFilterActive(filter.param, filter.value)"
 						@add-filter="addFilter"
 						@update-filter="addFilter"
 						@remove-filter="removeFilter"
@@ -58,46 +58,46 @@
 
 				<template #item="{item}">
 					<select-reviewer-list-item
-						:activeReviewsCountLabel="activeReviewsCountLabel"
-						:activeReviewsLabel="activeReviewsLabel"
-						:assignedToLastRound="lastRoundReviewerIds.includes(item.id)"
-						:assignedToLastRoundLabel="assignedToLastRoundLabel"
-						:authorAffiliations="authorAffiliations"
-						:averageCompletionLabel="averageCompletionLabel"
-						:biographyLabel="biographyLabel"
-						:cancelledReviewsLabel="cancelledReviewsLabel"
-						:completedReviewsLabel="completedReviewsLabel"
-						:currentlyAssigned="currentlyAssigned.includes(item.id)"
-						:currentlyAssignedLabel="currentlyAssignedLabel"
-						:daySinceLastAssignmentLabel="daySinceLastAssignmentLabel"
-						:daysSinceLastAssignmentLabel="daysSinceLastAssignmentLabel"
-						:daysSinceLastAssignmentDescriptionLabel="
+						:key="item.id"
+						:active-reviews-count-label="activeReviewsCountLabel"
+						:active-reviews-label="activeReviewsLabel"
+						:assigned-to-last-round="lastRoundReviewerIds.includes(item.id)"
+						:assigned-to-last-round-label="assignedToLastRoundLabel"
+						:author-affiliations="authorAffiliations"
+						:average-completion-label="averageCompletionLabel"
+						:biography-label="biographyLabel"
+						:cancelled-reviews-label="cancelledReviewsLabel"
+						:completed-reviews-label="completedReviewsLabel"
+						:currently-assigned="currentlyAssigned.includes(item.id)"
+						:currently-assigned-label="currentlyAssignedLabel"
+						:day-since-last-assignment-label="daySinceLastAssignmentLabel"
+						:days-since-last-assignment-label="daysSinceLastAssignmentLabel"
+						:days-since-last-assignment-description-label="
 							daysSinceLastAssignmentDescriptionLabel
 						"
-						:declinedReviewsLabel="declinedReviewsLabel"
-						:gossipLabel="gossipLabel"
-						:key="item.id"
+						:declined-reviews-label="declinedReviewsLabel"
+						:gossip-label="gossipLabel"
 						:item="item"
-						:neverAssignedLabel="neverAssignedLabel"
-						:reassignLabel="reassignLabel"
-						:reassignWithNameLabel="reassignWithNameLabel"
-						:reviewerSameInstitutionLabel="reviewerSameInstitutionLabel"
-						:reviewerRatingLabel="reviewerRatingLabel"
-						:reviewInterestsLabel="reviewInterestsLabel"
-						:selectReviewerLabel="selectReviewerLabel"
-						:selectorName="selectorName"
-						:warnOnAssignment="warnOnAssignment.includes(item.id)"
-						:warnOnAssignmentLabel="warnOnAssignmentLabel"
-						:warnOnAssignmentUnlockLabel="warnOnAssignmentUnlockLabel"
+						:never-assigned-label="neverAssignedLabel"
+						:reassign-label="reassignLabel"
+						:reassign-with-name-label="reassignWithNameLabel"
+						:reviewer-same-institution-label="reviewerSameInstitutionLabel"
+						:reviewer-rating-label="reviewerRatingLabel"
+						:review-interests-label="reviewInterestsLabel"
+						:select-reviewer-label="selectReviewerLabel"
+						:selector-name="selectorName"
+						:warn-on-assignment="warnOnAssignment.includes(item.id)"
+						:warn-on-assignment-label="warnOnAssignmentLabel"
+						:warn-on-assignment-unlock-label="warnOnAssignmentUnlockLabel"
 					/>
 				</template>
 
 				<template #footer>
 					<pagination
 						v-if="lastPage > 1"
-						:currentPage="currentPage"
-						:isLoading="isLoading"
-						:lastPage="lastPage"
+						:current-page="currentPage"
+						:is-loading="isLoading"
+						:last-page="lastPage"
 						@set-page="setPage"
 					/>
 				</template>
@@ -304,6 +304,17 @@ export default {
 			return this.lastRoundReviewers.map((reviewer) => reviewer.id);
 		},
 	},
+	watch: {
+		/**
+		 * Update list whenever a filter is applied
+		 */
+		activeFilters(newVal, oldVal) {
+			this.offset = 0;
+			if (newVal && Object.keys(newVal).length) {
+				this.isSidebarVisible = true;
+			}
+		},
+	},
 	methods: {
 		/**
 		 * Add a filter to the activeFilters object
@@ -355,16 +366,5 @@ export default {
 			});
 		},
 	},
-	watch: {
-		/**
-		 * Update list whenever a filter is applied
-		 */
-		activeFilters(newVal, oldVal) {
-			this.offset = 0;
-			if (newVal && Object.keys(newVal).length) {
-				this.isSidebarVisible = true;
-			}
-		},
-	},
 };
 </script>
diff --git a/src/components/Modal/Dialog.vue b/src/components/Modal/Dialog.vue
index 4e1d296f6..e97239571 100644
--- a/src/components/Modal/Dialog.vue
+++ b/src/components/Modal/Dialog.vue
@@ -1,6 +1,6 @@
 <template>
 	<TransitionRoot as="template" :show="open">
-		<HLDialog @close="onClose" class="modal" :class="'modal--' + type">
+		<HLDialog class="modal" :class="'modal--' + type" @close="onClose">
 			<TransitionChild
 				as="template"
 				enter="ease-out duration-300"
@@ -51,9 +51,9 @@
 									:key="action.label"
 									:element="action.element || 'button'"
 									:href="action.href || null"
-									:isPrimary="action.isPrimary || null"
-									:isWarnable="action.isWarnable || null"
-									:isDisabled="isLoading"
+									:is-primary="action.isPrimary || null"
+									:is-warnable="action.isWarnable || null"
+									:is-disabled="isLoading"
 									@click="
 										action.callback ? fireCallback(action.callback) : null
 									"
@@ -123,6 +123,12 @@ export default {
 			isLoading: false,
 		};
 	},
+	mounted() {},
+	unmounted() {
+		if (typeof this.close === 'function') {
+			this.close();
+		}
+	},
 	methods: {
 		fireCallback(callback) {
 			this.isLoading = true;
@@ -138,11 +144,5 @@ export default {
 			this.$emit('close');
 		},
 	},
-	mounted() {},
-	unmounted() {
-		if (typeof this.close === 'function') {
-			this.close();
-		}
-	},
 };
 </script>
diff --git a/src/components/Modal/Modal.vue b/src/components/Modal/Modal.vue
index 7add71152..fe4bcbaf1 100644
--- a/src/components/Modal/Modal.vue
+++ b/src/components/Modal/Modal.vue
@@ -2,9 +2,9 @@
 	<TransitionRoot as="template" :show="open">
 		<HLDialog
 			:open="open"
-			@close="$emit('close')"
 			class="modal"
 			:class="'modal--' + type"
+			@close="$emit('close')"
 		>
 			<TransitionChild
 				as="template"
diff --git a/src/components/Modal/SideModalBody.vue b/src/components/Modal/SideModalBody.vue
index 9e896b03f..0b0aaabf1 100644
--- a/src/components/Modal/SideModalBody.vue
+++ b/src/components/Modal/SideModalBody.vue
@@ -26,7 +26,7 @@
 						</button>
 					</div>
 					<div class="ml-8 mr-8 flex-grow">
-						<slot name="header" :closeModal="closeModal" />
+						<slot name="header" :close-modal="closeModal" />
 						<!--<DialogTitle
 							class="text-gray-900 font-semibold leading-6 text-base"
 						>
@@ -36,7 +36,7 @@
 				</div>
 			</div>
 			<div class="relative mt-6 flex-1 overflow-y-scroll">
-				<slot :closeModal="closeModal" />
+				<slot :close-modal="closeModal" />
 			</div>
 		</div>
 	</DialogPanel>
@@ -47,9 +47,9 @@ import {DialogPanel /*DialogTitle*/} from '@headlessui/vue';
 import Icon from '@/components/Icon/Icon.vue';
 export default {
 	components: {Icon, DialogPanel /*DialogTitle*/},
+	inject: ['closeModal'],
 	props: {
 		secondary: Boolean,
 	},
-	inject: ['closeModal'],
 };
 </script>
diff --git a/src/components/Search/Search.vue b/src/components/Search/Search.vue
index 9601cb2a7..a7323a884 100644
--- a/src/components/Search/Search.vue
+++ b/src/components/Search/Search.vue
@@ -3,22 +3,22 @@
 		<label>
 			<span class="-screenReader">{{ currentSearchLabel }}</span>
 			<input
+				:id="inputId"
 				type="search"
 				class="pkpSearch__input"
-				@keyup="searchPhraseKeyUp"
-				:id="inputId"
 				:value="searchPhrase"
 				:placeholder="currentSearchLabel"
+				@keyup="searchPhraseKeyUp"
 			/>
 			<span class="pkpSearch__icons">
 				<icon icon="search" class="pkpSearch__icons--search" />
 			</span>
 		</label>
 		<button
-			class="pkpSearch__clear"
 			v-if="searchPhrase"
-			@click.prevent="clearSearchPhrase"
+			class="pkpSearch__clear"
 			:aria-controls="inputId"
+			@click.prevent="clearSearchPhrase"
 		>
 			<icon icon="times" />
 			<span class="-screenReader">{{ t('common.clearSearch') }}</span>
diff --git a/src/components/Steps/Step.vue b/src/components/Steps/Step.vue
index 9220c96a0..c89ff709c 100644
--- a/src/components/Steps/Step.vue
+++ b/src/components/Steps/Step.vue
@@ -7,6 +7,7 @@
 <script>
 import {computed} from 'vue';
 export default {
+	inject: ['registerStep'],
 	props: {
 		id: {
 			type: String,
@@ -24,7 +25,6 @@ export default {
 			isActive: false,
 		};
 	},
-	inject: ['registerStep'],
 	created() {
 		// share state with parent <tabs> component
 		this.unregister = this.registerStep({
diff --git a/src/components/Steps/Steps.vue b/src/components/Steps/Steps.vue
index d7180d351..a4fbbaf9d 100644
--- a/src/components/Steps/Steps.vue
+++ b/src/components/Steps/Steps.vue
@@ -16,23 +16,23 @@
 			<ol class="pkpSteps__buttons" :aria-label="label">
 				<li
 					v-for="(step, i) in steps"
+					:key="step.id"
 					class="pkpSteps__step"
 					:class="{
 						'-screenReader': collapsed && !stepsVisible && current !== step.id,
 					}"
-					:key="step.id"
 				>
 					<template v-if="startedSteps.includes(step.id)">
 						<button
+							:ref="'button' + step.id"
 							class="pkpSteps__step__label"
 							:class="
 								current === step.id
 									? 'pkpSteps__step__label--current'
 									: completedSteps.includes(step.id)
-									? 'pkpSteps__step__label--completed'
-									: ''
+									  ? 'pkpSteps__step__label--completed'
+									  : ''
 							"
-							:ref="'button' + step.id"
 							@click="setCurrent(step.id)"
 						>
 							<span class="pkpSteps__step__number">
@@ -49,7 +49,7 @@
 						</button>
 					</template>
 					<template v-else>
-						<span class="pkpSteps__step__label" :ref="'button' + step.id">
+						<span :ref="'button' + step.id" class="pkpSteps__step__label">
 							<span class="pkpSteps__step__number">{{ i + 1 }}</span>
 							{{ step.label }}
 						</span>
@@ -77,6 +77,21 @@ import debounce from 'debounce';
 import elementResizeEvent from 'element-resize-event';
 
 export default {
+	provide() {
+		return {
+			registerStep: (step) => {
+				this.steps.push(step);
+
+				// Return an unregistration function for cleanup
+				return () => {
+					const index = this.steps.findIndex((_step) => _step.id === step.id);
+					if (index > -1) {
+						this.steps.splice(index, 1);
+					}
+				};
+			},
+		};
+	},
 	props: {
 		current: {
 			type: String,
@@ -138,6 +153,50 @@ export default {
 				.replace('{$total}', this.steps.length);
 		},
 	},
+	watch: {
+		/**
+		 * When switching to the collapsed view, only show the active button
+		 */
+		collapsed(newVal, oldVal) {
+			if (newVal !== oldVal && newVal) {
+				this.stepsVisible = false;
+			}
+		},
+
+		/**
+		 * Update the currently selected step
+		 */
+		current(newVal, oldVal) {
+			this.setChildStepsIsActive(newVal);
+			this.$nextTick(() => {
+				this.setStartedLine();
+				this.setFocusIn(this.$el.querySelector('.pkpStep:not([hidden])'));
+				if (this.scrollTo) {
+					this.$scrollTo(this.scrollTo, 500, {
+						offset: -50,
+					});
+				}
+			});
+		},
+	},
+	mounted() {
+		/**
+		 * Set the step to view when loaded
+		 */
+		this.setChildStepsIsActive(this.current);
+
+		/**
+		 * Toggle collapsed view when there is not enough width
+		 * for the steps to fit
+		 */
+		this.maybeToggleCollapsedView();
+		elementResizeEvent(this.$el, debounce(this.maybeToggleCollapsedView, 100));
+
+		/**
+		 * Set the progress line
+		 */
+		this.$nextTick(() => this.setStartedLine());
+	},
 	methods: {
 		/**
 		 * Check the width of this element and switch between collapsed
@@ -191,65 +250,6 @@ export default {
 			this.$refs.line.style.right = width + 'px';
 		},
 	},
-	watch: {
-		/**
-		 * When switching to the collapsed view, only show the active button
-		 */
-		collapsed(newVal, oldVal) {
-			if (newVal !== oldVal && newVal) {
-				this.stepsVisible = false;
-			}
-		},
-
-		/**
-		 * Update the currently selected step
-		 */
-		current(newVal, oldVal) {
-			this.setChildStepsIsActive(newVal);
-			this.$nextTick(() => {
-				this.setStartedLine();
-				this.setFocusIn(this.$el.querySelector('.pkpStep:not([hidden])'));
-				if (this.scrollTo) {
-					this.$scrollTo(this.scrollTo, 500, {
-						offset: -50,
-					});
-				}
-			});
-		},
-	},
-	provide() {
-		return {
-			registerStep: (step) => {
-				this.steps.push(step);
-
-				// Return an unregistration function for cleanup
-				return () => {
-					const index = this.steps.findIndex((_step) => _step.id === step.id);
-					if (index > -1) {
-						this.steps.splice(index, 1);
-					}
-				};
-			},
-		};
-	},
-	mounted() {
-		/**
-		 * Set the step to view when loaded
-		 */
-		this.setChildStepsIsActive(this.current);
-
-		/**
-		 * Toggle collapsed view when there is not enough width
-		 * for the steps to fit
-		 */
-		this.maybeToggleCollapsedView();
-		elementResizeEvent(this.$el, debounce(this.maybeToggleCollapsedView, 100));
-
-		/**
-		 * Set the progress line
-		 */
-		this.$nextTick(() => this.setStartedLine());
-	},
 };
 </script>
 
diff --git a/src/components/Table/Table.vue b/src/components/Table/Table.vue
index 56d45d598..7ebd9d807 100644
--- a/src/components/Table/Table.vue
+++ b/src/components/Table/Table.vue
@@ -53,7 +53,7 @@
 				:key="'row' + rowIndex"
 				class="pkpTable__row"
 			>
-				<slot :row="row" :rowIndex="rowIndex">
+				<slot :row="row" :row-index="rowIndex">
 					<table-cell
 						v-for="(column, columnIndex) in columns"
 						:key="column.name"
diff --git a/src/components/Tabs/Tab.vue b/src/components/Tabs/Tab.vue
index f871c8102..57613fc3f 100644
--- a/src/components/Tabs/Tab.vue
+++ b/src/components/Tabs/Tab.vue
@@ -1,9 +1,9 @@
 <template>
 	<div
+		:id="id"
 		class="pkpTab"
 		:class="classes"
 		role="tabpanel"
-		:id="id"
 		:aria-labelledby="id + '-button'"
 		:hidden="!isActive"
 	>
@@ -14,6 +14,7 @@
 <script>
 import {computed} from 'vue';
 export default {
+	inject: ['registerTab'],
 	props: {
 		icon: {
 			type: String,
@@ -66,7 +67,6 @@ export default {
 			return classes;
 		},
 	},
-	inject: ['registerTab'],
 	created() {
 		// share state with parent <tabs> component
 		this.unregister = this.registerTab({
diff --git a/src/components/Tabs/Tabs.vue b/src/components/Tabs/Tabs.vue
index 413082dc0..93e194e84 100644
--- a/src/components/Tabs/Tabs.vue
+++ b/src/components/Tabs/Tabs.vue
@@ -3,12 +3,12 @@
 		<div class="pkpTabs__buttons" role="tablist" :aria-label="label">
 			<button
 				v-for="tab in tabs"
-				:aria-selected="currentTab === tab.id"
-				:aria-controls="tab.id"
-				class="pkpTabs__button"
 				:id="tab.id + '-button'"
 				:key="tab.id"
 				:ref="'button' + tab.id"
+				:aria-selected="currentTab === tab.id"
+				:aria-controls="tab.id"
+				class="pkpTabs__button"
 				role="tab"
 				:tabindex="currentTab === tab.id ? '' : -1"
 				@click="setCurrentTab(tab.id)"
diff --git a/src/docs/Component.vue b/src/docs/Component.vue
index ecf7a20cd..d012a53da 100644
--- a/src/docs/Component.vue
+++ b/src/docs/Component.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="component" :class="'component--' + this.name">
+	<div class="component" :class="'component--' + name">
 		<div class="component__titleWrapper">
 			<h1 class="component__title">{{ name }}</h1>
 			<div class="component__settings">
@@ -65,7 +65,7 @@
 			<nav
 				v-if="exampleRoutes.length > 1"
 				class="component__nav"
-				:aria-label="'Examples of ' + this.name"
+				:aria-label="'Examples of ' + name"
 			>
 				<nav-group>
 					<template #heading>Examples</template>
@@ -136,7 +136,7 @@ export default {
 			if (this.$route.params.example) {
 				return this.examples.find(
 					(example) =>
-						this.getRoutePath(example.name) === this.$route.params.example
+						this.getRoutePath(example.name) === this.$route.params.example,
 				);
 			}
 			return this.examples[0];
@@ -190,6 +190,16 @@ export default {
 			return 'auto';
 		},
 	},
+	mounted() {
+		if (this.readme) {
+			marked.setOptions({
+				highlight(code) {
+					return highlightjs.highlightAuto(code).value;
+				},
+			});
+			this.readme = marked.parse(this.readme);
+		}
+	},
 	methods: {
 		/**
 		 * Get the route path from the example name
@@ -212,22 +222,12 @@ export default {
 						.split('\n')
 						.map((line) => (line[0] === '\t' ? line.substr(1) : line))
 						.join('\n'),
-					['html']
+					['html'],
 				).value;
 			}
 			return '';
 		},
 	},
-	mounted() {
-		if (this.readme) {
-			marked.setOptions({
-				highlight(code) {
-					return highlightjs.highlightAuto(code).value;
-				},
-			});
-			this.readme = marked.parse(this.readme);
-		}
-	},
 };
 </script>
 
diff --git a/src/docs/Page.vue b/src/docs/Page.vue
index 4f21dc5a0..89ede7ac0 100644
--- a/src/docs/Page.vue
+++ b/src/docs/Page.vue
@@ -19,6 +19,9 @@ export default {
 			this.loadCurrentPage();
 		},
 	},
+	mounted() {
+		this.loadCurrentPage();
+	},
 	methods: {
 		async loadCurrentPage() {
 			let markdown;
@@ -46,9 +49,6 @@ export default {
 			}
 		},
 	},
-	mounted() {
-		this.loadCurrentPage();
-	},
 };
 </script>
 
diff --git a/src/docs/components/ActionPanel/previews/PreviewActionPanel.vue b/src/docs/components/ActionPanel/previews/PreviewActionPanel.vue
index 4f4c53e26..244a1af52 100644
--- a/src/docs/components/ActionPanel/previews/PreviewActionPanel.vue
+++ b/src/docs/components/ActionPanel/previews/PreviewActionPanel.vue
@@ -8,7 +8,7 @@
 			</p>
 			<template #actions>
 				<pkp-button
-					:isWarnable="true"
+					:is-warnable="true"
 					aria-describedby="delete-title delete-description"
 					@click="openDeleteDialog"
 				>
@@ -30,7 +30,7 @@
 					Clear Template/CSS Cache
 				</pkp-button>
 				<pkp-button
-					:isWarnable="true"
+					:is-warnable="true"
 					aria-describedby="delete-cache-description"
 				>
 					Clear All Cache
@@ -44,7 +44,7 @@
 				again.
 			</p>
 			<template #actions>
-				<pkp-button :isWarnable="true" aria-describedby="sessions-description">
+				<pkp-button :is-warnable="true" aria-describedby="sessions-description">
 					Expire Sessions
 				</pkp-button>
 			</template>
diff --git a/src/docs/components/Badge/previews/PreviewBadge.vue b/src/docs/components/Badge/previews/PreviewBadge.vue
index 1b8ab4330..34969a4ff 100644
--- a/src/docs/components/Badge/previews/PreviewBadge.vue
+++ b/src/docs/components/Badge/previews/PreviewBadge.vue
@@ -1,18 +1,18 @@
 <template>
 	<div class="previewBadge">
 		<badge label="32 submissions">32</badge>
-		<badge label="4 assigned submissions" :isPrimary="true">4</badge>
-		<badge :isSuccess="true">Published</badge>
-		<badge label="7 new messages" :isWarnable="true">7</badge>
-		<badge label="Participant assigned as author" :hasDot="true">Author</badge>
+		<badge label="4 assigned submissions" :is-primary="true">4</badge>
+		<badge :is-success="true">Published</badge>
+		<badge label="7 new messages" :is-warnable="true">7</badge>
+		<badge label="Participant assigned as author" :has-dot="true">Author</badge>
 		<badge
 			label="Currently in the submission stage"
 			stage="submission"
-			:isButton="true"
+			:is-button="true"
 		>
 			Submission
 		</badge>
-		<badge label="View all layout editors" :isButton="true">
+		<badge label="View all layout editors" :is-button="true">
 			Layout Editor
 		</badge>
 		<badge label="25 comments">
diff --git a/src/docs/components/Button/previews/PreviewButton.vue b/src/docs/components/Button/previews/PreviewButton.vue
index ce90dc4f9..af4b963f6 100644
--- a/src/docs/components/Button/previews/PreviewButton.vue
+++ b/src/docs/components/Button/previews/PreviewButton.vue
@@ -1,19 +1,19 @@
 <template>
 	<div class="previewButton">
 		<pkp-button>Submit</pkp-button>
-		<pkp-button :isPrimary="true">Primary</pkp-button>
-		<pkp-button :isWarnable="true">Delete</pkp-button>
+		<pkp-button :is-primary="true">Primary</pkp-button>
+		<pkp-button :is-warnable="true">Delete</pkp-button>
 		<pkp-button>
 			<icon icon="filter" :inline="true" />
 			Filters
 		</pkp-button>
-		<pkp-button :isActive="isActive" @click="isActive = !isActive">
+		<pkp-button :is-active="isActive" @click="isActive = !isActive">
 			Expand Details
 		</pkp-button>
 		<pkp-button element="a" href="https://example.org">
 			Button-like Link
 		</pkp-button>
-		<pkp-button :isLink="true">Link-like Button</pkp-button>
+		<pkp-button :is-link="true">Link-like Button</pkp-button>
 	</div>
 </template>
 
diff --git a/src/docs/components/Chart/previews/PreviewChart.vue b/src/docs/components/Chart/previews/PreviewChart.vue
index 8742b67b6..9850c61fa 100644
--- a/src/docs/components/Chart/previews/PreviewChart.vue
+++ b/src/docs/components/Chart/previews/PreviewChart.vue
@@ -1,6 +1,6 @@
 <template>
 	<div class="previewChart">
-		<line-chart :chartData="chartData" :chartOptions="chartOptions" />
+		<line-chart :chart-data="chartData" :chart-options="chartOptions" />
 	</div>
 </template>
 
diff --git a/src/docs/components/Chart/previews/PreviewDoughnut.vue b/src/docs/components/Chart/previews/PreviewDoughnut.vue
index d285cfeb7..c5ec6126d 100644
--- a/src/docs/components/Chart/previews/PreviewDoughnut.vue
+++ b/src/docs/components/Chart/previews/PreviewDoughnut.vue
@@ -1,6 +1,6 @@
 <template>
 	<div class="previewChart">
-		<doughnut-chart :chartData="chartData" />
+		<doughnut-chart :chart-data="chartData" />
 	</div>
 </template>
 
diff --git a/src/docs/components/Composer/previews/PreviewComposer.vue b/src/docs/components/Composer/previews/PreviewComposer.vue
index 65f850dbc..ade039237 100644
--- a/src/docs/components/Composer/previews/PreviewComposer.vue
+++ b/src/docs/components/Composer/previews/PreviewComposer.vue
@@ -1,42 +1,42 @@
 <template>
 	<div class="previewComposer">
 		<composer
-			addCCLabel="Add CC/BCC"
-			attachedFilesLabel="Attached Files:"
+			add-c-c-label="Add CC/BCC"
+			attached-files-label="Attached Files:"
 			:attachers="attachers"
-			attachFilesLabel="Attach Files"
+			attach-files-label="Attach Files"
 			:attachments="attachments"
 			:bcc="bcc"
-			bccLabel="BCC:"
+			bcc-label="BCC:"
 			:body="body"
-			bodyLabel="Message"
-			:canChangeRecipients="false"
+			body-label="Message"
+			:can-change-recipients="false"
 			:cc="cc"
-			ccLabel="CC:"
-			confirmSwitchLocaleLabel="Are you sure you want to change to {$localeName} to compose this email? Any changes you have made to the subject and body of the email will be lost."
-			deselectLabel="Deselect"
-			:emailTemplates="emailTemplates"
-			:emailTemplatesApiUrl="emailTemplatesApiUrl"
-			findTemplateLabel="Find Template"
-			:initialTemplateKey="initialTemplateKey"
-			insertLabel="Insert"
-			insertModalLabel="Insert Content"
-			insertContentLabel="Content"
-			insertSearchLabel="Find content to insert"
-			loadTemplateLabel="Email Templates"
+			cc-label="CC:"
+			confirm-switch-locale-label="Are you sure you want to change to {$localeName} to compose this email? Any changes you have made to the subject and body of the email will be lost."
+			deselect-label="Deselect"
+			:email-templates="emailTemplates"
+			:email-templates-api-url="emailTemplatesApiUrl"
+			find-template-label="Find Template"
+			:initial-template-key="initialTemplateKey"
+			insert-label="Insert"
+			insert-modal-label="Insert Content"
+			insert-content-label="Content"
+			insert-search-label="Find content to insert"
+			load-template-label="Email Templates"
 			:locale="locale"
 			:locales="locales"
-			moreSearchResultsLabel="{$number} more"
-			removeItemLabel="Remove {$item}"
-			searchingLabel="Searching"
-			searchResultsLabel="Search Results"
+			more-search-results-label="{$number} more"
+			remove-item-label="Remove {$item}"
+			searching-label="Searching"
+			search-results-label="Search Results"
 			:subject="subject"
-			subjectLabel="Subject:"
-			switchToLabel="Switch To:"
-			switchToNamedLanguageLabel="Switch to {$name}"
+			subject-label="Subject:"
+			switch-to-label="Switch To:"
+			switch-to-named-language-label="Switch to {$name}"
 			:to="to"
-			recipientsLabel="To:"
-			:recipientOptions="recipientOptions"
+			recipients-label="To:"
+			:recipient-options="recipientOptions"
 			:recipients="recipientOptions.map((r) => r.value)"
 			:variables="variables"
 			@set="composerChanged"
diff --git a/src/docs/components/DateRange/previews/PreviewDateRange.vue b/src/docs/components/DateRange/previews/PreviewDateRange.vue
index c918a577c..a4a0d98d9 100644
--- a/src/docs/components/DateRange/previews/PreviewDateRange.vue
+++ b/src/docs/components/DateRange/previews/PreviewDateRange.vue
@@ -1,10 +1,10 @@
 <template>
 	<div class="previewDateRange">
 		<date-range
-			:dateEnd="dateEnd"
-			dateEndMax=""
-			:dateStart="dateStart"
-			dateStartMin=""
+			:date-end="dateEnd"
+			date-end-max=""
+			:date-start="dateStart"
+			date-start-min=""
 			:options="[
 				{
 					dateStart: '2018-10-18',
@@ -27,22 +27,22 @@
 					label: 'All dates',
 				},
 			]"
-			uniqueId="example-view-date-range"
-			dateRangeLabel="Date Range"
-			dateFormatInstructionsLabel="Enter each date in the format YYYY-MM-DD. For example, if you want the date for 15 January, 2019, enter 2019-01-15."
-			changeDateRangeLabel="Change date range"
-			sinceDateLabel="Since {$date}"
-			untilDateLabel="Until {$date}"
-			allDatesLabel="All dates"
-			customRangeLabel="Custom Range"
-			fromDateLabel="From"
-			toDateLabel="To"
-			applyLabel="Apply"
-			invalidDateLabel="The date format is not valid. Enter each date in the format YYYY-MM-DD."
-			dateDoesNotExistLabel="One of the dates entered does not exist."
-			invalidDateRangeLabel="The start date must be before the end date."
-			invalidStartDateMinLabel="The start date may not be earlier than {$date}."
-			invalidEndDateMaxLabel="The end date may not be later than {$date}."
+			unique-id="example-view-date-range"
+			date-range-label="Date Range"
+			date-format-instructions-label="Enter each date in the format YYYY-MM-DD. For example, if you want the date for 15 January, 2019, enter 2019-01-15."
+			change-date-range-label="Change date range"
+			since-date-label="Since {$date}"
+			until-date-label="Until {$date}"
+			all-dates-label="All dates"
+			custom-range-label="Custom Range"
+			from-date-label="From"
+			to-date-label="To"
+			apply-label="Apply"
+			invalid-date-label="The date format is not valid. Enter each date in the format YYYY-MM-DD."
+			date-does-not-exist-label="One of the dates entered does not exist."
+			invalid-date-range-label="The start date must be before the end date."
+			invalid-start-date-min-label="The start date may not be earlier than {$date}."
+			invalid-end-date-max-label="The end date may not be later than {$date}."
 			@set-range="setRange"
 		/>
 	</div>
diff --git a/src/docs/components/DecisionPage/previews/PreviewDecisionPage.vue b/src/docs/components/DecisionPage/previews/PreviewDecisionPage.vue
index 36c287ac9..461ad2981 100644
--- a/src/docs/components/DecisionPage/previews/PreviewDecisionPage.vue
+++ b/src/docs/components/DecisionPage/previews/PreviewDecisionPage.vue
@@ -16,7 +16,7 @@
 			</ol>
 		</nav>
 		<div class="app__page--decision">
-			<h1 class="app__pageHeading" ref="pageTitle">
+			<h1 ref="pageTitle" class="app__pageHeading">
 				Accept Submission:
 				<template v-if="steps.length > 1">
 					{{ currentStep.name }}
@@ -50,8 +50,8 @@
 			>
 				<step
 					v-for="step in steps"
-					:key="step.id"
 					:id="step.id"
+					:key="step.id"
 					:label="step.name"
 				>
 					<panel class="decision__stepPanel">
@@ -79,44 +79,44 @@
 							</panel-section>
 							<panel-section v-else>
 								<composer
-									addCCLabel="Add CC/BCC"
+									:id="step.id"
+									add-c-c-label="Add CC/BCC"
 									:attachers="step.attachers"
-									attachedFilesLabel="Attached Files:"
-									attachFilesLabel="Attach Files"
+									attached-files-label="Attached Files:"
+									attach-files-label="Attach Files"
 									:attachments="step.attachments"
 									:bcc="step.bcc"
-									bccLabel="BCC:"
+									bcc-label="BCC:"
 									:body="step.body"
-									bodyLabel="Message"
-									:canChangeRecipients="step.canChangeRecipients"
-									ccLabel="CC:"
+									body-label="Message"
+									:can-change-recipients="step.canChangeRecipients"
+									cc-label="CC:"
 									:cc="step.cc"
-									confirmSwitchLocaleLabel="Are you sure you want to change to {$localeName} to compose this email? Any changes you have made to the subject and body of the email will be lost."
-									deselectLabel="Deselect"
-									:emailTemplates="step.emailTemplates"
-									:emailTemplatesApiUrl="emailTemplatesApiUrl"
+									confirm-switch-locale-label="Are you sure you want to change to {$localeName} to compose this email? Any changes you have made to the subject and body of the email will be lost."
+									deselect-label="Deselect"
+									:email-templates="step.emailTemplates"
+									:email-templates-api-url="emailTemplatesApiUrl"
 									:errors="step.errors"
-									findTemplateLabel="Find Template"
-									:id="step.id"
-									:initialTemplateKey="step.initialTemplateKey"
-									insertLabel="Insert"
-									insertModalLabel="Insert Content"
-									insertContentLabel="Content"
-									insertSearchLabel="Find content to insert"
-									loadTemplateLabel="Email Templates"
+									find-template-label="Find Template"
+									:initial-template-key="step.initialTemplateKey"
+									insert-label="Insert"
+									insert-modal-label="Insert Content"
+									insert-content-label="Content"
+									insert-search-label="Find content to insert"
+									load-template-label="Email Templates"
 									:locale="step.locale"
 									:locales="step.locales"
-									moreSearchResultsLabel="{$number} more"
-									:recipientOptions="step.recipientOptions"
+									more-search-results-label="{$number} more"
+									:recipient-options="step.recipientOptions"
 									:recipients="step.recipients"
-									recipientsLabel="To:"
-									removeItemLabel="Remove {$item}"
-									searchingLabel="Searching"
-									searchResultsLabel="Search Results"
+									recipients-label="To:"
+									remove-item-label="Remove {$item}"
+									searching-label="Searching"
+									search-results-label="Search Results"
 									:subject="step.subject"
-									subjectLabel="Subject:"
-									switchToLabel="Switch To:"
-									switchToNamedLanguageLabel="Switch to {$name}"
+									subject-label="Subject:"
+									switch-to-label="Switch To:"
+									switch-to-named-language-label="Switch to {$name}"
 									:variables="step.variables"
 									@set="updateStep"
 								></composer>
@@ -133,27 +133,27 @@
 								>
 									<template #item="{item}">
 										<select-submission-file-list-item
-											:createdAt="item.createdAt"
-											:documentType="item.documentType"
-											downloadLabel="Download"
-											:genreName="
+											:created-at="item.createdAt"
+											:document-type="item.documentType"
+											download-label="Download"
+											:genre-name="
 												item.genreName ? localize(item.genreName) : ''
 											"
-											:genreIsPrimary="
+											:genre-is-primary="
 												item.genreId &&
 												!item.genreIsDependent &&
 												!item.genreIsSupplementary
 											"
 											:file-id="item.id"
 											:name="localize(item.name)"
-											:uploadedBy="item.uploaderUserName"
+											:uploaded-by="item.uploaderUserName"
 											:url="item.url"
 										>
 											<input
+												v-model="step.selected"
 												type="checkbox"
 												:name="'promoteFile' + item.id"
 												:value="item.id"
-												v-model="step.selected"
 											/>
 										</select-submission-file-list-item>
 									</template>
@@ -216,10 +216,10 @@
 		</div>
 
 		<div
+			ref="notifications"
 			aria-live="polite"
 			aria-atomic="true"
 			class="app__notifications"
-			ref="notifications"
 			role="status"
 		>
 			<transition-group name="app__notification">
diff --git a/src/docs/components/File/previews/PreviewFile.vue b/src/docs/components/File/previews/PreviewFile.vue
index 4d5ffc46c..698d18754 100644
--- a/src/docs/components/File/previews/PreviewFile.vue
+++ b/src/docs/components/File/previews/PreviewFile.vue
@@ -1,26 +1,26 @@
 <template>
 	<div class="previewFile">
 		<file
-			documentType="word"
-			:fileId="283"
+			document-type="word"
+			:file-id="283"
 			name="influence-lactation-final-v2-edited-final.docx"
 		/>
 		<file
-			documentType="word"
-			:fileId="284"
+			document-type="word"
+			:file-id="284"
 			name="ccorino-disclosure-statement.docx"
 		/>
 		<file
-			documentType="excel"
-			:fileId="285"
+			document-type="excel"
+			:file-id="285"
 			name="influence-lactation-dataset-approved.xls"
 		/>
-		<file :fileId="286" name="example-default-document-type-icon.srv" />
+		<file :file-id="286" name="example-default-document-type-icon.srv" />
 		<file
-			documentType="image"
+			document-type="image"
 			name="journal-public-knowledge-consent-form.png"
 		/>
-		<file documentType="epub" name="influence-lactation-proof-reader.epub" />
+		<file document-type="epub" name="influence-lactation-proof-reader.epub" />
 	</div>
 </template>
 
diff --git a/src/docs/components/FileAttacher/previews/ExampleFileAttacher.vue b/src/docs/components/FileAttacher/previews/ExampleFileAttacher.vue
index 8f96cd759..f5f888e31 100644
--- a/src/docs/components/FileAttacher/previews/ExampleFileAttacher.vue
+++ b/src/docs/components/FileAttacher/previews/ExampleFileAttacher.vue
@@ -8,10 +8,10 @@ import FileAttacherFileStage from './ExampleFileAttacherFileStage.vue';
 import FileAttacherLibrary from './ExampleFileAttacherLibrary.vue';
 
 export default {
-	extends: FileAttacher,
 	components: {
 		FileAttacherFileStage,
 		FileAttacherLibrary,
 	},
+	extends: FileAttacher,
 };
 </script>
diff --git a/src/docs/components/FileUploadProgress/previews/PreviewFileUploadProgress.vue b/src/docs/components/FileUploadProgress/previews/PreviewFileUploadProgress.vue
index bcbe16116..5c0417175 100644
--- a/src/docs/components/FileUploadProgress/previews/PreviewFileUploadProgress.vue
+++ b/src/docs/components/FileUploadProgress/previews/PreviewFileUploadProgress.vue
@@ -1,31 +1,31 @@
 <template>
 	<div class="previewFileUploadProgress">
 		<file-upload-progress
-			cancelUploadLabel="Cancel Upload"
+			cancel-upload-label="Cancel Upload"
 			:errors="[]"
 			name="influence-lactation-final-v2-edited-final.docx"
 			:progress="85"
 		/>
 		<file-upload-progress
-			cancelUploadLabel="Cancel Upload"
+			cancel-upload-label="Cancel Upload"
 			:errors="[]"
 			name="ccorino-disclosure-statement.docx"
 			:progress="65"
 		/>
 		<file-upload-progress
-			cancelUploadLabel="Cancel Upload"
+			cancel-upload-label="Cancel Upload"
 			:errors="[]"
 			name="example-default-document-type-icon.srv"
 			:progress="fastValue"
 		/>
 		<file-upload-progress
-			cancelUploadLabel="Cancel Upload"
+			cancel-upload-label="Cancel Upload"
 			:errors="[]"
 			name="influence-lactation-proof-reader.epub"
 			:progress="slowValue"
 		/>
 		<file-upload-progress
-			cancelUploadLabel="Cancel Upload"
+			cancel-upload-label="Cancel Upload"
 			:errors="[
 				'File is too big (20mb). Files larger than 2mb can not be uploaded.',
 			]"
@@ -41,10 +41,10 @@ import FileUploadProgress from '../../../../components/FileUploadProgress/FileUp
 import PreviewProgressBar from '../../ProgressBar/previews/PreviewProgressBar.vue';
 
 export default {
-	extends: PreviewProgressBar,
 	components: {
 		FileUploadProgress,
 	},
+	extends: PreviewProgressBar,
 };
 </script>
 
diff --git a/src/docs/components/FileUploader/previews/PreviewFileUploader.vue b/src/docs/components/FileUploader/previews/PreviewFileUploader.vue
index 4222308c1..12bef58a8 100644
--- a/src/docs/components/FileUploader/previews/PreviewFileUploader.vue
+++ b/src/docs/components/FileUploader/previews/PreviewFileUploader.vue
@@ -10,7 +10,7 @@
 			<file-upload-progress
 				v-for="(file, i) in files"
 				:key="i"
-				cancelUploadLabel="Cancel Upload"
+				cancel-upload-label="Cancel Upload"
 				:errors="file.errors"
 				:name="file.name"
 				:progress="file.progress"
@@ -18,12 +18,12 @@
 			/>
 		</template>
 		<file-uploader
+			id="previewFileUploader"
 			ref="uploader"
-			apiUrl="https://example.org"
+			api-url="https://example.org"
 			:files="files"
-			id="previewFileUploader"
 			:options="options"
-			uploadProgressLabel="Uploading {$percent}% complete"
+			upload-progress-label="Uploading {$percent}% complete"
 			@updated:files="updateFiles"
 		/>
 	</div>
diff --git a/src/docs/components/Filter/previews/PreviewFilter.vue b/src/docs/components/Filter/previews/PreviewFilter.vue
index 1aff4c528..ee887c053 100644
--- a/src/docs/components/Filter/previews/PreviewFilter.vue
+++ b/src/docs/components/Filter/previews/PreviewFilter.vue
@@ -1,7 +1,7 @@
 <template>
 	<div class="previewFilters">
 		<pkp-filter
-			:isFilterActive="isFilterActive('stageIds', 1)"
+			:is-filter-active="isFilterActive('stageIds', 1)"
 			param="stageIds"
 			title="Submission"
 			:value="1"
@@ -9,7 +9,7 @@
 			@remove-filter="removeFilter"
 		/>
 		<pkp-filter
-			:isFilterActive="isFilterActive('stageIds', 2)"
+			:is-filter-active="isFilterActive('stageIds', 2)"
 			param="stageIds"
 			title="Review"
 			:value="2"
@@ -17,7 +17,7 @@
 			@remove-filter="removeFilter"
 		/>
 		<pkp-filter
-			:isFilterActive="isFilterActive('stageIds', 3)"
+			:is-filter-active="isFilterActive('stageIds', 3)"
 			param="stageIds"
 			title="Copyeding"
 			:value="3"
@@ -25,7 +25,7 @@
 			@remove-filter="removeFilter"
 		/>
 		<pkp-filter
-			:isFilterActive="isFilterActive('stageIds', 4)"
+			:is-filter-active="isFilterActive('stageIds', 4)"
 			param="stageIds"
 			title="Production"
 			:value="4"
@@ -61,7 +61,7 @@ export default {
 		removeFilter(param, val) {
 			if (this.activeFilters[param].includes(val)) {
 				this.activeFilters[param] = this.activeFilters[param].filter(
-					(item) => item !== val
+					(item) => item !== val,
 				);
 			}
 		},
diff --git a/src/docs/components/Filter/previews/PreviewFilterAutosuggest.vue b/src/docs/components/Filter/previews/PreviewFilterAutosuggest.vue
index 6d4b91869..13719b21d 100644
--- a/src/docs/components/Filter/previews/PreviewFilterAutosuggest.vue
+++ b/src/docs/components/Filter/previews/PreviewFilterAutosuggest.vue
@@ -1,7 +1,7 @@
 <template>
 	<div class="previewFilters">
 		<filter-autosuggest
-			:autosuggestProps="users"
+			:autosuggest-props="users"
 			component="field-select-users"
 			param="assignedTo"
 			:value="[]"
@@ -10,7 +10,7 @@
 			@remove-filter="removeFilter"
 		/>
 		<filter-autosuggest
-			:autosuggestProps="issues"
+			:autosuggest-props="issues"
 			component="field-select-issues"
 			param="issueIds"
 			:value="[]"
diff --git a/src/docs/components/Filter/previews/PreviewFilterSlider.vue b/src/docs/components/Filter/previews/PreviewFilterSlider.vue
index 5ffb493d0..d06d655e9 100644
--- a/src/docs/components/Filter/previews/PreviewFilterSlider.vue
+++ b/src/docs/components/Filter/previews/PreviewFilterSlider.vue
@@ -1,10 +1,10 @@
 <template>
 	<div class="previewFilters">
 		<pkp-filter-slider
-			:isFilterActive="isFilterActive('activeReviews')"
+			:is-filter-active="isFilterActive('activeReviews')"
 			param="activeReviews"
 			title="Active Reviews"
-			:isVisible="true"
+			:is-visible="true"
 			:value="2"
 			:max="25"
 			:min="0"
@@ -14,10 +14,10 @@
 			@remove-filter="removeFilter"
 		/>
 		<pkp-filter-slider
-			:isFilterActive="isFilterActive('completedReviews')"
+			:is-filter-active="isFilterActive('completedReviews')"
 			param="completedReviews"
 			title="Completed Reviews"
-			:isVisible="true"
+			:is-visible="true"
 			:value="2"
 			:max="100"
 			:min="0"
@@ -27,10 +27,10 @@
 			@remove-filter="removeFilter"
 		/>
 		<pkp-filter-slider
-			:isFilterActive="isFilterActive('daysSinceLastReview')"
+			:is-filter-active="isFilterActive('daysSinceLastReview')"
 			param="daysSinceLastReview"
 			title="Days since last review"
-			:isVisible="true"
+			:is-visible="true"
 			:value="daysSinceLastReview"
 			:max="365"
 			:min="1"
@@ -40,15 +40,15 @@
 			@remove-filter="removeFilter"
 		/>
 		<pkp-filter-slider
-			:isFilterActive="isFilterActive('rating')"
+			:is-filter-active="isFilterActive('rating')"
 			param="rating"
 			title="Reviewer Rating"
-			:isVisible="true"
+			:is-visible="true"
 			:value="3"
 			:max="5"
 			:min="1"
-			:useStars="true"
-			starLabel="Reviewer rating: {$rating}"
+			:use-stars="true"
+			star-label="Reviewer rating: {$rating}"
 			@add-filter="addFilter"
 			@update-filter="addFilter"
 			@remove-filter="removeFilter"
diff --git a/src/docs/components/Filter/previews/PreviewFilterSliderMultirange.vue b/src/docs/components/Filter/previews/PreviewFilterSliderMultirange.vue
index 857d8414d..476fe458a 100644
--- a/src/docs/components/Filter/previews/PreviewFilterSliderMultirange.vue
+++ b/src/docs/components/Filter/previews/PreviewFilterSliderMultirange.vue
@@ -1,29 +1,29 @@
 <template>
 	<div class="previewFilters">
 		<filter-slider-multirange
-			:isFilterActive="isFilterActive('daysSinceLastReview')"
+			:is-filter-active="isFilterActive('daysSinceLastReview')"
 			param="daysSinceLastReview"
 			title="Days since last review"
 			:value="daysSinceLastReview"
 			:max="365"
 			:min="1"
-			valueLabel="{$min}-{$max}"
-			moreThanLabel="More than"
-			lessThanLabel="Less than"
+			value-label="{$min}-{$max}"
+			more-than-label="More than"
+			less-than-label="Less than"
 			@add-filter="addFilter"
 			@update-filter="addFilter"
 			@remove-filter="removeFilter"
 		/>
 		<filter-slider-multirange
-			:isFilterActive="isFilterActive('activeReviewsCurrentlyAssigned')"
+			:is-filter-active="isFilterActive('activeReviewsCurrentlyAssigned')"
 			param="activeReviewsCurrentlyAssigned"
 			title="Days since last review"
 			:value="activeReviewsCurrentlyAssigned"
 			:max="20"
 			:min="1"
-			valueLabel="{$min}-{$max}"
-			moreThanLabel="More than"
-			lessThanLabel="Less than"
+			value-label="{$min}-{$max}"
+			more-than-label="More than"
+			less-than-label="Less than"
 			@add-filter="addFilter"
 			@update-filter="addFilter"
 			@remove-filter="removeFilter"
diff --git a/src/docs/components/Form/fields/FieldArchivingPn/previews/PreviewFieldArchivingPn.vue b/src/docs/components/Form/fields/FieldArchivingPn/previews/PreviewFieldArchivingPn.vue
index b1a23b5ed..64672d04b 100644
--- a/src/docs/components/Form/fields/FieldArchivingPn/previews/PreviewFieldArchivingPn.vue
+++ b/src/docs/components/Form/fields/FieldArchivingPn/previews/PreviewFieldArchivingPn.vue
@@ -9,10 +9,10 @@ import fieldBase from '../../../helpers/field-base';
 import fieldArchivingPn from '../../../helpers/field-archiving-pn';
 
 export default {
-	extends: PreviewFieldBase,
 	components: {
 		FieldArchivingPn,
 	},
+	extends: PreviewFieldBase,
 	data() {
 		return {
 			field: {
diff --git a/src/docs/components/Form/fields/FieldAutosuggestPreset/previews/PreviewFieldAutosuggestPreset.vue b/src/docs/components/Form/fields/FieldAutosuggestPreset/previews/PreviewFieldAutosuggestPreset.vue
index f1e29c76b..28ca5bfeb 100644
--- a/src/docs/components/Form/fields/FieldAutosuggestPreset/previews/PreviewFieldAutosuggestPreset.vue
+++ b/src/docs/components/Form/fields/FieldAutosuggestPreset/previews/PreviewFieldAutosuggestPreset.vue
@@ -9,10 +9,10 @@ import fieldBase from '../../../helpers/field-base';
 import FieldBaseAutosuggest from '../../../helpers/field-autosuggest';
 
 export default {
-	extends: PreviewFieldBase,
 	components: {
 		FieldAutosuggestPreset,
 	},
+	extends: PreviewFieldBase,
 	data() {
 		return {
 			field: {
diff --git a/src/docs/components/Form/fields/FieldBaseAutosuggest/ComponentFieldBaseAutosuggest.vue b/src/docs/components/Form/fields/FieldBaseAutosuggest/ComponentFieldBaseAutosuggest.vue
index a101a6921..6d15b0641 100644
--- a/src/docs/components/Form/fields/FieldBaseAutosuggest/ComponentFieldBaseAutosuggest.vue
+++ b/src/docs/components/Form/fields/FieldBaseAutosuggest/ComponentFieldBaseAutosuggest.vue
@@ -26,14 +26,14 @@ export default {
 					component: markRaw(PreviewFieldBaseAutosuggestDisabled),
 					name: 'Disabled',
 					template: this.extractTemplate(
-						PreviewFieldBaseAutosuggestDisabledTemplate
+						PreviewFieldBaseAutosuggestDisabledTemplate,
 					),
 				},
 				{
 					component: markRaw(PreviewFieldBaseAutosuggestInline),
 					name: 'Inline',
 					template: this.extractTemplate(
-						PreviewFieldBaseAutosuggestInlineTemplate
+						PreviewFieldBaseAutosuggestInlineTemplate,
 					),
 				},
 			],
diff --git a/src/docs/components/Form/fields/FieldBaseAutosuggest/previews/ExampleFieldUserAutosuggest.vue b/src/docs/components/Form/fields/FieldBaseAutosuggest/previews/ExampleFieldUserAutosuggest.vue
index 3cb784aa9..dabe539f9 100644
--- a/src/docs/components/Form/fields/FieldBaseAutosuggest/previews/ExampleFieldUserAutosuggest.vue
+++ b/src/docs/components/Form/fields/FieldBaseAutosuggest/previews/ExampleFieldUserAutosuggest.vue
@@ -9,7 +9,7 @@ export default {
 			// See: https://stackoverflow.com/a/3561711/1723499
 			const regex = new RegExp(
 				this.inputValue.replace(/[-/\\^$*+?.()|[\]{}]/g, '\\$&'),
-				'gi'
+				'gi',
 			);
 
 			const suggestions = items
diff --git a/src/docs/components/Form/fields/FieldBaseAutosuggest/previews/PreviewFieldBaseAutosuggest.vue b/src/docs/components/Form/fields/FieldBaseAutosuggest/previews/PreviewFieldBaseAutosuggest.vue
index 81ab70958..c30754416 100644
--- a/src/docs/components/Form/fields/FieldBaseAutosuggest/previews/PreviewFieldBaseAutosuggest.vue
+++ b/src/docs/components/Form/fields/FieldBaseAutosuggest/previews/PreviewFieldBaseAutosuggest.vue
@@ -9,10 +9,10 @@ import fieldBase from '../../../helpers/field-base';
 import FieldBaseAutosuggest from '../../../helpers/field-autosuggest';
 
 export default {
-	extends: PreviewFieldBase,
 	components: {
 		ExampleFieldUserAutosuggest,
 	},
+	extends: PreviewFieldBase,
 	data() {
 		return {
 			field: {
diff --git a/src/docs/components/Form/fields/FieldBaseAutosuggest/previews/PreviewFieldBaseAutosuggestDisabled.vue b/src/docs/components/Form/fields/FieldBaseAutosuggest/previews/PreviewFieldBaseAutosuggestDisabled.vue
index 86b1c3655..0927d4deb 100644
--- a/src/docs/components/Form/fields/FieldBaseAutosuggest/previews/PreviewFieldBaseAutosuggestDisabled.vue
+++ b/src/docs/components/Form/fields/FieldBaseAutosuggest/previews/PreviewFieldBaseAutosuggestDisabled.vue
@@ -1,7 +1,7 @@
 <template>
 	<example-field-user-autosuggest
 		v-bind="field"
-		:isDisabled="true"
+		:is-disabled="true"
 		:selected="[
 			{
 				value: 1,
diff --git a/src/docs/components/Form/fields/FieldBaseAutosuggest/previews/PreviewFieldBaseAutosuggestInline.vue b/src/docs/components/Form/fields/FieldBaseAutosuggest/previews/PreviewFieldBaseAutosuggestInline.vue
index ade5e2201..5c95bb026 100644
--- a/src/docs/components/Form/fields/FieldBaseAutosuggest/previews/PreviewFieldBaseAutosuggestInline.vue
+++ b/src/docs/components/Form/fields/FieldBaseAutosuggest/previews/PreviewFieldBaseAutosuggestInline.vue
@@ -2,7 +2,7 @@
 	<example-field-user-autosuggest
 		v-bind="field"
 		label="To:"
-		:isLabelInline="true"
+		:is-label-inline="true"
 		@change="change"
 	/>
 </template>
diff --git a/src/docs/components/Form/fields/FieldColor/previews/PreviewFieldColor.vue b/src/docs/components/Form/fields/FieldColor/previews/PreviewFieldColor.vue
index db98b31eb..a3cb25924 100644
--- a/src/docs/components/Form/fields/FieldColor/previews/PreviewFieldColor.vue
+++ b/src/docs/components/Form/fields/FieldColor/previews/PreviewFieldColor.vue
@@ -9,10 +9,10 @@ import fieldBase from '../../../helpers/field-base';
 import fieldColor from '../../../helpers/field-color';
 
 export default {
-	extends: PreviewFieldBase,
 	components: {
 		FieldColor,
 	},
+	extends: PreviewFieldBase,
 	data() {
 		return {
 			field: {
diff --git a/src/docs/components/Form/fields/FieldHtml/previews/PreviewFieldHtml.vue b/src/docs/components/Form/fields/FieldHtml/previews/PreviewFieldHtml.vue
index 6ab0ede15..b147f1895 100644
--- a/src/docs/components/Form/fields/FieldHtml/previews/PreviewFieldHtml.vue
+++ b/src/docs/components/Form/fields/FieldHtml/previews/PreviewFieldHtml.vue
@@ -9,10 +9,10 @@ import fieldBase from '../../../helpers/field-base';
 import field from '../../../helpers/field-html-lorem';
 
 export default {
-	extends: PreviewFieldBase,
 	components: {
 		FieldHtml,
 	},
+	extends: PreviewFieldBase,
 	data() {
 		return {
 			field: {
diff --git a/src/docs/components/Form/fields/FieldMetadataSetting/previews/PreviewFieldMetadataSetting.vue b/src/docs/components/Form/fields/FieldMetadataSetting/previews/PreviewFieldMetadataSetting.vue
index e6b91fbe8..cff30f037 100644
--- a/src/docs/components/Form/fields/FieldMetadataSetting/previews/PreviewFieldMetadataSetting.vue
+++ b/src/docs/components/Form/fields/FieldMetadataSetting/previews/PreviewFieldMetadataSetting.vue
@@ -9,10 +9,10 @@ import fieldBase from '../../../helpers/field-base';
 import fieldMetadata from '../../../helpers/field-metadata';
 
 export default {
-	extends: PreviewFieldBase,
 	components: {
 		FieldMetadataSetting,
 	},
+	extends: PreviewFieldBase,
 	data() {
 		return {
 			field: {
diff --git a/src/docs/components/Form/fields/FieldOptions/previews/PreviewFieldOptions.vue b/src/docs/components/Form/fields/FieldOptions/previews/PreviewFieldOptions.vue
index 5026f4731..5ace503ae 100644
--- a/src/docs/components/Form/fields/FieldOptions/previews/PreviewFieldOptions.vue
+++ b/src/docs/components/Form/fields/FieldOptions/previews/PreviewFieldOptions.vue
@@ -9,10 +9,10 @@ import fieldBase from '../../../helpers/field-base';
 import field from '../../../helpers/field-options-user-locales';
 
 export default {
-	extends: PreviewFieldBase,
 	components: {
 		FieldOptions,
 	},
+	extends: PreviewFieldBase,
 	data() {
 		return {
 			field: {
diff --git a/src/docs/components/Form/fields/FieldOptions/previews/PreviewFieldOptionsConfirm.vue b/src/docs/components/Form/fields/FieldOptions/previews/PreviewFieldOptionsConfirm.vue
index da1b07503..182efc374 100644
--- a/src/docs/components/Form/fields/FieldOptions/previews/PreviewFieldOptionsConfirm.vue
+++ b/src/docs/components/Form/fields/FieldOptions/previews/PreviewFieldOptionsConfirm.vue
@@ -9,10 +9,10 @@ import fieldBase from '../../../helpers/field-base';
 import field from '../../../helpers/field-options-confirmation';
 
 export default {
-	extends: PreviewFieldBase,
 	components: {
 		FieldOptions,
 	},
+	extends: PreviewFieldBase,
 	data() {
 		return {
 			field: {
diff --git a/src/docs/components/Form/fields/FieldOptions/previews/PreviewFieldOptionsOrderable.vue b/src/docs/components/Form/fields/FieldOptions/previews/PreviewFieldOptionsOrderable.vue
index 655f06e57..a215f6c43 100644
--- a/src/docs/components/Form/fields/FieldOptions/previews/PreviewFieldOptionsOrderable.vue
+++ b/src/docs/components/Form/fields/FieldOptions/previews/PreviewFieldOptionsOrderable.vue
@@ -9,10 +9,10 @@ import fieldBase from '../../../helpers/field-base';
 import field from '../../../helpers/field-options-orderable';
 
 export default {
-	extends: PreviewFieldBase,
 	components: {
 		FieldOptions,
 	},
+	extends: PreviewFieldBase,
 	data() {
 		return {
 			field: {
diff --git a/src/docs/components/Form/fields/FieldOptions/previews/PreviewFieldOptionsRadio.vue b/src/docs/components/Form/fields/FieldOptions/previews/PreviewFieldOptionsRadio.vue
index 50796a782..d1626156e 100644
--- a/src/docs/components/Form/fields/FieldOptions/previews/PreviewFieldOptionsRadio.vue
+++ b/src/docs/components/Form/fields/FieldOptions/previews/PreviewFieldOptionsRadio.vue
@@ -9,10 +9,10 @@ import fieldBase from '../../../helpers/field-base';
 import field from '../../../helpers/field-options-emails';
 
 export default {
-	extends: PreviewFieldBase,
 	components: {
 		FieldOptions,
 	},
+	extends: PreviewFieldBase,
 	data() {
 		return {
 			field: {
diff --git a/src/docs/components/Form/fields/FieldPreparedContent/previews/PreviewFieldPreparedContent.vue b/src/docs/components/Form/fields/FieldPreparedContent/previews/PreviewFieldPreparedContent.vue
index 1b3156e86..ce38c4b08 100644
--- a/src/docs/components/Form/fields/FieldPreparedContent/previews/PreviewFieldPreparedContent.vue
+++ b/src/docs/components/Form/fields/FieldPreparedContent/previews/PreviewFieldPreparedContent.vue
@@ -1,11 +1,11 @@
 <template>
 	<field-prepared-content
 		v-bind="field"
-		insertLabel="Insert"
-		insertModalLabel="Insert Content"
-		:preparedContent="preparedContent"
-		preparedContentLabel="Content"
-		searchLabel="Find content to insert"
+		insert-label="Insert"
+		insert-modal-label="Insert Content"
+		:prepared-content="preparedContent"
+		prepared-content-label="Content"
+		search-label="Find content to insert"
 		@change="change"
 	/>
 </template>
@@ -18,10 +18,10 @@ import field from '../../../helpers/field-rich-textarea-description';
 import insertContent from '../../../../../data/insertContent';
 
 export default {
-	extends: PreviewFieldBase,
 	components: {
 		FieldPreparedContent,
 	},
+	extends: PreviewFieldBase,
 	data() {
 		return {
 			field: {
diff --git a/src/docs/components/Form/fields/FieldPubId/ExampleFieldPubId.vue b/src/docs/components/Form/fields/FieldPubId/ExampleFieldPubId.vue
index b2209b84b..fb591a8e9 100644
--- a/src/docs/components/Form/fields/FieldPubId/ExampleFieldPubId.vue
+++ b/src/docs/components/Form/fields/FieldPubId/ExampleFieldPubId.vue
@@ -4,10 +4,10 @@ import FieldPubId from '@/components/Form/fields/FieldPubId.vue';
 import config from './config';
 
 export default {
-	extends: ExampleFieldBase,
 	components: {
 		FieldPubId,
 	},
+	extends: ExampleFieldBase,
 	data() {
 		return {
 			...config,
diff --git a/src/docs/components/Form/fields/FieldPubId/previews/PreviewFieldPubId.vue b/src/docs/components/Form/fields/FieldPubId/previews/PreviewFieldPubId.vue
index 8a7bf4006..5da82ec55 100644
--- a/src/docs/components/Form/fields/FieldPubId/previews/PreviewFieldPubId.vue
+++ b/src/docs/components/Form/fields/FieldPubId/previews/PreviewFieldPubId.vue
@@ -9,10 +9,10 @@ import fieldBase from '../../../helpers/field-base';
 import field from '../../../helpers/field-urn';
 
 export default {
-	extends: PreviewFieldBase,
 	components: {
 		FieldPubId,
 	},
+	extends: PreviewFieldBase,
 	data() {
 		return {
 			field: {
diff --git a/src/docs/components/Form/fields/FieldRadioInput/previews/PreviewFieldRadioInput.vue b/src/docs/components/Form/fields/FieldRadioInput/previews/PreviewFieldRadioInput.vue
index 5ec522c11..c70690c21 100644
--- a/src/docs/components/Form/fields/FieldRadioInput/previews/PreviewFieldRadioInput.vue
+++ b/src/docs/components/Form/fields/FieldRadioInput/previews/PreviewFieldRadioInput.vue
@@ -9,10 +9,10 @@ import fieldBase from '../../../helpers/field-base';
 import field from '../../../helpers/field-radio-input';
 
 export default {
-	extends: PreviewFieldBase,
 	components: {
 		FieldRadioInput,
 	},
+	extends: PreviewFieldBase,
 	data() {
 		return {
 			field: {
diff --git a/src/docs/components/Form/fields/FieldRichText/previews/PreviewFieldRichText.vue b/src/docs/components/Form/fields/FieldRichText/previews/PreviewFieldRichText.vue
index 1ba685ed3..3e06f3971 100644
--- a/src/docs/components/Form/fields/FieldRichText/previews/PreviewFieldRichText.vue
+++ b/src/docs/components/Form/fields/FieldRichText/previews/PreviewFieldRichText.vue
@@ -8,10 +8,10 @@ import PreviewFieldBase from '../../FieldBase/previews/PreviewFieldBase.vue';
 import fieldBase from '../../../helpers/field-base';
 
 export default {
-	extends: PreviewFieldBase,
 	components: {
 		FieldRichText,
 	},
+	extends: PreviewFieldBase,
 	data() {
 		return {
 			field: {
diff --git a/src/docs/components/Form/fields/FieldRichTextarea/ComponentFieldRichTextarea.vue b/src/docs/components/Form/fields/FieldRichTextarea/ComponentFieldRichTextarea.vue
index 3d174b22a..89b8b9f23 100644
--- a/src/docs/components/Form/fields/FieldRichTextarea/ComponentFieldRichTextarea.vue
+++ b/src/docs/components/Form/fields/FieldRichTextarea/ComponentFieldRichTextarea.vue
@@ -35,21 +35,21 @@ export default {
 					component: markRaw(PreviewFieldRichTextareaMediumToolbar),
 					name: 'Medium Toolbar',
 					template: this.extractTemplate(
-						PreviewFieldRichTextareaMediumToolbarTemplate
+						PreviewFieldRichTextareaMediumToolbarTemplate,
 					),
 				},
 				{
 					component: markRaw(PreviewFieldRichTextareaHeavyToolbar),
 					name: 'Heavy Toolbar',
 					template: this.extractTemplate(
-						PreviewFieldRichTextareaHeavyToolbarTemplate
+						PreviewFieldRichTextareaHeavyToolbarTemplate,
 					),
 				},
 				{
 					component: markRaw(PreviewFieldRichTextareaWordLimit),
 					name: 'Word Limit',
 					template: this.extractTemplate(
-						PreviewFieldRichTextareaWordLimitTemplate
+						PreviewFieldRichTextareaWordLimitTemplate,
 					),
 				},
 			],
diff --git a/src/docs/components/Form/fields/FieldRichTextarea/previews/PreviewFieldRichTextarea.vue b/src/docs/components/Form/fields/FieldRichTextarea/previews/PreviewFieldRichTextarea.vue
index c5401b945..eb04d1968 100644
--- a/src/docs/components/Form/fields/FieldRichTextarea/previews/PreviewFieldRichTextarea.vue
+++ b/src/docs/components/Form/fields/FieldRichTextarea/previews/PreviewFieldRichTextarea.vue
@@ -9,10 +9,10 @@ import fieldBase from '../../../helpers/field-base';
 import field from '../../../helpers/field-rich-textarea-bio';
 
 export default {
-	extends: PreviewFieldBase,
 	components: {
 		FieldRichTextarea,
 	},
+	extends: PreviewFieldBase,
 	data() {
 		return {
 			field: {
diff --git a/src/docs/components/Form/fields/FieldRichTextarea/previews/PreviewFieldRichTextareaHeavyToolbar.vue b/src/docs/components/Form/fields/FieldRichTextarea/previews/PreviewFieldRichTextareaHeavyToolbar.vue
index 5690ef0f6..7ebe6c80a 100644
--- a/src/docs/components/Form/fields/FieldRichTextarea/previews/PreviewFieldRichTextareaHeavyToolbar.vue
+++ b/src/docs/components/Form/fields/FieldRichTextarea/previews/PreviewFieldRichTextareaHeavyToolbar.vue
@@ -15,10 +15,10 @@ import fieldBase from '../../../helpers/field-base';
 import field from '../../../helpers/field-rich-textarea-description';
 
 export default {
-	extends: PreviewFieldBase,
 	components: {
 		FieldRichTextarea,
 	},
+	extends: PreviewFieldBase,
 	data() {
 		return {
 			field: {
diff --git a/src/docs/components/Form/fields/FieldRichTextarea/previews/PreviewFieldRichTextareaLarge.vue b/src/docs/components/Form/fields/FieldRichTextarea/previews/PreviewFieldRichTextareaLarge.vue
index a1e3dd383..2c7062f98 100644
--- a/src/docs/components/Form/fields/FieldRichTextarea/previews/PreviewFieldRichTextareaLarge.vue
+++ b/src/docs/components/Form/fields/FieldRichTextarea/previews/PreviewFieldRichTextareaLarge.vue
@@ -9,10 +9,10 @@ import fieldBase from '../../../helpers/field-base';
 import field from '../../../helpers/field-rich-textarea-bio';
 
 export default {
-	extends: PreviewFieldBase,
 	components: {
 		FieldRichTextarea,
 	},
+	extends: PreviewFieldBase,
 	data() {
 		return {
 			field: {
diff --git a/src/docs/components/Form/fields/FieldRichTextarea/previews/PreviewFieldRichTextareaMediumToolbar.vue b/src/docs/components/Form/fields/FieldRichTextarea/previews/PreviewFieldRichTextareaMediumToolbar.vue
index 567f3130a..51cc18871 100644
--- a/src/docs/components/Form/fields/FieldRichTextarea/previews/PreviewFieldRichTextareaMediumToolbar.vue
+++ b/src/docs/components/Form/fields/FieldRichTextarea/previews/PreviewFieldRichTextareaMediumToolbar.vue
@@ -15,10 +15,10 @@ import fieldBase from '../../../helpers/field-base';
 import field from '../../../helpers/field-rich-textarea-bio';
 
 export default {
-	extends: PreviewFieldBase,
 	components: {
 		FieldRichTextarea,
 	},
+	extends: PreviewFieldBase,
 	data() {
 		return {
 			field: {
diff --git a/src/docs/components/Form/fields/FieldRichTextarea/previews/PreviewFieldRichTextareaWordLimit.vue b/src/docs/components/Form/fields/FieldRichTextarea/previews/PreviewFieldRichTextareaWordLimit.vue
index f239761f9..256c9238c 100644
--- a/src/docs/components/Form/fields/FieldRichTextarea/previews/PreviewFieldRichTextareaWordLimit.vue
+++ b/src/docs/components/Form/fields/FieldRichTextarea/previews/PreviewFieldRichTextareaWordLimit.vue
@@ -9,10 +9,10 @@ import fieldBase from '../../../helpers/field-base';
 import field from '../../../helpers/field-rich-textarea-abstract';
 
 export default {
-	extends: PreviewFieldBase,
 	components: {
 		FieldRichTextarea,
 	},
+	extends: PreviewFieldBase,
 	data() {
 		return {
 			field: {
diff --git a/src/docs/components/Form/fields/FieldSelect/previews/PreviewFieldSelect.vue b/src/docs/components/Form/fields/FieldSelect/previews/PreviewFieldSelect.vue
index c237ba90c..5aa34ecfa 100644
--- a/src/docs/components/Form/fields/FieldSelect/previews/PreviewFieldSelect.vue
+++ b/src/docs/components/Form/fields/FieldSelect/previews/PreviewFieldSelect.vue
@@ -9,10 +9,10 @@ import fieldBase from '../../../helpers/field-base';
 import field from '../../../helpers/field-select-country';
 
 export default {
-	extends: PreviewFieldBase,
 	components: {
 		FieldSelect,
 	},
+	extends: PreviewFieldBase,
 	data() {
 		return {
 			field: {
diff --git a/src/docs/components/Form/fields/FieldSelectIssue/ComponentFieldSelectIssue.vue b/src/docs/components/Form/fields/FieldSelectIssue/ComponentFieldSelectIssue.vue
index 4535caacd..ab219dd0c 100644
--- a/src/docs/components/Form/fields/FieldSelectIssue/ComponentFieldSelectIssue.vue
+++ b/src/docs/components/Form/fields/FieldSelectIssue/ComponentFieldSelectIssue.vue
@@ -26,14 +26,14 @@ export default {
 					component: markRaw(PreviewFieldSelectIssuePublished),
 					name: 'Published',
 					template: this.extractTemplate(
-						PreviewFieldSelectIssuePublishedTemplate
+						PreviewFieldSelectIssuePublishedTemplate,
 					),
 				},
 				{
 					component: markRaw(PreviewFieldSelectIssueScheduled),
 					name: 'Scheduled',
 					template: this.extractTemplate(
-						PreviewFieldSelectIssueScheduledTemplate
+						PreviewFieldSelectIssueScheduledTemplate,
 					),
 				},
 			],
diff --git a/src/docs/components/Form/fields/FieldSelectIssue/previews/PreviewFieldSelectIssue.vue b/src/docs/components/Form/fields/FieldSelectIssue/previews/PreviewFieldSelectIssue.vue
index bdea3571f..e4b009518 100644
--- a/src/docs/components/Form/fields/FieldSelectIssue/previews/PreviewFieldSelectIssue.vue
+++ b/src/docs/components/Form/fields/FieldSelectIssue/previews/PreviewFieldSelectIssue.vue
@@ -9,10 +9,10 @@ import fieldBase from '../../../helpers/field-base';
 import field from '../../../helpers/field-select-issue';
 
 export default {
-	extends: PreviewFieldBase,
 	components: {
 		FieldSelectIssue,
 	},
+	extends: PreviewFieldBase,
 	data() {
 		return {
 			field: {
diff --git a/src/docs/components/Form/fields/FieldSelectIssue/previews/PreviewFieldSelectIssuePublished.vue b/src/docs/components/Form/fields/FieldSelectIssue/previews/PreviewFieldSelectIssuePublished.vue
index 45e19f91a..87e4650c7 100644
--- a/src/docs/components/Form/fields/FieldSelectIssue/previews/PreviewFieldSelectIssuePublished.vue
+++ b/src/docs/components/Form/fields/FieldSelectIssue/previews/PreviewFieldSelectIssuePublished.vue
@@ -9,10 +9,10 @@ import fieldBase from '../../../helpers/field-base';
 import field from '../../../helpers/field-select-issue';
 
 export default {
-	extends: PreviewFieldBase,
 	components: {
 		FieldSelectIssue,
 	},
+	extends: PreviewFieldBase,
 	data() {
 		return {
 			field: {
diff --git a/src/docs/components/Form/fields/FieldSelectIssue/previews/PreviewFieldSelectIssueScheduled.vue b/src/docs/components/Form/fields/FieldSelectIssue/previews/PreviewFieldSelectIssueScheduled.vue
index 04b31ce33..cd14d42b3 100644
--- a/src/docs/components/Form/fields/FieldSelectIssue/previews/PreviewFieldSelectIssueScheduled.vue
+++ b/src/docs/components/Form/fields/FieldSelectIssue/previews/PreviewFieldSelectIssueScheduled.vue
@@ -9,10 +9,10 @@ import fieldBase from '../../../helpers/field-base';
 import field from '../../../helpers/field-select-issue';
 
 export default {
-	extends: PreviewFieldBase,
 	components: {
 		FieldSelectIssue,
 	},
+	extends: PreviewFieldBase,
 	data() {
 		return {
 			field: {
diff --git a/src/docs/components/Form/fields/FieldShowEnsuringLink/previews/PreviewFieldShowEnsuringLink.vue b/src/docs/components/Form/fields/FieldShowEnsuringLink/previews/PreviewFieldShowEnsuringLink.vue
index 9aa810cce..1fa962da5 100644
--- a/src/docs/components/Form/fields/FieldShowEnsuringLink/previews/PreviewFieldShowEnsuringLink.vue
+++ b/src/docs/components/Form/fields/FieldShowEnsuringLink/previews/PreviewFieldShowEnsuringLink.vue
@@ -9,10 +9,10 @@ import fieldBase from '../../../helpers/field-base';
 import field from '../../../helpers/field-show-ensuring-link';
 
 export default {
-	extends: PreviewFieldBase,
 	components: {
 		FieldShowEnsuringLink,
 	},
+	extends: PreviewFieldBase,
 	data() {
 		return {
 			field: {
diff --git a/src/docs/components/Form/fields/FieldText/previews/PreviewFieldText.vue b/src/docs/components/Form/fields/FieldText/previews/PreviewFieldText.vue
index ae41c8ee3..4ca993df9 100644
--- a/src/docs/components/Form/fields/FieldText/previews/PreviewFieldText.vue
+++ b/src/docs/components/Form/fields/FieldText/previews/PreviewFieldText.vue
@@ -9,10 +9,10 @@ import fieldBase from '../../../helpers/field-base';
 import field from '../../../helpers/field-text-given-name';
 
 export default {
-	extends: PreviewFieldBase,
 	components: {
 		FieldText,
 	},
+	extends: PreviewFieldBase,
 	data() {
 		return {
 			field: {
diff --git a/src/docs/components/Form/fields/FieldText/previews/PreviewFieldTextLarge.vue b/src/docs/components/Form/fields/FieldText/previews/PreviewFieldTextLarge.vue
index 344409ee0..76eb6f1af 100644
--- a/src/docs/components/Form/fields/FieldText/previews/PreviewFieldTextLarge.vue
+++ b/src/docs/components/Form/fields/FieldText/previews/PreviewFieldTextLarge.vue
@@ -9,10 +9,10 @@ import fieldBase from '../../../helpers/field-base';
 import field from '../../../helpers/field-text-doi-prefix';
 
 export default {
-	extends: PreviewFieldBase,
 	components: {
 		FieldText,
 	},
+	extends: PreviewFieldBase,
 	data() {
 		return {
 			field: {
diff --git a/src/docs/components/Form/fields/FieldText/previews/PreviewFieldTextOptIntoEdit.vue b/src/docs/components/Form/fields/FieldText/previews/PreviewFieldTextOptIntoEdit.vue
index 083312e6c..e00e392ee 100644
--- a/src/docs/components/Form/fields/FieldText/previews/PreviewFieldTextOptIntoEdit.vue
+++ b/src/docs/components/Form/fields/FieldText/previews/PreviewFieldTextOptIntoEdit.vue
@@ -2,8 +2,8 @@
 	<field-text
 		v-bind="field"
 		label="Copyright Holder"
-		:optIntoEdit="true"
-		optIntoEditLabel="Override"
+		:opt-into-edit="true"
+		opt-into-edit-label="Override"
 		@change="change"
 	/>
 </template>
@@ -15,10 +15,10 @@ import fieldBase from '../../../helpers/field-base';
 import field from '../../../helpers/field-text-given-name';
 
 export default {
-	extends: PreviewFieldBase,
 	components: {
 		FieldText,
 	},
+	extends: PreviewFieldBase,
 	data() {
 		return {
 			field: {
diff --git a/src/docs/components/Form/fields/FieldText/previews/PreviewFieldTextPrefix.vue b/src/docs/components/Form/fields/FieldText/previews/PreviewFieldTextPrefix.vue
index e0cfaa0ad..0825ed769 100644
--- a/src/docs/components/Form/fields/FieldText/previews/PreviewFieldTextPrefix.vue
+++ b/src/docs/components/Form/fields/FieldText/previews/PreviewFieldTextPrefix.vue
@@ -15,10 +15,10 @@ import fieldBase from '../../../helpers/field-base';
 import field from '../../../helpers/field-text-given-name';
 
 export default {
-	extends: PreviewFieldBase,
 	components: {
 		FieldText,
 	},
+	extends: PreviewFieldBase,
 	data() {
 		return {
 			field: {
diff --git a/src/docs/components/Form/fields/FieldText/previews/PreviewFieldTextSmall.vue b/src/docs/components/Form/fields/FieldText/previews/PreviewFieldTextSmall.vue
index 5cbd29929..37a8d7adb 100644
--- a/src/docs/components/Form/fields/FieldText/previews/PreviewFieldTextSmall.vue
+++ b/src/docs/components/Form/fields/FieldText/previews/PreviewFieldTextSmall.vue
@@ -9,10 +9,10 @@ import fieldBase from '../../../helpers/field-base';
 import field from '../../../helpers/field-text-doi-prefix';
 
 export default {
-	extends: PreviewFieldBase,
 	components: {
 		FieldText,
 	},
+	extends: PreviewFieldBase,
 	data() {
 		return {
 			field: {
diff --git a/src/docs/components/Form/fields/FieldTextarea/previews/PreviewFieldTextarea.vue b/src/docs/components/Form/fields/FieldTextarea/previews/PreviewFieldTextarea.vue
index 8204686bc..45e1ef2a2 100644
--- a/src/docs/components/Form/fields/FieldTextarea/previews/PreviewFieldTextarea.vue
+++ b/src/docs/components/Form/fields/FieldTextarea/previews/PreviewFieldTextarea.vue
@@ -9,10 +9,10 @@ import fieldBase from '../../../helpers/field-base';
 import field from '../../../helpers/field-textarea-metatags';
 
 export default {
-	extends: PreviewFieldBase,
 	components: {
 		FieldTextarea,
 	},
+	extends: PreviewFieldBase,
 	data() {
 		return {
 			field: {
diff --git a/src/docs/components/Form/fields/FieldTextarea/previews/PreviewFieldTextareaLarge.vue b/src/docs/components/Form/fields/FieldTextarea/previews/PreviewFieldTextareaLarge.vue
index 8fec200d2..3aa6e301b 100644
--- a/src/docs/components/Form/fields/FieldTextarea/previews/PreviewFieldTextareaLarge.vue
+++ b/src/docs/components/Form/fields/FieldTextarea/previews/PreviewFieldTextareaLarge.vue
@@ -14,10 +14,10 @@ import fieldBase from '../../../helpers/field-base';
 import field from '../../../helpers/field-textarea-metatags';
 
 export default {
-	extends: PreviewFieldBase,
 	components: {
 		FieldTextarea,
 	},
+	extends: PreviewFieldBase,
 	data() {
 		return {
 			field: {
diff --git a/src/docs/components/Form/fields/FieldTextarea/previews/PreviewFieldTextareaSmall.vue b/src/docs/components/Form/fields/FieldTextarea/previews/PreviewFieldTextareaSmall.vue
index cd617745a..a018c27a4 100644
--- a/src/docs/components/Form/fields/FieldTextarea/previews/PreviewFieldTextareaSmall.vue
+++ b/src/docs/components/Form/fields/FieldTextarea/previews/PreviewFieldTextareaSmall.vue
@@ -14,10 +14,10 @@ import fieldBase from '../../../helpers/field-base';
 import field from '../../../helpers/field-textarea-metatags';
 
 export default {
-	extends: PreviewFieldBase,
 	components: {
 		FieldTextarea,
 	},
+	extends: PreviewFieldBase,
 	data() {
 		return {
 			field: {
diff --git a/src/docs/components/Form/fields/FieldUpload/previews/PreviewFieldUpload.vue b/src/docs/components/Form/fields/FieldUpload/previews/PreviewFieldUpload.vue
index 16b81a89b..23110c1ec 100644
--- a/src/docs/components/Form/fields/FieldUpload/previews/PreviewFieldUpload.vue
+++ b/src/docs/components/Form/fields/FieldUpload/previews/PreviewFieldUpload.vue
@@ -9,10 +9,10 @@ import fieldBase from '../../../helpers/field-base';
 import field from '../../../helpers/field-upload-css';
 
 export default {
-	extends: PreviewFieldBase,
 	components: {
 		FieldUpload,
 	},
+	extends: PreviewFieldBase,
 	data() {
 		return {
 			field: {
diff --git a/src/docs/components/Form/fields/FieldUploadImage/previews/PreviewFieldUploadImage.vue b/src/docs/components/Form/fields/FieldUploadImage/previews/PreviewFieldUploadImage.vue
index a58357989..036794e7b 100644
--- a/src/docs/components/Form/fields/FieldUploadImage/previews/PreviewFieldUploadImage.vue
+++ b/src/docs/components/Form/fields/FieldUploadImage/previews/PreviewFieldUploadImage.vue
@@ -9,10 +9,10 @@ import fieldBase from '../../../helpers/field-base';
 import field from '../../../helpers/field-upload-image-logo';
 
 export default {
-	extends: PreviewFieldBase,
 	components: {
 		FieldUploadImage,
 	},
+	extends: PreviewFieldBase,
 	data() {
 		return {
 			field: {
diff --git a/src/docs/components/Form/helpers/field-options-submission-agreement.js b/src/docs/components/Form/helpers/field-options-submission-agreement.js
index 4b4359f4e..bc9fd6037 100644
--- a/src/docs/components/Form/helpers/field-options-submission-agreement.js
+++ b/src/docs/components/Form/helpers/field-options-submission-agreement.js
@@ -1,7 +1,7 @@
 import exampleText from '../../../data/exampleText';
 
 const $li = exampleText.map(
-	(paragraph) => `<li>${paragraph.substring(0, 100)}</li>`
+	(paragraph) => `<li>${paragraph.substring(0, 100)}</li>`,
 );
 
 export default {
diff --git a/src/docs/components/Header/previews/PreviewHeader.vue b/src/docs/components/Header/previews/PreviewHeader.vue
index 133b50864..2206e1ebb 100644
--- a/src/docs/components/Header/previews/PreviewHeader.vue
+++ b/src/docs/components/Header/previews/PreviewHeader.vue
@@ -14,7 +14,7 @@
 			<h3>Submissions</h3>
 			<spinner v-if="isLoading" />
 			<template #actions>
-				<pkp-button :isActive="isLoading" @click="isLoading = !isLoading">
+				<pkp-button :is-active="isLoading" @click="isLoading = !isLoading">
 					Toggle Loading Spinner
 				</pkp-button>
 			</template>
@@ -30,7 +30,7 @@
 				<pkp-button>Activity Log</pkp-button>
 			</template>
 		</pkp-header>
-		<pkp-header :isOneLine="false">
+		<pkp-header :is-one-line="false">
 			<h1>
 				Data Modelling and Conceptual Modelling: a comparative analysis of
 				functionality and roles within both wide and narrow scopes in a context
diff --git a/src/docs/components/ListPanel/ComponentSelectReviewerListPanel.vue b/src/docs/components/ListPanel/ComponentSelectReviewerListPanel.vue
index 06fb8b117..469097f11 100644
--- a/src/docs/components/ListPanel/ComponentSelectReviewerListPanel.vue
+++ b/src/docs/components/ListPanel/ComponentSelectReviewerListPanel.vue
@@ -16,7 +16,7 @@ export default {
 					component: markRaw(PreviewSelectReviewerListPanel),
 					name: 'Base',
 					template: this.extractTemplate(
-						PreviewSelectReviewerListPanelTemplate
+						PreviewSelectReviewerListPanelTemplate,
 					),
 				},
 			],
diff --git a/src/docs/components/ListPanel/ComponentSubmissionFilesListPanel.vue b/src/docs/components/ListPanel/ComponentSubmissionFilesListPanel.vue
index 7f43d2f6d..9a1cc482d 100644
--- a/src/docs/components/ListPanel/ComponentSubmissionFilesListPanel.vue
+++ b/src/docs/components/ListPanel/ComponentSubmissionFilesListPanel.vue
@@ -16,7 +16,7 @@ export default {
 					component: markRaw(PreviewSubmissionFilesListPanel),
 					name: 'Base',
 					template: this.extractTemplate(
-						PreviewSubmissionFilesListPanelTemplate
+						PreviewSubmissionFilesListPanelTemplate,
 					),
 				},
 			],
diff --git a/src/docs/components/ListPanel/previews/PreviewAnnouncementsListPanel.vue b/src/docs/components/ListPanel/previews/PreviewAnnouncementsListPanel.vue
index e61b6e6e1..98d6b53e9 100644
--- a/src/docs/components/ListPanel/previews/PreviewAnnouncementsListPanel.vue
+++ b/src/docs/components/ListPanel/previews/PreviewAnnouncementsListPanel.vue
@@ -1,16 +1,16 @@
 <template>
 	<announcements-list-panel
-		addAnnouncementLabel="Add Announcement"
-		apiUrl=""
-		confirmDeleteMessage="Are you sure you want to delete this announcement?"
-		deleteAnnouncementLabel="Delete Announcement"
-		editAnnouncementLabel="Edit Announcement"
-		:form="form"
 		id="previewAnnouncementsListPanel"
+		add-announcement-label="Add Announcement"
+		api-url=""
+		confirm-delete-message="Are you sure you want to delete this announcement?"
+		delete-announcement-label="Delete Announcement"
+		edit-announcement-label="Edit Announcement"
+		:form="form"
 		:items="items"
-		:itemsMax="itemsMax"
+		:items-max="itemsMax"
 		title="Announcements"
-		urlBase="https://example.com/announcement/view/__id__"
+		url-base="https://example.com/announcement/view/__id__"
 	/>
 </template>
 <script>
diff --git a/src/docs/components/ListPanel/previews/PreviewCatalogListPanel.vue b/src/docs/components/ListPanel/previews/PreviewCatalogListPanel.vue
index 6026be1cf..bc833d504 100644
--- a/src/docs/components/ListPanel/previews/PreviewCatalogListPanel.vue
+++ b/src/docs/components/ListPanel/previews/PreviewCatalogListPanel.vue
@@ -1,15 +1,15 @@
 <template>
 	<catalog-list-panel
-		:addEntryForm="addEntryForm"
-		apiUrl="http://httpbin.org/get"
-		catalogSortBy="datePublished"
-		:catalogSortDir="1"
-		csrfToken="1234"
-		:filters="filters"
 		id="previewCatalogListPanel"
-		infoUrl="http://httbin.org/get"
+		:add-entry-form="addEntryForm"
+		api-url="http://httpbin.org/get"
+		catalog-sort-by="datePublished"
+		:catalog-sort-dir="1"
+		csrf-token="1234"
+		:filters="filters"
+		info-url="http://httbin.org/get"
 		:items="items"
-		:itemsMax="itemsMax"
+		:items-max="itemsMax"
 		title="Catalog"
 	/>
 </template>
@@ -20,10 +20,10 @@ import CatalogListPanel from '@/components/ListPanel/submissions/CatalogListPane
 import submissions from '@/docs/data/submissions';
 
 export default {
-	extends: Page,
 	components: {
 		CatalogListPanel,
 	},
+	extends: Page,
 	data() {
 		const getRandomInt = (min, max) => {
 			return Math.floor(Math.random() * (max - min) + min);
diff --git a/src/docs/components/ListPanel/previews/PreviewDoiListPanel.vue b/src/docs/components/ListPanel/previews/PreviewDoiListPanel.vue
index 9212bd464..cddaead25 100644
--- a/src/docs/components/ListPanel/previews/PreviewDoiListPanel.vue
+++ b/src/docs/components/ListPanel/previews/PreviewDoiListPanel.vue
@@ -1,14 +1,14 @@
 <template>
 	<doi-list-panel
-		apiUrl="http://httpbin.org/get"
 		id="previewDoiListPanel--articles"
+		api-url="http://httpbin.org/get"
 		:items="previewItems"
-		:itemsMax="previewItemsMax"
+		:items-max="previewItemsMax"
 		title="Article DOIs"
-		:crossrefPluginEnabled="true"
-		:isSubmission="true"
+		:crossref-plugin-enabled="true"
+		:is-submission="true"
 		:filters="filters"
-		:enabledDoiTypes="enabledDoiTypes"
+		:enabled-doi-types="enabledDoiTypes"
 		:doi-prefix="doiPrefix"
 	/>
 </template>
diff --git a/src/docs/components/ListPanel/previews/PreviewDoiListPanelOJS.vue b/src/docs/components/ListPanel/previews/PreviewDoiListPanelOJS.vue
index 514ba79ad..e27ec16af 100644
--- a/src/docs/components/ListPanel/previews/PreviewDoiListPanelOJS.vue
+++ b/src/docs/components/ListPanel/previews/PreviewDoiListPanelOJS.vue
@@ -1,16 +1,16 @@
 <template>
 	<doi-list-panel-o-j-s
-		apiUrl="http://httpbin.org/get"
-		doiApiUrl="http://httpbin.org/get"
-		executeActionApiUrl="http://httpbin.org/get"
 		id="previewDoiListPanel--articles"
+		api-url="http://httpbin.org/get"
+		doi-api-url="http://httpbin.org/get"
+		execute-action-api-url="http://httpbin.org/get"
 		:filters="[]"
 		:items="items"
-		:itemsMax="itemsMax"
-		:itemType="'issue'"
+		:items-max="itemsMax"
+		:item-type="'issue'"
 		title="Article DOIs"
 		:registration-agency-info="registrationAgencyInfo"
-		:enabledDoiTypes="['article', 'issue', 'galley']"
+		:enabled-doi-types="['article', 'issue', 'galley']"
 		:doi-prefix="'10.1234'"
 	/>
 </template>
diff --git a/src/docs/components/ListPanel/previews/PreviewHighlightsListPanel.vue b/src/docs/components/ListPanel/previews/PreviewHighlightsListPanel.vue
index 58f58ec86..29614fb9b 100644
--- a/src/docs/components/ListPanel/previews/PreviewHighlightsListPanel.vue
+++ b/src/docs/components/ListPanel/previews/PreviewHighlightsListPanel.vue
@@ -1,15 +1,15 @@
 <template>
 	<highlights-list-panel
-		apiUrl="https://httpbin.org"
-		:form="form"
-		i18nAdd="Add Highlight"
-		i18nConfirmDelete="Are you sure you want to delete {$title}? This action can not be undone."
-		i18nDelete="Delete Highlight"
-		i18nEdit="Edit Highlight"
-		i18nSaveOrder="Save Order"
 		id="previewHighlightsListPanel"
+		api-url="https://httpbin.org"
+		:form="form"
+		i18n-add="Add Highlight"
+		i18n-confirm-delete="Are you sure you want to delete {$title}? This action can not be undone."
+		i18n-delete="Delete Highlight"
+		i18n-edit="Edit Highlight"
+		i18n-save-order="Save Order"
 		:items="items"
-		:itemsMax="itemsMax"
+		:items-max="itemsMax"
 		title="Highlights"
 		@set="setData"
 	/>
diff --git a/src/docs/components/ListPanel/previews/PreviewInstitutionsListPanel.vue b/src/docs/components/ListPanel/previews/PreviewInstitutionsListPanel.vue
index 7d3679dcb..70db15d56 100644
--- a/src/docs/components/ListPanel/previews/PreviewInstitutionsListPanel.vue
+++ b/src/docs/components/ListPanel/previews/PreviewInstitutionsListPanel.vue
@@ -1,14 +1,14 @@
 <template>
 	<institutions-list-panel
-		addInstitutionLabel="Add Institution"
-		apiUrl=""
-		confirmDeleteMessage="Are you sure you want to delete this institution?"
-		deleteInstitutionLabel="Delete Institution"
-		editInstitutionLabel="Edit Institution"
-		:form="form"
 		id="previewInstitutionsListPanel"
+		add-institution-label="Add Institution"
+		api-url=""
+		confirm-delete-message="Are you sure you want to delete this institution?"
+		delete-institution-label="Delete Institution"
+		edit-institution-label="Edit Institution"
+		:form="form"
 		:items="items"
-		:itemsMax="itemsMax"
+		:items-max="itemsMax"
 		title="Institutions"
 	/>
 </template>
diff --git a/src/docs/components/ListPanel/previews/PreviewListPanelActions.vue b/src/docs/components/ListPanel/previews/PreviewListPanelActions.vue
index f2c70388d..4604d3b07 100644
--- a/src/docs/components/ListPanel/previews/PreviewListPanelActions.vue
+++ b/src/docs/components/ListPanel/previews/PreviewListPanelActions.vue
@@ -5,7 +5,7 @@
 				<h2>List Panel with Actions</h2>
 				<template #actions>
 					<pkp-button @click="openModal">Add Item</pkp-button>
-					<pkp-button @click="openModal" :isWarnable="true">
+					<pkp-button :is-warnable="true" @click="openModal">
 						Reset Defaults
 					</pkp-button>
 				</template>
diff --git a/src/docs/components/ListPanel/previews/PreviewListPanelFilter.vue b/src/docs/components/ListPanel/previews/PreviewListPanelFilter.vue
index 48a05fe8f..e5fb66172 100644
--- a/src/docs/components/ListPanel/previews/PreviewListPanelFilter.vue
+++ b/src/docs/components/ListPanel/previews/PreviewListPanelFilter.vue
@@ -1,10 +1,10 @@
 <template>
-	<list-panel :items="items" :isSidebarVisible="isSidebarVisible">
+	<list-panel :items="items" :is-sidebar-visible="isSidebarVisible">
 		<template #header>
 			<pkp-header>
 				<h2>List Panel with Filter</h2>
 				<template #actions>
-					<pkp-button :isActive="isSidebarVisible" @click="toggleFilters">
+					<pkp-button :is-active="isSidebarVisible" @click="toggleFilters">
 						<icon icon="filter" :inline="true" />
 						Filters
 					</pkp-button>
@@ -12,7 +12,7 @@
 			</pkp-header>
 		</template>
 		<template #sidebar>
-			<pkp-header :isOneLine="false">
+			<pkp-header :is-one-line="false">
 				<h3>
 					<icon icon="filter" :inline="true" />
 					Filters
@@ -24,7 +24,7 @@
 				:param="filter.param"
 				:title="filter.title"
 				:value="filter.value"
-				:isFilterActive="isFilterActive(filter.param, filter.value)"
+				:is-filter-active="isFilterActive(filter.param, filter.value)"
 				@add-filter="addFilter"
 				@remove-filter="removeFilter"
 			/>
diff --git a/src/docs/components/ListPanel/previews/PreviewListPanelItemActions.vue b/src/docs/components/ListPanel/previews/PreviewListPanelItemActions.vue
index cef435c4f..5fc8759fd 100644
--- a/src/docs/components/ListPanel/previews/PreviewListPanelItemActions.vue
+++ b/src/docs/components/ListPanel/previews/PreviewListPanelItemActions.vue
@@ -2,7 +2,7 @@
 	<list-panel :items="items" title="List Panel with Item Actions">
 		<template #item-actions="{item}">
 			<pkp-button @click="openModal(item.title)">Edit</pkp-button>
-			<pkp-button @click="openModal(item.title)" :isWarnable="true">
+			<pkp-button :is-warnable="true" @click="openModal(item.title)">
 				Delete
 			</pkp-button>
 		</template>
diff --git a/src/docs/components/ListPanel/previews/PreviewListPanelItemExpander.vue b/src/docs/components/ListPanel/previews/PreviewListPanelItemExpander.vue
index 9251e67c2..e190d0748 100644
--- a/src/docs/components/ListPanel/previews/PreviewListPanelItemExpander.vue
+++ b/src/docs/components/ListPanel/previews/PreviewListPanelItemExpander.vue
@@ -8,8 +8,8 @@
 		<template #item-actions="{item}">
 			<pkp-button @click="openModal(item.title)">Edit</pkp-button>
 			<expander
-				:isExpanded="expanded.includes(item.id)"
-				:itemName="item.title"
+				:is-expanded="expanded.includes(item.id)"
+				:item-name="item.title"
 				@toggle="toggleExpanded(item.id)"
 			/>
 		</template>
@@ -22,7 +22,7 @@
 			</list>
 			<div class="listPanel__itemExpandedActions">
 				<pkp-button @click="openModal(item.title)">Approve</pkp-button>
-				<pkp-button :isWarnable="true" @click="openModal(item.title)">
+				<pkp-button :is-warnable="true" @click="openModal(item.title)">
 					Decline
 				</pkp-button>
 			</div>
diff --git a/src/docs/components/ListPanel/previews/PreviewListPanelPagination.vue b/src/docs/components/ListPanel/previews/PreviewListPanelPagination.vue
index fd0f50e10..b0b20af66 100644
--- a/src/docs/components/ListPanel/previews/PreviewListPanelPagination.vue
+++ b/src/docs/components/ListPanel/previews/PreviewListPanelPagination.vue
@@ -3,9 +3,9 @@
 		<template #footer>
 			<pagination
 				v-if="lastPage > 1"
-				:currentPage="currentPage"
-				:isLoading="isLoading"
-				:lastPage="lastPage"
+				:current-page="currentPage"
+				:is-loading="isLoading"
+				:last-page="lastPage"
 				@set-page="setPage"
 			/>
 		</template>
diff --git a/src/docs/components/ListPanel/previews/PreviewListPanelSearch.vue b/src/docs/components/ListPanel/previews/PreviewListPanelSearch.vue
index cba1274f7..b0af264e3 100644
--- a/src/docs/components/ListPanel/previews/PreviewListPanelSearch.vue
+++ b/src/docs/components/ListPanel/previews/PreviewListPanelSearch.vue
@@ -5,7 +5,7 @@
 				<h2>List Panel with Search</h2>
 				<template #actions>
 					<search
-						:searchPhrase="searchPhrase"
+						:search-phrase="searchPhrase"
 						@search-phrase-changed="setSearchPhrase"
 					/>
 				</template>
diff --git a/src/docs/components/ListPanel/previews/PreviewListPanelSelect.vue b/src/docs/components/ListPanel/previews/PreviewListPanelSelect.vue
index 1b77f1ba8..869b93fc1 100644
--- a/src/docs/components/ListPanel/previews/PreviewListPanelSelect.vue
+++ b/src/docs/components/ListPanel/previews/PreviewListPanelSelect.vue
@@ -8,8 +8,8 @@
 				</pkp-header>
 				<div v-if="canSelectAll" class="listPanel__selectAllWrapper">
 					<input
-						type="checkbox"
 						:id="id + '-selectAll'"
+						type="checkbox"
 						:checked="isSelectAllOn"
 						@click="toggleSelectAll"
 					/>
@@ -23,10 +23,10 @@
 					<label class="listPanel__selectWrapper">
 						<div class="listPanel__selector">
 							<input
+								v-model="selected"
 								type="checkbox"
 								name="submissions[]"
 								:value="item.id"
-								v-model="selected"
 							/>
 						</div>
 						<div class="listPanel__itemIdentity">
@@ -63,6 +63,12 @@ export default {
 			selected: [],
 		};
 	},
+	watch: {
+		selected(newVal, oldVal) {
+			this.isSelectAllOn =
+				this.selected.length && this.selected.length === this.items.length;
+		},
+	},
 	methods: {
 		toggleSelectAll() {
 			if (this.isSelectAllOn) {
@@ -72,12 +78,6 @@ export default {
 			}
 		},
 	},
-	watch: {
-		selected(newVal, oldVal) {
-			this.isSelectAllOn =
-				this.selected.length && this.selected.length === this.items.length;
-		},
-	},
 };
 </script>
 
diff --git a/src/docs/components/ListPanel/previews/PreviewSelectReviewerListPanel.vue b/src/docs/components/ListPanel/previews/PreviewSelectReviewerListPanel.vue
index 529d094aa..8e7b27af3 100644
--- a/src/docs/components/ListPanel/previews/PreviewSelectReviewerListPanel.vue
+++ b/src/docs/components/ListPanel/previews/PreviewSelectReviewerListPanel.vue
@@ -1,37 +1,37 @@
 <template>
 	<select-reviewer-list-panel
-		apiUrl="http://httpbin.org/get"
-		activeReviewsCountLabel="{$count} active"
-		activeReviewsLabel="Active reviews currently assigned"
-		assignedToLastRoundLabel="This reviewer completed a review in the last round."
-		averageCompletionLabel="Average days to complete review"
-		biographyLabel="Biography"
-		cancelledReviewsLabel="Reviews cancelled"
-		completedReviewsLabel="Reviews completed"
-		:currentlyAssigned="[5]"
-		currentlyAssignedLabel="This reviewer has already been assigned to this review round."
-		daySinceLastAssignmentLabel="Yesterday"
-		daysSinceLastAssignmentLabel="{$days} days ago"
-		daysSinceLastAssignmentDescriptionLabel="Days since last review assigned"
-		declinedReviewsLabel="Reviews declined"
-		emptyLabel="No reviewers found"
-		:filters="filters"
-		gossipLabel="Editorial Notes"
 		id="previewSelectReviewerListPanel"
+		api-url="http://httpbin.org/get"
+		active-reviews-count-label="{$count} active"
+		active-reviews-label="Active reviews currently assigned"
+		assigned-to-last-round-label="This reviewer completed a review in the last round."
+		average-completion-label="Average days to complete review"
+		biography-label="Biography"
+		cancelled-reviews-label="Reviews cancelled"
+		completed-reviews-label="Reviews completed"
+		:currently-assigned="[5]"
+		currently-assigned-label="This reviewer has already been assigned to this review round."
+		day-since-last-assignment-label="Yesterday"
+		days-since-last-assignment-label="{$days} days ago"
+		days-since-last-assignment-description-label="Days since last review assigned"
+		declined-reviews-label="Reviews declined"
+		empty-label="No reviewers found"
+		:filters="filters"
+		gossip-label="Editorial Notes"
 		:items="items"
-		:itemsMax="items.length"
-		:lastRoundReviewers="lastRoundReviewers"
-		neverAssignedLabel="Never assigned"
-		reassignLabel="Reassign"
-		reassignWithNameLabel="Reassign {$name}"
-		reviewerRatingLabel="Reviewer rating: {$rating}"
-		reviewInterestsLabel="Reviewing Interests"
-		selectReviewerLabel="Select Reviewer"
-		selectorName="reviewerId"
+		:items-max="items.length"
+		:last-round-reviewers="lastRoundReviewers"
+		never-assigned-label="Never assigned"
+		reassign-label="Reassign"
+		reassign-with-name-label="Reassign {$name}"
+		reviewer-rating-label="Reviewer rating: {$rating}"
+		review-interests-label="Reviewing Interests"
+		select-reviewer-label="Select Reviewer"
+		selector-name="reviewerId"
 		title="Locate a Reviewer"
-		:warnOnAssignment="[7]"
-		warnOnAssignmentLabel="This reviewer is locked because they have been assigned a role which allows them to view the author's identity. Anonymous peer review can not be guaranteed. Would you like to unlock this reviewer anyway?"
-		warnOnAssignmentUnlockLabel="Unlock"
+		:warn-on-assignment="[7]"
+		warn-on-assignment-label="This reviewer is locked because they have been assigned a role which allows them to view the author's identity. Anonymous peer review can not be guaranteed. Would you like to unlock this reviewer anyway?"
+		warn-on-assignment-unlock-label="Unlock"
 	/>
 </template>
 <script>
@@ -185,7 +185,7 @@ export default {
 			],
 			items: [...items],
 			lastRoundReviewers: items.filter((reviewer) =>
-				[3, 4].includes(reviewer.id)
+				[3, 4].includes(reviewer.id),
 			),
 		};
 	},
diff --git a/src/docs/components/ListPanel/previews/PreviewSubmissionFilesListPanel.vue b/src/docs/components/ListPanel/previews/PreviewSubmissionFilesListPanel.vue
index 23e2fc0e1..d4ee1b462 100644
--- a/src/docs/components/ListPanel/previews/PreviewSubmissionFilesListPanel.vue
+++ b/src/docs/components/ListPanel/previews/PreviewSubmissionFilesListPanel.vue
@@ -1,23 +1,23 @@
 <template>
 	<submission-files-list-panel
-		addFileLabel="Add File"
-		apiUrl="https://httbin.org/publicknowledge/api/v1/submissions/1/files"
-		cancelUploadLabel="Cancel Upload"
-		genrePromptLabel="What kind of file is this?"
-		emptyLabel="Upload any files the editorial team will need to evaluate your submission."
-		emptyAddLabel="Upload Files"
-		:fileStage="2"
+		id="preview"
+		add-file-label="Add File"
+		api-url="https://httbin.org/publicknowledge/api/v1/submissions/1/files"
+		cancel-upload-label="Cancel Upload"
+		genre-prompt-label="What kind of file is this?"
+		empty-label="Upload any files the editorial team will need to evaluate your submission."
+		empty-add-label="Upload Files"
+		:file-stage="2"
 		:form="components.preview.form"
 		:genres="components.preview.genres"
-		id="preview"
 		:items="components.preview.items"
 		:options="components.preview.options"
-		otherLabel="Other"
-		primaryLocale="en"
-		removeConfirmLabel="Are you sure you want to remove this file?"
-		:stageId="1"
+		other-label="Other"
+		primary-locale="en"
+		remove-confirm-label="Are you sure you want to remove this file?"
+		:stage-id="1"
 		title="Files"
-		uploadProgressLabel="Uploading {$percent}% complete"
+		upload-progress-label="Uploading {$percent}% complete"
 		@set="set"
 	/>
 </template>
@@ -30,10 +30,10 @@ import dropzoneOptions from '@/docs/data/dropzoneOptions';
 import genres from '../../../data/genres';
 
 export default {
-	extends: Page,
 	components: {
 		SubmissionFilesListPanel,
 	},
+	extends: Page,
 	data() {
 		return {
 			components: {
diff --git a/src/docs/components/ListPanel/previews/PreviewSubmissionsListPanel.vue b/src/docs/components/ListPanel/previews/PreviewSubmissionsListPanel.vue
index eb7fe6f31..97d37cdd6 100644
--- a/src/docs/components/ListPanel/previews/PreviewSubmissionsListPanel.vue
+++ b/src/docs/components/ListPanel/previews/PreviewSubmissionsListPanel.vue
@@ -1,12 +1,12 @@
 <template>
 	<submissions-list-panel
-		addUrl="https://httbin.org/publicknowledge/submission/wizard"
-		apiUrl="http://httpbin.org/get"
-		:filters="filters"
 		id="previewSubmissionsListPanel"
-		infoUrl="http://httbin.org/get"
+		add-url="https://httbin.org/publicknowledge/submission/wizard"
+		api-url="http://httpbin.org/get"
+		:filters="filters"
+		info-url="http://httbin.org/get"
 		:items="items"
-		:itemsMax="itemsMax"
+		:items-max="itemsMax"
 		title="Submissions"
 	/>
 </template>
@@ -18,10 +18,10 @@ import fieldBase from '../../Form/helpers/field-base';
 import fieldBaseAutosuggest from '../../Form/helpers/field-autosuggest';
 
 export default {
-	extends: Page,
 	components: {
 		SubmissionsListPanel,
 	},
+	extends: Page,
 	data() {
 		return {
 			filters: [
@@ -151,9 +151,8 @@ export default {
 		pkp.localeKeys['submission.list.currentStage'] =
 			'Currently in the {$stage} stage.';
 		pkp.localeKeys['submission.list.discussions'] = 'Open discussions';
-		pkp.localeKeys[
-			'submission.list.dualWorkflowLinks'
-		] = `You have been assigned multiple roles for this submission. Would you like to access the <a href="{$urlAuthorWorkflow}">Author's workflow</a>  or the <a href="{$urlEditorialWorkflow}">Editorial workflow</a>?`;
+		pkp.localeKeys['submission.list.dualWorkflowLinks'] =
+			`You have been assigned multiple roles for this submission. Would you like to access the <a href="{$urlAuthorWorkflow}">Author's workflow</a>  or the <a href="{$urlEditorialWorkflow}">Editorial workflow</a>?`;
 		pkp.localeKeys['submission.list.galleysCreated'] =
 			'Copyedited files submitted';
 		pkp.localeKeys['submission.list.infoCenter'] = 'Activity Log & Notes';
@@ -162,9 +161,8 @@ export default {
 		pkp.localeKeys['submission.list.reviewCancelled'] = 'Review Cancelled';
 		pkp.localeKeys['submission.list.reviewComplete'] = 'Review Submitted';
 		pkp.localeKeys['submission.list.reviewDue'] = 'Review Due: {$date}';
-		pkp.localeKeys[
-			'submission.list.reviewerWorkflowLink'
-		] = `You have been assigned an editorial role for this submission. Would you like to access the <a href="{$urlEditorialWorkflow}">Editorial workflow</a>?`;
+		pkp.localeKeys['submission.list.reviewerWorkflowLink'] =
+			`You have been assigned an editorial role for this submission. Would you like to access the <a href="{$urlEditorialWorkflow}">Editorial workflow</a>?`;
 		pkp.localeKeys['submission.list.reviewsCompleted'] =
 			'Assigned reviews completed';
 		pkp.localeKeys['submission.list.revisionsSubmitted'] =
diff --git a/src/docs/components/ListPanel/readme-highlights.md b/src/docs/components/ListPanel/readme-highlights.md
index 540575c82..4848e3e9f 100644
--- a/src/docs/components/ListPanel/readme-highlights.md
+++ b/src/docs/components/ListPanel/readme-highlights.md
@@ -1,4 +1,3 @@
-
 ## Props
 
 | Key | Description |
@@ -24,14 +23,13 @@
 
 ## Global Events
 
-
 ## Mixins
 
-| Name | Description |
-| --- | --- |
-| [dialog](#/mixins/dialog) | Open a dialog modal. |
-| [fetch](#/mixins/fetch) | Get highlights from the REST API. |
+| Name                      | Description                       |
+| ------------------------- | --------------------------------- |
+| [dialog](#/mixins/dialog) | Open a dialog modal.              |
+| [fetch](#/mixins/fetch)   | Get highlights from the REST API. |
 
 ## Usage
 
-Use this component to view, add, edit and delete highlights.
\ No newline at end of file
+Use this component to view, add, edit and delete highlights.
diff --git a/src/docs/components/ManageEmailsPage/previews/PreviewManageEmailsPage.vue b/src/docs/components/ManageEmailsPage/previews/PreviewManageEmailsPage.vue
index 653ec102d..9b06fe112 100644
--- a/src/docs/components/ManageEmailsPage/previews/PreviewManageEmailsPage.vue
+++ b/src/docs/components/ManageEmailsPage/previews/PreviewManageEmailsPage.vue
@@ -12,11 +12,9 @@
 						<search
 							search-label="Search by name or description"
 							:search-phrase="searchPhrase"
-							@search-phrase-changed="
-								(newSearch) => (this.searchPhrase = newSearch)
-							"
+							@search-phrase-changed="(newSearch) => (searchPhrase = newSearch)"
 						></search>
-						<pkp-button @click="confirmResetAll" :isWarnable="true">
+						<pkp-button :is-warnable="true" @click="confirmResetAll">
 							Reset All
 						</pkp-button>
 					</template>
@@ -86,7 +84,7 @@
 			</template>
 		</list-panel>
 		<modal
-			:closeLabel="t('common.close')"
+			:close-label="t('common.close')"
 			name="mailable"
 			:title="currentMailable ? currentMailable.name : ''"
 			@closed="mailableModalClosed"
@@ -135,7 +133,7 @@
 			</template>
 		</modal>
 		<modal
-			:closeLabel="t('common.close')"
+			:close-label="t('common.close')"
 			name="template"
 			:title="currentTemplate ? 'Edit Template' : 'Add Template'"
 			@closed="templateModalClosed"
@@ -190,6 +188,19 @@ export default {
 			templateForm: {...templateForm},
 		};
 	},
+	created() {
+		$.ajax({
+			url: '/mailables.json',
+			method: 'GET',
+			context: this,
+			success(r) {
+				this.mailables = r;
+			},
+			error(r) {
+				alert('failed to load mailables from /mailables.json');
+			},
+		});
+	},
 	methods: {
 		alert(msg) {
 			alert(msg);
@@ -211,19 +222,6 @@ export default {
 			});
 		},
 	},
-	created() {
-		$.ajax({
-			url: '/mailables.json',
-			method: 'GET',
-			context: this,
-			success(r) {
-				this.mailables = r;
-			},
-			error(r) {
-				alert('failed to load mailables from /mailables.json');
-			},
-		});
-	},
 };
 </script>
 
diff --git a/src/docs/components/Modal/previews/PreviewModal.vue b/src/docs/components/Modal/previews/PreviewModal.vue
index 1f2295483..1dc5b8815 100644
--- a/src/docs/components/Modal/previews/PreviewModal.vue
+++ b/src/docs/components/Modal/previews/PreviewModal.vue
@@ -5,7 +5,7 @@
 		</pkp-button>
 		<modal
 			:open="isModalOpened"
-			closeLabel="Close"
+			close-label="Close"
 			title="Simple Modal"
 			@close="isModalOpened = false"
 		>
diff --git a/src/docs/components/Modal/previews/PreviewModalActions.vue b/src/docs/components/Modal/previews/PreviewModalActions.vue
index a00ff9b1d..000399f21 100644
--- a/src/docs/components/Modal/previews/PreviewModalActions.vue
+++ b/src/docs/components/Modal/previews/PreviewModalActions.vue
@@ -4,7 +4,7 @@
 			Modal with Custom Actions
 		</pkp-button>
 		<modal
-			closeLabel="Close"
+			close-label="Close"
 			title="Activity Report"
 			:open="isModalOpened"
 			@close="isModalOpened = false"
@@ -28,14 +28,14 @@
 			<template #footer>
 				<spinner v-if="isSendingReport" />
 				<pkp-button
-					:isDisabled="isSendingReport"
-					:isPrimary="true"
+					:is-disabled="isSendingReport"
+					:is-primary="true"
 					@click="sendEmailReport"
 				>
 					Send Email Report
 				</pkp-button>
 				<pkp-button
-					:isDisabled="isSendingReport"
+					:is-disabled="isSendingReport"
 					@click="isModalOpened = false"
 				>
 					Close
diff --git a/src/docs/components/Modal/previews/PreviewModalForm.vue b/src/docs/components/Modal/previews/PreviewModalForm.vue
index e8459e0ea..f20a4c890 100644
--- a/src/docs/components/Modal/previews/PreviewModalForm.vue
+++ b/src/docs/components/Modal/previews/PreviewModalForm.vue
@@ -4,7 +4,7 @@
 			Modal with Form
 		</pkp-button>
 		<modal
-			closeLabel="Close"
+			close-label="Close"
 			title="Add Announcement"
 			:open="isModalOpened"
 			@close="isModalOpened = false"
diff --git a/src/docs/components/Modal/previews/PreviewModalSide.vue b/src/docs/components/Modal/previews/PreviewModalSide.vue
index 1a8493c54..94f913292 100644
--- a/src/docs/components/Modal/previews/PreviewModalSide.vue
+++ b/src/docs/components/Modal/previews/PreviewModalSide.vue
@@ -7,7 +7,7 @@
 			Open Tall Modal
 		</pkp-button>
 		<modal
-			closeLabel="Close"
+			close-label="Close"
 			type="side"
 			:open="isModalOpenedShort"
 			@close="isModalOpenedShort = false"
@@ -22,7 +22,7 @@
 			</panel>
 		</modal>
 		<modal
-			closeLabel="Close"
+			close-label="Close"
 			type="side"
 			:open="isModalOpenedTall"
 			@close="isModalOpenedTall = false"
diff --git a/src/docs/components/Modal/previews/PreviewModalTabs.vue b/src/docs/components/Modal/previews/PreviewModalTabs.vue
index 5d910ff37..68a6de66c 100644
--- a/src/docs/components/Modal/previews/PreviewModalTabs.vue
+++ b/src/docs/components/Modal/previews/PreviewModalTabs.vue
@@ -4,7 +4,7 @@
 			Modal with Tabs
 		</pkp-button>
 		<modal
-			closeLabel="Close"
+			close-label="Close"
 			title="Nested Tabs Example"
 			:open="isModalOpened"
 			@close="isModalOpened = false"
diff --git a/src/docs/components/Notification/previews/PreviewNotification.vue b/src/docs/components/Notification/previews/PreviewNotification.vue
index 92bb9eb4e..96a313519 100644
--- a/src/docs/components/Notification/previews/PreviewNotification.vue
+++ b/src/docs/components/Notification/previews/PreviewNotification.vue
@@ -13,7 +13,7 @@
 			This submission does not have any contributors. At least one contributor
 			must be provided.
 		</notification>
-		<notification v-if="!dismissed" :canDismiss="true" @dismiss="dismiss">
+		<notification v-if="!dismissed" :can-dismiss="true" @dismiss="dismiss">
 			This notification can be dismissed.
 		</notification>
 	</div>
diff --git a/src/docs/components/Orderer/previews/PreviewOrderer.vue b/src/docs/components/Orderer/previews/PreviewOrderer.vue
index 7ec267669..d441f36c9 100644
--- a/src/docs/components/Orderer/previews/PreviewOrderer.vue
+++ b/src/docs/components/Orderer/previews/PreviewOrderer.vue
@@ -3,9 +3,9 @@
 		<list-item v-for="item in items" :key="item">
 			{{ item }}
 			<orderer
-				:isDraggable="false"
-				:itemId="item"
-				:itemTitle="item"
+				:is-draggable="false"
+				:item-id="item"
+				:item-title="item"
 				@down="down"
 				@up="up"
 			/>
diff --git a/src/docs/components/Orderer/previews/PreviewOrdererDraggable.vue b/src/docs/components/Orderer/previews/PreviewOrdererDraggable.vue
index 3c30cea8a..d87b1e396 100644
--- a/src/docs/components/Orderer/previews/PreviewOrdererDraggable.vue
+++ b/src/docs/components/Orderer/previews/PreviewOrdererDraggable.vue
@@ -3,7 +3,7 @@
 		<VueDraggable ref="el" v-model="items">
 			<list-item v-for="item in items" :key="item">
 				{{ item }}
-				<orderer :itemId="item" :itemTitle="item" @down="down" @up="up" />
+				<orderer :item-id="item" :item-title="item" @down="down" @up="up" />
 			</list-item>
 		</VueDraggable>
 	</list>
@@ -14,10 +14,10 @@ import PreviewOrderer from './PreviewOrderer.vue';
 import {VueDraggable} from 'vue-draggable-plus';
 
 export default {
-	extends: PreviewOrderer,
 	components: {
 		VueDraggable,
 	},
+	extends: PreviewOrderer,
 	data() {
 		return {
 			...PreviewOrderer.data(),
diff --git a/src/docs/components/Page/previews/PreviewPage.vue b/src/docs/components/Page/previews/PreviewPage.vue
index 3d683ac4a..53adbdf25 100644
--- a/src/docs/components/Page/previews/PreviewPage.vue
+++ b/src/docs/components/Page/previews/PreviewPage.vue
@@ -155,10 +155,10 @@
 			</main>
 		</div>
 		<div
+			ref="notifications"
 			aria-live="polite"
 			aria-atomic="true"
 			class="app__notifications"
-			ref="notifications"
 			role="status"
 		>
 			<transition-group name="app__notification">
@@ -190,10 +190,10 @@ import Dropdown from '@/components/Dropdown/Dropdown.vue';
 import page from '../../../data/page';
 
 export default {
-	extends: Page,
 	components: {
 		Dropdown,
 	},
+	extends: Page,
 	data() {
 		return {...page};
 	},
diff --git a/src/docs/components/Pagination/previews/PreviewPagination.vue b/src/docs/components/Pagination/previews/PreviewPagination.vue
index 32c2d5626..7741800ba 100644
--- a/src/docs/components/Pagination/previews/PreviewPagination.vue
+++ b/src/docs/components/Pagination/previews/PreviewPagination.vue
@@ -4,7 +4,7 @@
 			<pagination
 				:current-page="currentPage"
 				:last-page="10"
-				:isLoading="isLoading"
+				:is-loading="isLoading"
 				@set-page="setPage"
 			/>
 		</div>
@@ -13,7 +13,7 @@
 				:current-page="currentPage"
 				:last-page="10"
 				:show-adjacent-pages="2"
-				:isLoading="isLoading"
+				:is-loading="isLoading"
 				@set-page="setPage"
 			/>
 		</div>
diff --git a/src/docs/components/ProgressBar/previews/PreviewProgressBar.vue b/src/docs/components/ProgressBar/previews/PreviewProgressBar.vue
index 3cbb0ecd0..db7623b2a 100644
--- a/src/docs/components/ProgressBar/previews/PreviewProgressBar.vue
+++ b/src/docs/components/ProgressBar/previews/PreviewProgressBar.vue
@@ -23,6 +23,9 @@ export default {
 			slowValue: 0,
 		};
 	},
+	mounted() {
+		this.start();
+	},
 	methods: {
 		start() {
 			if (this.fastInterval) {
@@ -50,9 +53,6 @@ export default {
 			}, 1700);
 		},
 	},
-	mounted() {
-		this.start();
-	},
 };
 </script>
 
diff --git a/src/docs/components/Search/previews/PreviewSearch.vue b/src/docs/components/Search/previews/PreviewSearch.vue
index 8529794b4..78b59308c 100644
--- a/src/docs/components/Search/previews/PreviewSearch.vue
+++ b/src/docs/components/Search/previews/PreviewSearch.vue
@@ -1,6 +1,6 @@
 <template>
 	<search
-		:searchPhrase="searchPhrase"
+		:search-phrase="searchPhrase"
 		@search-phrase-changed="setSearchPhrase"
 	/>
 </template>
diff --git a/src/docs/components/StatsPage/previews/PreviewStatsEditorialPage.vue b/src/docs/components/StatsPage/previews/PreviewStatsEditorialPage.vue
index a504baae6..6b817f753 100644
--- a/src/docs/components/StatsPage/previews/PreviewStatsEditorialPage.vue
+++ b/src/docs/components/StatsPage/previews/PreviewStatsEditorialPage.vue
@@ -44,21 +44,21 @@
 					:date-end="dateEnd"
 					:date-end-max="dateEndMax"
 					:options="dateRangeOptions"
-					dateRangeLabel="Date Range"
-					dateFormatInstructionsLabel="Enter each date in the format YYYY-MM-DD. For example, if you want the date for 15 January, 2019, enter 2019-01-15."
-					changeDateRangeLabel="Change date range"
-					sinceDateLabel="Since {$date}"
-					untilDateLabel="Until {$date}"
-					allDatesLabel="All dates"
-					customRangeLabel="Custom Range"
-					fromDateLabel="From"
-					toDateLabel="To"
-					applyLabel="Apply"
-					invalidDateLabel="The date format is not valid. Enter each date in the format YYYY-MM-DD."
-					dateDoesNotExistLabel="One of the dates entered does not exist."
-					invalidDateRangeLabel="The start date must be before the end date."
-					invalidStartDateMinLabel="The start date may not be earlier than {$date}."
-					invalidEndDateMaxLabel="The end date may not be later than {$date}."
+					date-range-label="Date Range"
+					date-format-instructions-label="Enter each date in the format YYYY-MM-DD. For example, if you want the date for 15 January, 2019, enter 2019-01-15."
+					change-date-range-label="Change date range"
+					since-date-label="Since {$date}"
+					until-date-label="Until {$date}"
+					all-dates-label="All dates"
+					custom-range-label="Custom Range"
+					from-date-label="From"
+					to-date-label="To"
+					apply-label="Apply"
+					invalid-date-label="The date format is not valid. Enter each date in the format YYYY-MM-DD."
+					date-does-not-exist-label="One of the dates entered does not exist."
+					invalid-date-range-label="The start date must be before the end date."
+					invalid-start-date-min-label="The start date may not be earlier than {$date}."
+					invalid-end-date-max-label="The end date may not be later than {$date}."
 					@set-range="setDateRange"
 					@updated:current-range="setCurrentDateRange"
 				></date-range>
diff --git a/src/docs/components/StatsPage/previews/PreviewStatsPublicationsPage.vue b/src/docs/components/StatsPage/previews/PreviewStatsPublicationsPage.vue
index db877c150..0eb54e0fb 100644
--- a/src/docs/components/StatsPage/previews/PreviewStatsPublicationsPage.vue
+++ b/src/docs/components/StatsPage/previews/PreviewStatsPublicationsPage.vue
@@ -10,21 +10,21 @@
 					:date-end="dateEnd"
 					:date-end-max="dateEndMax"
 					:options="dateRangeOptions"
-					dateRangeLabel="Date Range"
-					dateFormatInstructionsLabel="Enter each date in the format YYYY-MM-DD. For example, if you want the date for 15 January, 2019, enter 2019-01-15."
-					changeDateRangeLabel="Change date range"
-					sinceDateLabel="Since {$date}"
-					untilDateLabel="Until {$date}"
-					allDatesLabel="All dates"
-					customRangeLabel="Custom Range"
-					fromDateLabel="From"
-					toDateLabel="To"
-					applyLabel="Apply"
-					invalidDateLabel="The date format is not valid. Enter each date in the format YYYY-MM-DD."
-					dateDoesNotExistLabel="One of the dates entered does not exist."
-					invalidDateRangeLabel="The start date must be before the end date."
-					invalidStartDateMinLabel="The start date may not be earlier than {$date}."
-					invalidEndDateMaxLabel="The end date may not be later than {$date}."
+					date-range-label="Date Range"
+					date-format-instructions-label="Enter each date in the format YYYY-MM-DD. For example, if you want the date for 15 January, 2019, enter 2019-01-15."
+					change-date-range-label="Change date range"
+					since-date-label="Since {$date}"
+					until-date-label="Until {$date}"
+					all-dates-label="All dates"
+					custom-range-label="Custom Range"
+					from-date-label="From"
+					to-date-label="To"
+					apply-label="Apply"
+					invalid-date-label="The date format is not valid. Enter each date in the format YYYY-MM-DD."
+					date-does-not-exist-label="One of the dates entered does not exist."
+					invalid-date-range-label="The start date must be before the end date."
+					invalid-start-date-min-label="The start date may not be earlier than {$date}."
+					invalid-end-date-max-label="The end date may not be later than {$date}."
 					@set-range="setDateRange"
 				/>
 				<pkp-button
@@ -66,7 +66,7 @@
 						v-for="filter in filterSet.filters"
 						:key="filter.param + filter.value"
 						v-bind="filter"
-						:isFilterActive="isFilterActive(filter.param, filter.value)"
+						:is-filter-active="isFilterActive(filter.param, filter.value)"
 						@add-filter="addFilter"
 						@remove-filter="removeFilter"
 					/>
@@ -76,8 +76,8 @@
 				<div v-if="chartData" class="pkpStats__graph">
 					<div class="pkpStats__graphHeader">
 						<h2
-							class="pkpStats__graphTitle -screenReader"
 							id="publication-stats-graph-title"
+							class="pkpStats__graphTitle -screenReader"
 						>
 							Views
 						</h2>
@@ -140,14 +140,14 @@
 							</tr>
 						</tbody>
 					</table>
-					<line-chart :chartData="chartData" aria-hidden="true"></line-chart>
+					<line-chart :chart-data="chartData" aria-hidden="true"></line-chart>
 					<span v-if="isLoadingTimeline" class="pkpStats__loadingCover">
 						<spinner></spinner>
 					</span>
 				</div>
 				<div class="pkpStats__table" role="region" aria-live="polite">
 					<pkp-header>
-						<h2 class="pkpStats__tableTitle" id="articleDetailTableLabel">
+						<h2 id="articleDetailTableLabel" class="pkpStats__tableTitle">
 							Article Details
 							<spinner v-if="isLoadingItems"></spinner>
 						</h2>
diff --git a/src/docs/components/Steps/previews/PreviewSteps.vue b/src/docs/components/Steps/previews/PreviewSteps.vue
index b3f0ae8f2..bfc43c880 100644
--- a/src/docs/components/Steps/previews/PreviewSteps.vue
+++ b/src/docs/components/Steps/previews/PreviewSteps.vue
@@ -1,15 +1,15 @@
 <template>
-	<div class="previewSteps" ref="wrapper">
+	<div ref="wrapper" class="previewSteps">
 		<steps
-			:startedSteps="startedSteps"
+			:started-steps="startedSteps"
 			:current="currentStep"
 			label="Demonstration of steps component"
-			progressLabel="{$current}/{$total} steps"
-			:scrollTo="$refs.wrapper"
-			showStepsLabel="Show/hide all steps"
+			progress-label="{$current}/{$total} steps"
+			:scroll-to="$refs.wrapper"
+			show-steps-label="Show/hide all steps"
 			@step:open="openStep"
 		>
-			<step label="First step" id="first">
+			<step id="first" label="First step">
 				<panel>
 					<panel-section>
 						First step content with a
@@ -18,7 +18,7 @@
 					</panel-section>
 				</panel>
 			</step>
-			<step label="Second step" id="second">
+			<step id="second" label="Second step">
 				<panel>
 					<panel-section>
 						Second step content with a
@@ -27,17 +27,17 @@
 					</panel-section>
 				</panel>
 			</step>
-			<step label="Third step" id="third">
+			<step id="third" label="Third step">
 				<panel>
 					<panel-section>Third step content</panel-section>
 				</panel>
 			</step>
-			<step label="Fourth step" id="fourth">
+			<step id="fourth" label="Fourth step">
 				<panel>
 					<panel-section>Fourth step content</panel-section>
 				</panel>
 			</step>
-			<step label="Fifth step" id="fifth">
+			<step id="fifth" label="Fifth step">
 				<panel>
 					<panel-section>Fifth step content</panel-section>
 				</panel>
diff --git a/src/docs/components/SubmissionWizardPage/previews/PreviewSubmissionWizardPage.vue b/src/docs/components/SubmissionWizardPage/previews/PreviewSubmissionWizardPage.vue
index a09e0b6e5..40f75e882 100644
--- a/src/docs/components/SubmissionWizardPage/previews/PreviewSubmissionWizardPage.vue
+++ b/src/docs/components/SubmissionWizardPage/previews/PreviewSubmissionWizardPage.vue
@@ -8,7 +8,7 @@
 				<span class="app__breadcrumbsSeparator" aria-hidden="true">/</span>
 				{{ localize(publication.title) }}
 			</div>
-			<h1 class="app__pageHeading" ref="pageTitle">
+			<h1 ref="pageTitle" class="app__pageHeading">
 				Make Submission
 				<pkp-button
 					:is-disabled="isDisconnected"
@@ -27,11 +27,11 @@
 					Change
 				</button>
 				<modal
-					:closeLabel="t('common.close')"
+					:close-label="t('common.close')"
 					name="config"
 					:open="isModalOpenedConfig"
-					@close="isModalOpenedConfig = false"
 					title="Change Submission Settings"
+					@close="isModalOpenedConfig = false"
 				>
 					<pkp-form
 						v-bind="components.reconfigureSubmission"
@@ -52,8 +52,8 @@
 			>
 				<step
 					v-for="step in steps"
-					:key="step.id"
 					:id="step.id"
+					:key="step.id"
 					:label="step.name"
 				>
 					<panel>
@@ -322,7 +322,7 @@
 			<template #end>
 				<pkp-button
 					v-if="!isOnFirstStep"
-					:isWarnable="true"
+					:is-warnable="true"
 					@click="previousStep"
 				>
 					Back
@@ -362,10 +362,10 @@
 		</button-row>
 
 		<div
+			ref="notifications"
 			aria-live="polite"
 			aria-atomic="true"
 			class="app__notifications"
-			ref="notifications"
 			role="status"
 		>
 			<transition-group name="app__notification">
@@ -410,13 +410,13 @@ import submissionFileForm from '@/docs/components/Form/helpers/form-submission-f
 import titleAbstractForm from '@/docs/components/Form/helpers/form-title-abstract';
 
 export default {
-	extends: SubmissionWizardPage,
 	components: {
 		ContributorsListPanel,
 		File,
 		PkpForm,
 		SubmissionFilesListPanel,
 	},
+	extends: SubmissionWizardPage,
 	data() {
 		// Set up the form for the details step
 		let detailsForm = {...titleAbstractForm};
diff --git a/src/docs/components/SubmissionsPage/previews/PreviewSubmissionsPage.vue b/src/docs/components/SubmissionsPage/previews/PreviewSubmissionsPage.vue
index a2f63ea4c..154530984 100644
--- a/src/docs/components/SubmissionsPage/previews/PreviewSubmissionsPage.vue
+++ b/src/docs/components/SubmissionsPage/previews/PreviewSubmissionsPage.vue
@@ -28,7 +28,7 @@
 				<div class="submissions__list__top">
 					<pkp-button>Start a New Submission</pkp-button>
 				</div>
-				<h1 class="submissions__list__title" id="table-title">
+				<h1 id="table-title" class="submissions__list__title">
 					{{ currentView.name }}
 					<span class="submissions__view__count">
 						{{ submissionsMax }}
@@ -46,7 +46,7 @@
 						<search
 							:search-phrase="searchPhrase"
 							search-label="Search submissions, ID, authors, keywords, etc."
-							@search-phrase-changed="(value) => (this.searchPhrase = value)"
+							@search-phrase-changed="(value) => (searchPhrase = value)"
 						></search>
 					</button-row>
 				</div>
@@ -142,12 +142,12 @@
 			</div>
 		</div>
 		<modal
+			v-if="summarySubmission"
 			close-label="Close"
 			name="summary"
 			type="side"
 			:open="isModalOpenedSummary"
 			@close="isModalOpenedSummary = false"
-			v-if="summarySubmission"
 		>
 			<template #header>
 				<stage-bubble :stage-id="summarySubmission.stageId">
diff --git a/src/docs/components/Table/previews/PreviewLabelledBy.vue b/src/docs/components/Table/previews/PreviewLabelledBy.vue
index 6babd8538..817c18172 100644
--- a/src/docs/components/Table/previews/PreviewLabelledBy.vue
+++ b/src/docs/components/Table/previews/PreviewLabelledBy.vue
@@ -18,7 +18,7 @@
 			</template>
 			<tr v-for="row in rows" :key="row.object.id">
 				<table-cell>{{ row.object.id }}</table-cell>
-				<table-cell :isRowHeader="true">
+				<table-cell :is-row-header="true">
 					{{ row.object.fullTitle.en }}
 				</table-cell>
 				<table-cell>{{ row.views }}</table-cell>
diff --git a/src/docs/components/Table/previews/PreviewPagination.vue b/src/docs/components/Table/previews/PreviewPagination.vue
index f388a8c9c..82cd963ad 100644
--- a/src/docs/components/Table/previews/PreviewPagination.vue
+++ b/src/docs/components/Table/previews/PreviewPagination.vue
@@ -15,7 +15,7 @@
 			</template>
 			<tr v-for="row in currentRows" :key="row.object.id">
 				<table-cell>{{ row.object.id }}</table-cell>
-				<table-cell :isRowHeader="true">
+				<table-cell :is-row-header="true">
 					{{ row.object.fullTitle.en }}
 				</table-cell>
 				<table-cell>{{ row.views }}</table-cell>
@@ -27,8 +27,8 @@
 		</pkp-table>
 		<button-row>
 			<pagination
-				:currentPage="currentPage"
-				:lastPage="lastPage"
+				:current-page="currentPage"
+				:last-page="lastPage"
 				@set-page="setPage"
 			/>
 		</button-row>
@@ -42,11 +42,11 @@ import articleStats from '../helpers/articleStats.js';
 import ButtonRow from '../../../../components/ButtonRow/ButtonRow.vue';
 
 export default {
-	extends: PreviewTable,
 	components: {
 		ButtonRow,
 		Pagination,
 	},
+	extends: PreviewTable,
 	data() {
 		return {
 			currentPage: 1,
diff --git a/src/docs/components/Table/previews/PreviewSorting.vue b/src/docs/components/Table/previews/PreviewSorting.vue
index 4a9f161e7..3a357f5f7 100644
--- a/src/docs/components/Table/previews/PreviewSorting.vue
+++ b/src/docs/components/Table/previews/PreviewSorting.vue
@@ -7,22 +7,22 @@
 			<table-header>ID</table-header>
 			<table-header>Title</table-header>
 			<table-header
-				:canSort="true"
-				:sortDirection="sortColumn === 'views' ? sortDirection : 'none'"
+				:can-sort="true"
+				:sort-direction="sortColumn === 'views' ? sortDirection : 'none'"
 				@table:sort="sort('views')"
 			>
 				Views
 			</table-header>
 			<table-header
-				:canSort="true"
-				:sortDirection="sortColumn === 'downloads' ? sortDirection : 'none'"
+				:can-sort="true"
+				:sort-direction="sortColumn === 'downloads' ? sortDirection : 'none'"
 				@table:sort="sort('downloads')"
 			>
 				Downloads
 			</table-header>
 			<table-header
-				:canSort="true"
-				:sortDirection="sortColumn === 'total' ? sortDirection : 'none'"
+				:can-sort="true"
+				:sort-direction="sortColumn === 'total' ? sortDirection : 'none'"
 				@table:sort="sort('total')"
 			>
 				Total
@@ -30,7 +30,9 @@
 		</template>
 		<tr v-for="row in rows" :key="row.object.id">
 			<table-cell>{{ row.object.id }}</table-cell>
-			<table-cell :isRowHeader="true">{{ row.object.fullTitle.en }}</table-cell>
+			<table-cell :is-row-header="true">
+				{{ row.object.fullTitle.en }}
+			</table-cell>
 			<table-cell>{{ row.views }}</table-cell>
 			<table-cell>{{ row.downloads }}</table-cell>
 			<table-cell>
diff --git a/src/docs/components/Table/previews/PreviewTable.vue b/src/docs/components/Table/previews/PreviewTable.vue
index a592d73d6..84b593de9 100644
--- a/src/docs/components/Table/previews/PreviewTable.vue
+++ b/src/docs/components/Table/previews/PreviewTable.vue
@@ -12,7 +12,9 @@
 		</template>
 		<tr v-for="row in rows" :key="row.object.id">
 			<table-cell>{{ row.object.id }}</table-cell>
-			<table-cell :isRowHeader="true">{{ row.object.fullTitle.en }}</table-cell>
+			<table-cell :is-row-header="true">
+				{{ row.object.fullTitle.en }}
+			</table-cell>
 			<table-cell>{{ row.views }}</table-cell>
 			<table-cell>{{ row.downloads }}</table-cell>
 			<table-cell>
diff --git a/src/docs/components/Tabs/previews/PreviewBadge.vue b/src/docs/components/Tabs/previews/PreviewBadge.vue
index 9bd589a1e..595aabbf5 100644
--- a/src/docs/components/Tabs/previews/PreviewBadge.vue
+++ b/src/docs/components/Tabs/previews/PreviewBadge.vue
@@ -1,7 +1,7 @@
 <template>
 	<tabs label="Default demo of tabs component">
-		<tab label="First tab" id="first" badge="12">First tab content</tab>
-		<tab label="Second tab" id="second" badge="2">Second tab content</tab>
-		<tab label="Third tab" id="third">Third tab content</tab>
+		<tab id="first" label="First tab" badge="12">First tab content</tab>
+		<tab id="second" label="Second tab" badge="2">Second tab content</tab>
+		<tab id="third" label="Third tab">Third tab content</tab>
 	</tabs>
 </template>
diff --git a/src/docs/components/Tabs/previews/PreviewDefault.vue b/src/docs/components/Tabs/previews/PreviewDefault.vue
index 4bfd00e68..66528eac5 100644
--- a/src/docs/components/Tabs/previews/PreviewDefault.vue
+++ b/src/docs/components/Tabs/previews/PreviewDefault.vue
@@ -1,12 +1,12 @@
 <template>
 	<tabs
-		defaultTab="second"
+		default-tab="second"
 		label="Demonstration of tabs with the middle tab opened by default"
 	>
-		<tab label="First tab" id="first">First tab content</tab>
-		<tab label="Default tab" id="second">
+		<tab id="first" label="First tab">First tab content</tab>
+		<tab id="second" label="Default tab">
 			Default tab content displays first when opened
 		</tab>
-		<tab label="Third tab" id="third">Third tab content</tab>
+		<tab id="third" label="Third tab">Third tab content</tab>
 	</tabs>
 </template>
diff --git a/src/docs/components/Tabs/previews/PreviewIcon.vue b/src/docs/components/Tabs/previews/PreviewIcon.vue
index 3e13231ab..81f9c66d5 100644
--- a/src/docs/components/Tabs/previews/PreviewIcon.vue
+++ b/src/docs/components/Tabs/previews/PreviewIcon.vue
@@ -1,7 +1,7 @@
 <template>
 	<tabs label="Demonstration of tabs with icon-only display">
-		<tab icon="bell-o" label="First tab" id="first">First tab content</tab>
-		<tab label="Second tab" id="second">Second tab content</tab>
-		<tab label="Third tab" id="third">Third tab content</tab>
+		<tab id="first" icon="bell-o" label="First tab">First tab content</tab>
+		<tab id="second" label="Second tab">Second tab content</tab>
+		<tab id="third" label="Third tab">Third tab content</tab>
 	</tabs>
 </template>
diff --git a/src/docs/components/Tabs/previews/PreviewNested.vue b/src/docs/components/Tabs/previews/PreviewNested.vue
index 0d5430c35..71739d977 100644
--- a/src/docs/components/Tabs/previews/PreviewNested.vue
+++ b/src/docs/components/Tabs/previews/PreviewNested.vue
@@ -1,13 +1,13 @@
 <template>
 	<tabs label="Tabs that include another set of tabs">
-		<tab label="First tab" id="first">
+		<tab id="first" label="First tab">
 			<tabs label="Tabs nested inside of a tab">
-				<tab label="Tab A" id="A">Tab A Content</tab>
-				<tab label="Tab B" id="B">Tab B content</tab>
-				<tab label="Tab C" id="C">Tab C content</tab>
+				<tab id="A" label="Tab A">Tab A Content</tab>
+				<tab id="B" label="Tab B">Tab B content</tab>
+				<tab id="C" label="Tab C">Tab C content</tab>
 			</tabs>
 		</tab>
-		<tab label="Second tab" id="second">Second tab content</tab>
-		<tab label="Third tab" id="third">Third tab content</tab>
+		<tab id="second" label="Second tab">Second tab content</tab>
+		<tab id="third" label="Third tab">Third tab content</tab>
 	</tabs>
 </template>
diff --git a/src/docs/components/Tabs/previews/PreviewSide.vue b/src/docs/components/Tabs/previews/PreviewSide.vue
index 44ca788c0..ef9658ee6 100644
--- a/src/docs/components/Tabs/previews/PreviewSide.vue
+++ b/src/docs/components/Tabs/previews/PreviewSide.vue
@@ -1,13 +1,13 @@
 <template>
 	<tabs label="Demonstration of nested side tabs">
-		<tab label="First tab" id="first">
-			<tabs :isSideTabs="true" label="Side tabs nested inside of a tab">
-				<tab label="Tab A" id="a">Tab A content</tab>
-				<tab label="Tab B With the Long Name" id="b">Tab B content</tab>
-				<tab label="Tab C" id="c">Tab C content</tab>
+		<tab id="first" label="First tab">
+			<tabs :is-side-tabs="true" label="Side tabs nested inside of a tab">
+				<tab id="a" label="Tab A">Tab A content</tab>
+				<tab id="b" label="Tab B With the Long Name">Tab B content</tab>
+				<tab id="c" label="Tab C">Tab C content</tab>
 			</tabs>
 		</tab>
-		<tab label="Second tab" id="second">Second tab content</tab>
-		<tab label="Third tab" id="third">Third tab content</tab>
+		<tab id="second" label="Second tab">Second tab content</tab>
+		<tab id="third" label="Third tab">Third tab content</tab>
 	</tabs>
 </template>
diff --git a/src/docs/components/Tabs/previews/PreviewTabs.vue b/src/docs/components/Tabs/previews/PreviewTabs.vue
index d6e20b6a2..196f0d189 100644
--- a/src/docs/components/Tabs/previews/PreviewTabs.vue
+++ b/src/docs/components/Tabs/previews/PreviewTabs.vue
@@ -1,7 +1,7 @@
 <template>
 	<tabs label="Default demo of tabs component">
-		<tab label="First tab" id="first">First tab content</tab>
-		<tab label="Second tab" id="second">Second tab content</tab>
-		<tab label="Third tab" id="third">Third tab content</tab>
+		<tab id="first" label="First tab">First tab content</tab>
+		<tab id="second" label="Second tab">Second tab content</tab>
+		<tab id="third" label="Third tab">Third tab content</tab>
 	</tabs>
 </template>
diff --git a/src/docs/components/WorkflowPage/previews/PreviewWorkflowPage.vue b/src/docs/components/WorkflowPage/previews/PreviewWorkflowPage.vue
index 17e9bf6a4..d850d2de5 100644
--- a/src/docs/components/WorkflowPage/previews/PreviewWorkflowPage.vue
+++ b/src/docs/components/WorkflowPage/previews/PreviewWorkflowPage.vue
@@ -67,7 +67,7 @@
 				</notification>
 			</tab>
 			<tab id="publication" label="Publication">
-				<div class="pkpPublication" ref="publication" aria-live="polite">
+				<div ref="publication" class="pkpPublication" aria-live="polite">
 					<pkp-header class="pkpPublication__header" :is-one-line="false">
 						<span class="pkpPublication__status">
 							<strong>{{ statusLabel }}</strong>
@@ -215,12 +215,12 @@
 							<contributors-list-panel
 								v-bind="components.contributors"
 								class="pkpWorkflow__contributors"
-								@set="set"
 								:items="workingPublication.authors"
 								:publication="workingPublication"
 								:publication-api-url="
 									submissionApiUrl + '/publications/' + workingPublication.id
 								"
+								@set="set"
 								@updated:publication="setWorkingPublication"
 								@updated:contributors="setContributors"
 							></contributors-list-panel>
@@ -250,10 +250,10 @@
 			</tab>
 		</tabs>
 		<div
+			ref="notifications"
 			aria-live="polite"
 			aria-atomic="true"
 			class="app__notifications"
-			ref="notifications"
 			role="status"
 		>
 			<transition-group name="app__notification">
@@ -492,14 +492,6 @@ export default {
 			workingPublication: latestPublication,
 		};
 	},
-	methods: {
-		alert(msg) {
-			alert(msg);
-		},
-		showTab(tab) {
-			pkp.eventBus.$emit('open-tab', tab);
-		},
-	},
 	created() {
 		pkp.localeKeys['contributor.listPanel.preview.description'] =
 			'Contributors to this publication will be identified in this journal in the following formats.';
@@ -510,6 +502,14 @@ export default {
 			'Publication Lists';
 		pkp.localeKeys['contributor.listPanel.preview.full'] = 'Full';
 	},
+	methods: {
+		alert(msg) {
+			alert(msg);
+		},
+		showTab(tab) {
+			pkp.eventBus.$emit('open-tab', tab);
+		},
+	},
 };
 </script>
 
diff --git a/src/docs/mixins/Fetch/previews/PreviewFetch.vue b/src/docs/mixins/Fetch/previews/PreviewFetch.vue
index 492ba3fa8..94195aa11 100644
--- a/src/docs/mixins/Fetch/previews/PreviewFetch.vue
+++ b/src/docs/mixins/Fetch/previews/PreviewFetch.vue
@@ -4,14 +4,14 @@
 			<fieldset class="previewFetch__field">
 				<legend>Show items in:</legend>
 				<label v-for="(name, id) in sections" :key="id">
-					<input type="checkbox" v-model="sectionsSelected" :value="id" />
+					<input v-model="sectionsSelected" type="checkbox" :value="id" />
 					{{ name }}
 				</label>
 			</fieldset>
 			<div class="previewFetch__field">
 				<label>
 					Search:
-					<input type="search" v-model="searchPhrase" />
+					<input v-model="searchPhrase" type="search" />
 				</label>
 			</div>
 		</form>
@@ -44,6 +44,20 @@ export default {
 			submissions: [...submissions],
 		};
 	},
+	watch: {
+		searchPhrase(newVal, oldVal) {
+			this.activeFilters = {
+				...this.activeFilters,
+				searchPhrase: newVal,
+			};
+		},
+		sectionsSelected(newVal, oldVal) {
+			this.activeFilters = {
+				...this.activeFilters,
+				sectionIds: newVal.map((id) => parseInt(id, 10)),
+			};
+		},
+	},
 	methods: {
 		/**
 		 * Overwrite the `get()` method of the
@@ -70,20 +84,6 @@ export default {
 				});
 		},
 	},
-	watch: {
-		searchPhrase(newVal, oldVal) {
-			this.activeFilters = {
-				...this.activeFilters,
-				searchPhrase: newVal,
-			};
-		},
-		sectionsSelected(newVal, oldVal) {
-			this.activeFilters = {
-				...this.activeFilters,
-				sectionIds: newVal.map((id) => parseInt(id, 10)),
-			};
-		},
-	},
 };
 </script>
 
diff --git a/src/docs/utilities/Notify/previews/PreviewNotify.vue b/src/docs/utilities/Notify/previews/PreviewNotify.vue
index 430362553..d989412fb 100644
--- a/src/docs/utilities/Notify/previews/PreviewNotify.vue
+++ b/src/docs/utilities/Notify/previews/PreviewNotify.vue
@@ -12,20 +12,20 @@
 			@click="
 				notify(
 					'An unexpected error has occurred. Please refresh the page and try again.',
-					'warning'
+					'warning',
 				)
 			"
 		>
 			Warning
 		</pkp-button>
-		<pkp-button :isWarnable="true" @click="clearAll">
+		<pkp-button :is-warnable="true" @click="clearAll">
 			Clear All Notifications
 		</pkp-button>
 		<div
+			ref="notifications"
 			aria-live="polite"
 			aria-atomic="true"
 			class="app__notifications"
-			ref="notifications"
 			role="status"
 		>
 			<transition-group name="app__notification">
diff --git a/src/mixins/autosave.js b/src/mixins/autosave.js
index 5b183cf41..f66f9d1f4 100644
--- a/src/mixins/autosave.js
+++ b/src/mixins/autosave.js
@@ -137,7 +137,7 @@ export default {
 						'{$when}',
 						moment(storedAutosaves[0].timestamp)
 							.locale(this.getMomentLocale($.pkp.app.currentLocale))
-							.fromNow()
+							.fromNow(),
 					),
 					actions: [
 						{
diff --git a/src/mixins/fetch.js b/src/mixins/fetch.js
index e1d737489..eb215d670 100644
--- a/src/mixins/fetch.js
+++ b/src/mixins/fetch.js
@@ -136,7 +136,7 @@ export default {
 		 */
 		setItems(items, itemsMax) {
 			throw new Error(
-				'Missing function to set items after get request. This mixin requires that the component implements a `setItems` method which handles the items received from the get request.'
+				'Missing function to set items after get request. This mixin requires that the component implements a `setItems` method which handles the items received from the get request.',
 			);
 		},
 
diff --git a/src/pages/submissions/ColumnStage.vue b/src/pages/submissions/ColumnStage.vue
index 38b3a4657..8763b475a 100644
--- a/src/pages/submissions/ColumnStage.vue
+++ b/src/pages/submissions/ColumnStage.vue
@@ -33,11 +33,11 @@ export default {
 		TableCell,
 		StageBubble,
 	},
-	data() {
-		return {pkp: window.pkp};
-	},
 	props: {
 		submission: Object,
 	},
+	data() {
+		return {pkp: window.pkp};
+	},
 };
 </script>
diff --git a/src/pages/submissions/ColumnTitle.vue b/src/pages/submissions/ColumnTitle.vue
index 0fe62a29b..e0001c28f 100644
--- a/src/pages/submissions/ColumnTitle.vue
+++ b/src/pages/submissions/ColumnTitle.vue
@@ -1,7 +1,7 @@
 <template>
 	<TableCell
-		class="submissions__list__item__title"
 		:id="'submission-title-' + submission.id"
+		class="submissions__list__item__title"
 		:is-row-header="true"
 	>
 		<span class="submissions__list__item__author">
diff --git a/src/pages/submissions/SubmissionSummaryModal.vue b/src/pages/submissions/SubmissionSummaryModal.vue
index c9416888f..88f3809b8 100644
--- a/src/pages/submissions/SubmissionSummaryModal.vue
+++ b/src/pages/submissions/SubmissionSummaryModal.vue
@@ -93,7 +93,7 @@
 				<div class="p-4">
 					<div class="text-lg-bold">Editors assigned:</div>
 					<div>
-						<PkpButton isLink="true" @click="store.openAssignParticipantModal">
+						<PkpButton is-link="true" @click="store.openAssignParticipantModal">
 							Assign Editors
 						</PkpButton>
 					</div>