diff --git a/src/components/Container/ChangeSubmissionLanguage.vue b/src/components/Container/ChangeSubmissionLanguage.vue
new file mode 100644
index 000000000..fcf6bd335
--- /dev/null
+++ b/src/components/Container/ChangeSubmissionLanguage.vue
@@ -0,0 +1,139 @@
+<template>
+	<pkp-form
+		v-bind="form"
+		@set="
+			(formId, data) =>
+				$emit('updateSubmissionLangMetadataFormData', formId, data)
+		"
+		@success="changeLanguage"
+	></pkp-form>
+</template>
+
+<script type="text/javascript">
+import PkpForm from '@/components/Form/Form.vue';
+import ajaxError from '@/mixins/ajaxError';
+
+export default {
+	name: 'ChangeSubmissionLanguage',
+	components: {
+		PkpForm,
+	},
+	mixins: [ajaxError],
+	props: {
+		form: {
+			type: Object,
+			required: true,
+		},
+		isModalOpenedChangeSubmissionLanguage: {
+			type: Boolean,
+			required: true,
+		},
+		submission: {
+			type: Object,
+			required: true,
+		},
+		submissionApiUrl: {
+			type: String,
+			required: true,
+		},
+		workingPublication: {
+			type: Object,
+			required: true,
+		},
+	},
+	data() {
+		return {
+			formMetadataId: pkp.const.FORM_CHANGE_SUBMISSION_LANGUAGE_METADATA,
+			formLocaleId: pkp.const.FORM_CHANGE_SUBMISSION_LANGUAGE,
+		};
+	},
+	created() {
+		/**
+		 * Subscribe to publication forms and update the publication
+		 * with the details that have changed
+		 */
+		pkp.eventBus.$on('form-success', (formId) => {
+			if (formId === this.formLocaleId) {
+				window.location.reload();
+			}
+		});
+	},
+	unmounted() {
+		pkp.eventBus.$off('form-success');
+	},
+	methods: {
+		/**
+		 * Change submission language and update contributor props
+		 */
+		async changeLanguage() {
+			const oldLocale = this.submission.locale;
+			const newLocale = this.form.primaryLocale;
+			const self = this;
+			return editContributors().then(
+				submitLang().then(() => {
+					self.$emit('updateIsModalOpenedChangeSubmissionLanguage', false);
+				}, $.noop),
+				$.noop,
+			);
+
+			async function editContributors() {
+				if (newLocale === oldLocale) return;
+
+				return $.when(
+					...self.workingPublication.authors.map((author) => {
+						return send(
+							`${self.submissionApiUrl}/publications/${self.workingPublication.id}/contributors/${author.id}`,
+							edit(author),
+						);
+					}),
+				);
+
+				function edit(author) {
+					// Only edit if given name empty
+					if (author['givenName'][newLocale] !== '') return {};
+					return ['givenName', 'familyName', 'preferredPublicName'].reduce(
+						(editedProps, prop) => {
+							if (author[prop][newLocale] === '') {
+								editedProps[prop] = {[newLocale]: author[prop][oldLocale]};
+							}
+							return editedProps;
+						},
+						{},
+					);
+				}
+			}
+
+			async function submitLang() {
+				return send(self.submissionApiUrl, {locale: newLocale}, (r) =>
+					pkp.eventBus.$emit('form-success', self.formLocaleId, r),
+				);
+			}
+
+			async function send(url, data, success = $.noop) {
+				return $.ajax({
+					url: url,
+					method: 'POST',
+					headers: {
+						'X-Csrf-Token': pkp.currentUser.csrfToken,
+						'X-Http-Method-Override': 'PUT',
+					},
+					data: data,
+					success(r) {
+						success(r);
+					},
+					error(r) {
+						self.ajaxErrorCallback(r);
+					},
+				});
+			}
+		},
+	},
+};
+</script>
+
+<style lang="less">
+// Hide formlocales of change language metadata form
+#changeSubmissionLanguage form .pkpFormLocales {
+	display: none;
+}
+</style>
diff --git a/src/components/Container/WorkflowPage.vue b/src/components/Container/WorkflowPage.vue
index 6abe72994..07033524f 100644
--- a/src/components/Container/WorkflowPage.vue
+++ b/src/components/Container/WorkflowPage.vue
@@ -1,5 +1,6 @@
 <script type="text/javascript">
 import Page from './Page.vue';
