i18n, vue-router and vuex upgrade

1. Configuration of i18n legacy as false.
2. Translation function t is called using the useI18n.
3. Used the i18n.global.t() function from i18n instead of this.$t()
4. Event bus error that occurred during logout.
5. Implemented vue-router 4.4.0 and vuex upgrade to 4.1.0

Change-Id: I9464d82c76dcc1445ce271983ea3ab9d7b03d265
Signed-off-by: Surya Venkatesan <suryav@ami.com>

1 files changed, 11 insertions, 3 deletions

diff --git a/src/views/Login/Login.vue b/src/views/Login/Login.vue
index cbf9f3e7..5c0d41e8 100644
--- a/src/views/Login/Login.vue
+++ b/src/views/Login/Login.vue
@@ -8,7 +8,7 @@
     <b-form-group label-for="language" :label="$t('pageLogin.language')">
       <b-form-select
         id="language"
-        v-model="$i18n.locale"
+        v-model="userLocale"
         :options="languages"
         data-test-id="login-select-language"
       ></b-form-select>
@@ -67,8 +67,8 @@
 import { required } from '@vuelidate/validators';
 import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
 import { useVuelidate } from '@vuelidate/core';
-
-import i18n from '@/i18n';
+import { ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
 import Alert from '@/components/Global/Alert';
 import InputPasswordToggle from '@/components/Global/InputPasswordToggle';
 
@@ -77,12 +77,20 @@ export default {
   components: { Alert, InputPasswordToggle },
   mixins: [VuelidateMixin],
   setup() {
+    const { locale } = useI18n();
+    const userLocale = ref(locale.value);
+    watch(userLocale, (newLocale) => {
+      locale.value = newLocale;
+      localStorage.setItem('storedLanguage', newLocale);
+    });
     return {
+      userLocale,
       v$: useVuelidate(),
     };
   },
   data() {
     return {
+      $t: useI18n().t,
       userInfo: {
         username: null,
         password: null,