all locale handling is done by store, so that commit the language to store on change is enough. Note that dispatch login calls commit language

frontend/src/components/#LanguageSwitchSelect.vue#

@@ -0,0 +1,39 @@
+<template>
+  <div class="language-switch-select">
+    <b-form-select
+      v-model="selected"
+      :options="options"
+      class="selectedLanguage mb-3"
+    ></b-form-select>
+  </div>
+</template>
+<script>
+export default {
+  name: 'LanguageSwitch',
+  data() {
+    return {
+      selected: null,
+      options: [
+        { value: 'de', text: this.$t('settings.language.de') },
+        { value: 'en', text: this.$t('settings.language.en') },
+      ],
+    }
+  },
+  props: {
+    language: { type: String },
+  },
+  created() {
+    this.selected = this.$store.state.language
+  },
+  computed: {
+    languageObject() {
+      return this.selected
+    },
+  },
+  watch: {
+    selected() {
+      this.$emit('update-language', this.languageObject)
+    },
+  },
+}
+</script>

frontend/src/components/.#LanguageSwitchSelect.vue

@@ -0,0 +1 @@
+moriz@bluestar.2222:1642854724

frontend/src/components/LanguageSwitch.vue

@@ -12,7 +12,6 @@
   </div>
 </template>
 <script>
-import { localeChanged } from 'vee-validate'
 import locales from '../locales/'
 import { updateUserInfos } from '../graphql/mutations'
 
@@ -26,10 +25,8 @@ export default {
   },
   methods: {
     setLocale(locale) {
-      this.$i18n.locale = locale
-      this.$store.commit('language', this.$i18n.locale)
+      this.$store.commit('language', locale)
       this.currentLanguage = this.getLocaleObject(locale)
-      localeChanged(locale)
     },
     async saveLocale(locale) {
       // if (this.$i18n.locale === locale) return

frontend/src/main.js

@@ -28,7 +28,7 @@ Vue.toasted.register(
 
 loadAllRules(i18n)
 
-addNavigationGuards(router, store, apolloProvider.defaultClient, i18n)
+addNavigationGuards(router, store, apolloProvider.defaultClient)
 
 if (!store) {
   setTimeout(

frontend/src/routes/guards.js

@@ -1,6 +1,6 @@
 import { verifyLogin } from '../graphql/queries'
 
-const addNavigationGuards = (router, store, apollo, i18n) => {
+const addNavigationGuards = (router, store, apollo) => {
   // handle publisherId
   router.beforeEach((to, from, next) => {
     const publisherId = to.query.pid
@@ -21,7 +21,6 @@ const addNavigationGuards = (router, store, apollo, i18n) => {
           fetchPolicy: 'network-only',
         })
         .then((result) => {
-          i18n.locale = result.data.verifyLogin.language
           store.dispatch('login', result.data.verifyLogin)
           next({ path: '/overview' })
         })

frontend/src/views/Pages/Register.vue

@@ -191,7 +191,6 @@
 import InputEmail from '../../components/Inputs/InputEmail.vue'
 import LanguageSwitchSelect from '../../components/LanguageSwitchSelect.vue'
 import { createUser } from '../../graphql/mutations'
-import { localeChanged } from 'vee-validate'
 import { getCommunityInfoMixin } from '../../mixins/getCommunityInfo'
 
 export default {
@@ -218,8 +217,6 @@ export default {
     updateLanguage(e) {
       this.language = e
       this.$store.commit('language', this.language)
-      this.$i18n.locale = this.language
-      localeChanged(this.language)
     },
     getValidationState({ dirty, validated, valid = null }) {
       return dirty || validated ? valid : null

frontend/src/views/Pages/UserProfile/UserCard_Language.spec.js

@@ -138,10 +138,6 @@ describe('UserCard_Language', () => {
               expect(storeCommitMock).toBeCalledWith('language', 'en')
             })
 
-            it('changes the i18n locale', () => {
-              expect(mocks.$i18n.locale).toBe('en')
-            })
-
             it('has no select field anymore', () => {
               expect(wrapper.find('select').exists()).toBeFalsy()
             })

frontend/src/views/Pages/UserProfile/UserCard_Language.vue

@@ -60,7 +60,6 @@
   </b-card>
 </template>
 <script>
-import { localeChanged } from 'vee-validate'
 import LanguageSwitchSelect from '../../../components/LanguageSwitchSelect.vue'
 import { updateUserInfos } from '../../../graphql/mutations'
 
@@ -97,8 +96,6 @@ export default {
         })
         .then(() => {
           this.$store.commit('language', this.language)
-          this.$i18n.locale = this.language
-          localeChanged(this.language)
           this.cancelEdit()
           this.$toasted.success(this.$t('settings.language.success'))
         })