+import ChangeSubmissionLanguage from '@/components/Container/ChangeSubmissionLanguage.vue';
 import ContributorsListPanel from '@/components/ListPanel/contributors/ContributorsListPanel.vue';
 import PublicationSectionJats from '@/pages/workflow/PublicationSectionJats.vue';
 import Composer from '@/components/Composer/Composer.vue';
@@ -13,6 +14,7 @@ import dialog from '@/mixins/dialog.js';
 export default {
 	name: 'WorkflowPage',
 	components: {
+		ChangeSubmissionLanguage,
 		ContributorsListPanel,
 		Composer,
 		Dropdown,
@@ -44,7 +46,6 @@ export default {
 			submissionFileApiUrl: '',
 			submissionLibraryLabel: '',
 			submissionLibraryUrl: '',
-			submissionSupportedLocales: [],
 			supportsReferences: false,
 			statusLabel: '',
 			unpublishConfirmLabel: '',
@@ -137,10 +138,6 @@ export default {
 				this.submission.currentPublicationId = newPublication.id;
 				this.refreshSubmission();
 			}
-
-			if (formId === pkp.const.FORM_CHANGE_SUBMISSION_LANGUAGE) {
-				window.location.reload();
-			}
 		});
 
 		/**
@@ -186,78 +183,6 @@ export default {
 		pkp.eventBus.$off('recommendation:revisions');
 	},
 	methods: {
-		/**
-		 * Change submission language and update contributor props
-		 */
-		async changeSubmissionLanguage() {
-			const oldLocale = this.submission.locale;
-			const newLocale =
-				this.components[pkp.const.FORM_CHANGE_SUBMISSION_LANGUAGE_METADATA]
-					.primaryLocale;
-			const self = this;
-			return editContributors().then(
-				submitLang().then(() => {
-					this.isModalOpenedChangeSubmissionLanguage = false;
-				}, $.noop),
-				$.noop,
-			);
-
-			async function editContributors() {
-				if (newLocale === oldLocale) return;
-
-				return $.when(
-					...self.workingPublication.authors.map((author) => {
-						return send(
-							`${self.submissionApiUrl}/publications/${self.workingPublication.id}/contributors/${author.id}`,
-							edit(author),
-						);
-					}),
-				);
-
-				function edit(author) {
-					// Only edit if given name empty
-					if (author['givenName'][newLocale] !== '') return {};
-					return ['givenName', 'familyName', 'preferredPublicName'].reduce(
-						(editedProps, prop) => {
-							if (author[prop][newLocale] === '') {
-								editedProps[prop] = {[newLocale]: author[prop][oldLocale]};
-							}
-							return editedProps;
-						},
-						{},
-					);
-				}
-			}
-
-			async function submitLang() {
-				return send(self.submissionApiUrl, {locale: newLocale}, (r) =>
-					pkp.eventBus.$emit(
-						'form-success',
-						pkp.const.FORM_CHANGE_SUBMISSION_LANGUAGE,
-						r,
-					),
-				);
-			}
-
-			async function send(url, data, success = $.noop) {
-				return $.ajax({
-					url: url,
-					method: 'POST',
-					headers: {
-						'X-Csrf-Token': pkp.currentUser.csrfToken,
-						'X-Http-Method-Override': 'PUT',
-					},
-					data: data,
-					success(r) {
-						success(r);
-					},
-					error(r) {
-						self.ajaxErrorCallback(r);
-					},
-				});
-			}
-		},
-
 		/**
 		 * Create a new version of the latest publication
 		 */
@@ -669,16 +594,14 @@ export default {
 		updateSubmissionLangMetadataFormData(formId, data) {
 			this.set(formId, data);
 			const form = this.components[formId];
-			const oldLocale = form.primaryLocale;
-			const newLocale = data.fields ? data.fields[0].value : oldLocale;
+			const newLocale = data.fields ? data.fields[0].value : form.primaryLocale;
 
-			if (newLocale === oldLocale) return;
-
-			form.primaryLocale = newLocale;
-			form.visibleLocales = [newLocale];
-			Object.keys(data).forEach(function (key) {
-				form[key] = data[key];
-			});
+			if (newLocale !== form.primaryLocale) {
+				this.set(formId, {
+					primaryLocale: newLocale,
+					visibleLocales: [newLocale],
+				});
+			}
 		},
 
 		/**
@@ -833,9 +756,4 @@ export default {
 #representations-grid {
 	padding-top: 2rem;
 }
-
-// Hide formlocales of change language metadata form
-#changeSubmissionLanguage form .pkpFormLocales {
-	display: none;
-}
 </style>