🐛 Fix translations not updating correctly

src/components/LanguageSelect.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="action language-select">
-    <select v-model="currentLanguage">
+    <select v-model="language">
       <option
         v-for="(lang, i) in langs"
-        :key="`Lang${i}`"
+        :key="lang"
         :value="lang"
       >
         {{ lang }}
@@ -13,7 +13,6 @@
 </template>
 
 <script>
-import {mapActions} from 'vuex'
 export default {
   name: 'LanguageSelect',
   data() {
@@ -23,17 +22,18 @@ export default {
         'de',
         'zh'
       ],
-      currentLanguage: 'en'
     }
   },
-  watch: {
-    currentLanguage(v) {
-      this.setLanguage(v)
+  computed: {
+    language: {
+      get() {
+        return this.$store.state.language
+      },
+      set(value) {
+        this.$store.dispatch('setLanguage', value)
+      }
     }
   },
-  methods: {
-    ...mapActions(['setLanguage'])
-  },
 }
 </script>
 

src/components/ScoringTable.vue

@@ -57,7 +57,7 @@
       <div class="cell cell--label">
         <ToggleButton
           v-model="showResults"
-          :name="totalText"
+          :name="$t('total')"
         />
       </div>
       <div
@@ -101,9 +101,6 @@ export default {
       'showTotal',
       'touchedPlayerTitles'
     ]),
-    totalText () {
-      return this.$t('total')
-    }
   },
   methods: {
     score (scoreType, playerNum) {

src/store.js

@@ -61,6 +61,7 @@ const loadState = () => {
       state = defaultState;
     }
   }
+  i18n.global.locale = state.language;
   return state;
 };
 
@@ -152,10 +153,5 @@ export const store = createStore({
       i18n.global.locale = language;
       commit("setLanguage", language);
     },
-
-    toggleLanguage({ state, dispatch }) {
-      const newLang = state.language === "en" ? "de" : "en";
-      dispatch("setLanguage", newLang);
-    },
   },
 });