Vuelidate, I18n, and filter are upgraded to vue3

While navigating to the pages i18n, vuelidate, and filters errors
occurred. i18n, and vuelidate code changes in each page adapted to
vue3. Filter global function for date and time format implemented
in the main.js file and those files which as called the filter
functions.

Change-Id: If1a2ee22d47750faef1c35ef2c263299067d9a20
Signed-off-by: Surya Venkatesan <suryav@ami.com>
diff --git a/src/views/Operations/FactoryReset/FactoryReset.vue b/src/views/Operations/FactoryReset/FactoryReset.vue
index 40330b1..f59b0a2 100644
--- a/src/views/Operations/FactoryReset/FactoryReset.vue
+++ b/src/views/Operations/FactoryReset/FactoryReset.vue
@@ -60,6 +60,7 @@
 import BVToastMixin from '@/components/Mixins/BVToastMixin';
 import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin';
 import ModalReset from './FactoryResetModal';
+import { useI18n } from 'vue-i18n';
 
 export default {
   name: 'FactoryReset',
@@ -67,6 +68,7 @@
   mixins: [LoadingBarMixin, BVToastMixin],
   data() {
     return {
+      $t: useI18n().t,
       resetOption: 'resetBios',
     };
   },
diff --git a/src/views/Operations/FactoryReset/FactoryResetModal.vue b/src/views/Operations/FactoryReset/FactoryResetModal.vue
index 55ac176..8784d4a 100644
--- a/src/views/Operations/FactoryReset/FactoryResetModal.vue
+++ b/src/views/Operations/FactoryReset/FactoryResetModal.vue
@@ -32,13 +32,13 @@
       <b-form-checkbox
         v-model="confirm"
         aria-describedby="reset-to-default-warning"
-        @input="$v.confirm.$touch()"
+        @input="v$.confirm.$touch()"
       >
         {{ $t(`pageFactoryReset.modal.resetWarningCheckLabel`) }}
       </b-form-checkbox>
       <b-form-invalid-feedback
         role="alert"
-        :state="getValidationState($v.confirm)"
+        :state="getValidationState(v$.confirm)"
       >
         {{ $t('global.form.fieldRequired') }}
       </b-form-invalid-feedback>
@@ -66,6 +66,7 @@
 <script>
 import StatusIcon from '@/components/Global/StatusIcon';
 import VuelidateMixin from '@/components/Mixins/VuelidateMixin';
+import { useI18n } from 'vue-i18n';
 
 export default {
   components: { StatusIcon },
@@ -78,6 +79,7 @@
   },
   data() {
     return {
+      $t: useI18n().t,
       confirm: false,
     };
   },
@@ -98,15 +100,15 @@
   },
   methods: {
     handleConfirm() {
-      this.$v.$touch();
-      if (this.$v.$invalid) return;
+      this.v$.$touch();
+      if (this.v$.$invalid) return;
       this.$emit('okConfirm');
       this.$nextTick(() => this.$refs.modal.hide());
       this.resetConfirm();
     },
     resetConfirm() {
       this.confirm = false;
-      this.$v.$reset();
+      this.v$.$reset();
     },
   },
 };
diff --git a/src/views/Operations/Firmware/Firmware.vue b/src/views/Operations/Firmware/Firmware.vue
index 44a721a..db1a4c7 100644
--- a/src/views/Operations/Firmware/Firmware.vue
+++ b/src/views/Operations/Firmware/Firmware.vue
@@ -46,6 +46,7 @@
 import PageTitle from '@/components/Global/PageTitle';
 
 import LoadingBarMixin, { loading } from '@/components/Mixins/LoadingBarMixin';
+import { useI18n } from 'vue-i18n';
 
 export default {
   name: 'FirmwareSingleImage',
@@ -64,6 +65,7 @@
   },
   data() {
     return {
+      $t: useI18n().t,
       loading,
       isServerPowerOffRequired:
         process.env.VUE_APP_SERVER_OFF_REQUIRED === 'true',
diff --git a/src/views/Operations/Firmware/FirmwareAlertServerPower.vue b/src/views/Operations/Firmware/FirmwareAlertServerPower.vue
index 08e4ae9..94cac57 100644
--- a/src/views/Operations/Firmware/FirmwareAlertServerPower.vue
+++ b/src/views/Operations/Firmware/FirmwareAlertServerPower.vue
@@ -32,6 +32,7 @@
 
 <script>
 import Alert from '@/components/Global/Alert';
+import { useI18n } from 'vue-i18n';
 
 export default {
   components: { Alert },
@@ -42,6 +43,11 @@
       default: true,
     },
   },
+  data() {
+    return {
+      $t: useI18n().t,
+    };
+  },
   computed: {
     isOperationInProgress() {
       return this.$store.getters['controls/isOperationInProgress'];
diff --git a/src/views/Operations/Firmware/FirmwareCardsBmc.vue b/src/views/Operations/Firmware/FirmwareCardsBmc.vue
index bfca14c..2d18d5b 100644
--- a/src/views/Operations/Firmware/FirmwareCardsBmc.vue
+++ b/src/views/Operations/Firmware/FirmwareCardsBmc.vue
@@ -58,6 +58,8 @@
 import BVToastMixin from '@/components/Mixins/BVToastMixin';
 
 import ModalSwitchToRunning from './FirmwareModalSwitchToRunning';
+import { useI18n } from 'vue-i18n';
+import i18n from '@/i18n';
 
 export default {
   components: { IconSwitch, ModalSwitchToRunning, PageSection },
@@ -76,6 +78,7 @@
   },
   data() {
     return {
+      $t: useI18n().t,
       loading,
       switchToBackupImageDisabled:
         process.env.VUE_APP_SWITCH_TO_BACKUP_IMAGE_DISABLED === 'true',
@@ -87,9 +90,9 @@
     },
     sectionTitle() {
       if (this.isSingleFileUploadEnabled) {
-        return this.$t('pageFirmware.sectionTitleBmcCardsCombined');
+        return i18n.global.t('pageFirmware.sectionTitleBmcCardsCombined');
       }
-      return this.$t('pageFirmware.sectionTitleBmcCards');
+      return i18n.global.t('pageFirmware.sectionTitleBmcCards');
     },
     running() {
       return this.$store.getters['firmware/activeBmcFirmware'];
@@ -117,18 +120,24 @@
       this.startLoader();
       const timerId = setTimeout(() => {
         this.endLoader();
-        this.infoToast(this.$t('pageFirmware.toast.verifySwitchMessage'), {
-          title: this.$t('pageFirmware.toast.verifySwitch'),
-          refreshAction: true,
-        });
+        this.infoToast(
+          i18n.global.t('pageFirmware.toast.verifySwitchMessage'),
+          {
+            title: i18n.global.t('pageFirmware.toast.verifySwitch'),
+            refreshAction: true,
+          },
+        );
       }, 60000);
 
       this.$store
         .dispatch('firmware/switchBmcFirmwareAndReboot')
         .then(() =>
-          this.infoToast(this.$t('pageFirmware.toast.rebootStartedMessage'), {
-            title: this.$t('pageFirmware.toast.rebootStarted'),
-          }),
+          this.infoToast(
+            i18n.global.t('pageFirmware.toast.rebootStartedMessage'),
+            {
+              title: i18n.global.t('pageFirmware.toast.rebootStarted'),
+            },
+          ),
         )
         .catch(({ message }) => {
           this.errorToast(message);
diff --git a/src/views/Operations/Firmware/FirmwareCardsHost.vue b/src/views/Operations/Firmware/FirmwareCardsHost.vue
index 8fd0cac..852e9fb 100644
--- a/src/views/Operations/Firmware/FirmwareCardsHost.vue
+++ b/src/views/Operations/Firmware/FirmwareCardsHost.vue
@@ -38,9 +38,15 @@
 
 <script>
 import PageSection from '@/components/Global/PageSection';
+import { useI18n } from 'vue-i18n';
 
 export default {
   components: { PageSection },
+  data() {
+    return {
+      $t: useI18n().t,
+    };
+  },
   computed: {
     running() {
       return this.$store.getters['firmware/activeHostFirmware'];
diff --git a/src/views/Operations/Firmware/FirmwareFormUpdate.vue b/src/views/Operations/Firmware/FirmwareFormUpdate.vue
index 3f114a9..dfb5c68 100644
--- a/src/views/Operations/Firmware/FirmwareFormUpdate.vue
+++ b/src/views/Operations/Firmware/FirmwareFormUpdate.vue
@@ -50,6 +50,8 @@
 
 import FormFile from '@/components/Global/FormFile';
 import ModalUpdateFirmware from './FirmwareModalUpdateFirmware';
+import { useI18n } from 'vue-i18n';
+import i18n from '@/i18n';
 
 export default {
   components: { FormFile, ModalUpdateFirmware },
@@ -67,11 +69,12 @@
   },
   setup() {
     return {
-      v$: useVuelidate(),
+      $v: useVuelidate(),
     };
   },
   data() {
     return {
+      $t: useI18n().t,
       loading,
       file: null,
       isServerPowerOffRequired:
@@ -93,13 +96,16 @@
       this.startLoader();
       const timerId = setTimeout(() => {
         this.endLoader();
-        this.infoToast(this.$t('pageFirmware.toast.verifyUpdateMessage'), {
-          title: this.$t('pageFirmware.toast.verifyUpdate'),
-          refreshAction: true,
-        });
+        this.infoToast(
+          i18n.global.t('pageFirmware.toast.verifyUpdateMessage'),
+          {
+            title: i18n.global.t('pageFirmware.toast.verifyUpdate'),
+            refreshAction: true,
+          },
+        );
       }, 360000);
-      this.infoToast(this.$t('pageFirmware.toast.updateStartedMessage'), {
-        title: this.$t('pageFirmware.toast.updateStarted'),
+      this.infoToast(i18n.global.t('pageFirmware.toast.updateStartedMessage'), {
+        title: i18n.global.t('pageFirmware.toast.updateStarted'),
         timestamp: true,
       });
       this.dispatchWorkstationUpload(timerId);
diff --git a/src/views/Operations/Firmware/FirmwareModalSwitchToRunning.vue b/src/views/Operations/Firmware/FirmwareModalSwitchToRunning.vue
index dc4a497..9af8fb5 100644
--- a/src/views/Operations/Firmware/FirmwareModalSwitchToRunning.vue
+++ b/src/views/Operations/Firmware/FirmwareModalSwitchToRunning.vue
@@ -20,6 +20,7 @@
 </template>
 
 <script>
+import { useI18n } from 'vue-i18n';
 export default {
   props: {
     backup: {
@@ -27,5 +28,10 @@
       required: true,
     },
   },
+  data() {
+    return {
+      $t: useI18n().t,
+    };
+  },
 };
 </script>
diff --git a/src/views/Operations/Firmware/FirmwareModalUpdateFirmware.vue b/src/views/Operations/Firmware/FirmwareModalUpdateFirmware.vue
index 1835521..183cab7 100644
--- a/src/views/Operations/Firmware/FirmwareModalUpdateFirmware.vue
+++ b/src/views/Operations/Firmware/FirmwareModalUpdateFirmware.vue
@@ -28,7 +28,13 @@
 </template>
 
 <script>
+import { useI18n } from 'vue-i18n';
 export default {
+  data() {
+    return {
+      $t: useI18n().t,
+    };
+  },
   computed: {
     runningBmc() {
       return this.$store.getters['firmware/activeBmcFirmware'];
diff --git a/src/views/Operations/KeyClear/KeyClear.vue b/src/views/Operations/KeyClear/KeyClear.vue
index fbdf4c4..7baad34 100644
--- a/src/views/Operations/KeyClear/KeyClear.vue
+++ b/src/views/Operations/KeyClear/KeyClear.vue
@@ -69,6 +69,8 @@
 import BVToastMixin from '@/components/Mixins/BVToastMixin';
 import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin';
 import Alert from '@/components/Global/Alert';
+import { useI18n } from 'vue-i18n';
+import i18n from '@/i18n';
 
 export default {
   name: 'KeyClear',
@@ -76,6 +78,7 @@
   mixins: [LoadingBarMixin, BVToastMixin],
   data() {
     return {
+      $t: useI18n().t,
       keyOption: 'NONE',
       username: this.$store.getters['global/username'],
     };
@@ -86,11 +89,11 @@
   methods: {
     onKeyClearSubmit(valueSelected) {
       this.$bvModal
-        .msgBoxConfirm(this.$t('pageKeyClear.modal.clearAllMessage'), {
-          title: this.$t('pageKeyClear.modal.clearAllTitle'),
-          okTitle: this.$t('pageKeyClear.modal.clear'),
+        .msgBoxConfirm(i18n.global.t('pageKeyClear.modal.clearAllMessage'), {
+          title: i18n.global.t('pageKeyClear.modal.clearAllTitle'),
+          okTitle: i18n.global.t('pageKeyClear.modal.clear'),
           okVariant: 'danger',
-          cancelTitle: this.$t('global.action.cancel'),
+          cancelTitle: i18n.global.t('global.action.cancel'),
           autoFocusButton: 'cancel',
         })
         .then((clearConfirmed) => {
diff --git a/src/views/Operations/Kvm/KvmConsole.vue b/src/views/Operations/Kvm/KvmConsole.vue
index cc623e4..6e2a4ea 100644
--- a/src/views/Operations/Kvm/KvmConsole.vue
+++ b/src/views/Operations/Kvm/KvmConsole.vue
@@ -46,6 +46,8 @@
 import IconLaunch from '@carbon/icons-vue/es/launch/20';
 import IconArrowDown from '@carbon/icons-vue/es/arrow--down/16';
 import { throttle } from 'lodash';
+import { useI18n } from 'vue-i18n';
+import i18n from '@/i18n';
 
 const Connecting = 0;
 const Connected = 1;
@@ -62,6 +64,7 @@
   },
   data() {
     return {
+      $t: useI18n().t,
       rfb: null,
       isConnected: false,
       terminalClass: this.isFullWindow ? 'full-window' : '',
@@ -82,11 +85,11 @@
     },
     serverStatus() {
       if (this.status === Connected) {
-        return this.$t('pageKvm.connected');
+        return i18n.global.t('pageKvm.connected');
       } else if (this.status === Disconnected) {
-        return this.$t('pageKvm.disconnected');
+        return i18n.global.t('pageKvm.disconnected');
       }
-      return this.$t('pageKvm.connecting');
+      return i18n.global.t('pageKvm.connecting');
     },
   },
   created() {
diff --git a/src/views/Operations/RebootBmc/RebootBmc.vue b/src/views/Operations/RebootBmc/RebootBmc.vue
index e56e968..0865d77 100644
--- a/src/views/Operations/RebootBmc/RebootBmc.vue
+++ b/src/views/Operations/RebootBmc/RebootBmc.vue
@@ -11,8 +11,8 @@
                   {{ $t('pageRebootBmc.lastReboot') }}
                 </dt>
                 <dd v-if="lastBmcRebootTime">
-                  {{ lastBmcRebootTime }}
-                  {{ lastBmcRebootTime }}
+                  {{ $filters.formatDate(lastBmcRebootTime) }}
+                  {{ $filters.formatTime(lastBmcRebootTime) }}
                 </dd>
                 <dd v-else>--</dd>
               </dl>
@@ -38,6 +38,8 @@
 import PageSection from '@/components/Global/PageSection';
 import BVToastMixin from '@/components/Mixins/BVToastMixin';
 import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin';
+import { useI18n } from 'vue-i18n';
+import i18n from '@/i18n';
 
 export default {
   name: 'RebootBmc',
@@ -47,6 +49,11 @@
     this.hideLoader();
     next();
   },
+  data() {
+    return {
+      $t: useI18n().t,
+    };
+  },
   computed: {
     lastBmcRebootTime() {
       return this.$store.getters['controls/lastBmcRebootTime'];
@@ -61,10 +68,10 @@
   methods: {
     onClick() {
       this.$bvModal
-        .msgBoxConfirm(this.$t('pageRebootBmc.modal.confirmMessage'), {
-          title: this.$t('pageRebootBmc.modal.confirmTitle'),
-          okTitle: this.$t('global.action.confirm'),
-          cancelTitle: this.$t('global.action.cancel'),
+        .msgBoxConfirm(i18n.global.t('pageRebootBmc.modal.confirmMessage'), {
+          title: i18n.global.t('pageRebootBmc.modal.confirmTitle'),
+          okTitle: i18n.global.t('global.action.confirm'),
+          cancelTitle: i18n.global.t('global.action.cancel'),
           autoFocusButton: 'ok',
         })
         .then((confirmed) => {
diff --git a/src/views/Operations/SerialOverLan/SerialOverLan.vue b/src/views/Operations/SerialOverLan/SerialOverLan.vue
index 48a6834..b9d3f2e 100644
--- a/src/views/Operations/SerialOverLan/SerialOverLan.vue
+++ b/src/views/Operations/SerialOverLan/SerialOverLan.vue
@@ -12,6 +12,7 @@
 import PageTitle from '@/components/Global/PageTitle';
 import PageSection from '@/components/Global/PageSection';
 import SerialOverLanConsole from './SerialOverLanConsole';
+import { useI18n } from 'vue-i18n';
 
 export default {
   name: 'SerialOverLan',
@@ -20,5 +21,10 @@
     PageTitle,
     SerialOverLanConsole,
   },
+  data() {
+    return {
+      $t: useI18n().t,
+    };
+  },
 };
 </script>
diff --git a/src/views/Operations/SerialOverLan/SerialOverLanConsole.vue b/src/views/Operations/SerialOverLan/SerialOverLanConsole.vue
index 8b4cd22..b711422 100644
--- a/src/views/Operations/SerialOverLan/SerialOverLanConsole.vue
+++ b/src/views/Operations/SerialOverLan/SerialOverLanConsole.vue
@@ -50,6 +50,7 @@
 import { throttle } from 'lodash';
 import IconLaunch from '@carbon/icons-vue/es/launch/20';
 import StatusIcon from '@/components/Global/StatusIcon';
+import { useI18n } from 'vue-i18n';
 
 export default {
   name: 'SerialOverLanConsole',
@@ -66,6 +67,7 @@
   },
   data() {
     return {
+      $t: useI18n().t,
       resizeConsoleWindow: null,
     };
   },
diff --git a/src/views/Operations/ServerPowerOperations/BootSettings.vue b/src/views/Operations/ServerPowerOperations/BootSettings.vue
index c74fd01..a7bcfaa 100644
--- a/src/views/Operations/ServerPowerOperations/BootSettings.vue
+++ b/src/views/Operations/ServerPowerOperations/BootSettings.vue
@@ -21,7 +21,7 @@
         v-model="form.oneTimeBoot"
         class="mb-4"
         :disabled="form.bootOption === 'None'"
-        @change="$v.form.oneTimeBoot.$touch()"
+        @change="v$.form.oneTimeBoot.$touch()"
       >
         {{ $t('pageServerPowerOperations.bootSettings.enableOneTimeBoot') }}
       </b-form-checkbox>
@@ -37,7 +37,7 @@
           id="tpm-required-policy"
           v-model="form.tpmPolicyOn"
           aria-describedby="tpm-required-policy-help-block"
-          @change="$v.form.tpmPolicyOn.$touch()"
+          @change="v$.form.tpmPolicyOn.$touch()"
         >
           {{ $t('global.status.enabled') }}
         </b-form-checkbox>
@@ -53,12 +53,14 @@
 import { mapState } from 'vuex';
 import BVToastMixin from '@/components/Mixins/BVToastMixin';
 import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin';
+import { useI18n } from 'vue-i18n';
 
 export default {
   name: 'BootSettings',
   mixins: [BVToastMixin, LoadingBarMixin],
   data() {
     return {
+      $t: useI18n().t,
       form: {
         bootOption: this.$store.getters['serverBootSettings/bootSource'],
         oneTimeBoot: this.$store.getters['serverBootSettings/overrideEnabled'],
@@ -104,7 +106,7 @@
   methods: {
     handleSubmit() {
       this.startLoader();
-      const tpmPolicyChanged = this.$v.form.tpmPolicyOn.$dirty;
+      const tpmPolicyChanged = this.v$.form.tpmPolicyOn.$dirty;
       let settings;
       let bootSource = this.form.bootOption;
       let overrideEnabled = this.form.oneTimeBoot;
@@ -118,12 +120,12 @@
         .then((message) => this.successToast(message))
         .catch(({ message }) => this.errorToast(message))
         .finally(() => {
-          this.$v.form.$reset();
+          this.v$.form.$reset();
           this.endLoader();
         });
     },
     onChangeSelect(selectedOption) {
-      this.$v.form.bootOption.$touch();
+      this.v$.form.bootOption.$touch();
       // Disable one time boot if selected boot option is 'None'
       if (selectedOption === 'None') this.form.oneTimeBoot = false;
     },
diff --git a/src/views/Operations/ServerPowerOperations/ServerPowerOperations.vue b/src/views/Operations/ServerPowerOperations/ServerPowerOperations.vue
index 4e26ee1..caa608e 100644
--- a/src/views/Operations/ServerPowerOperations/ServerPowerOperations.vue
+++ b/src/views/Operations/ServerPowerOperations/ServerPowerOperations.vue
@@ -44,8 +44,8 @@
                   v-if="lastPowerOperationTime"
                   data-test-id="powerServerOps-text-lastPowerOp"
                 >
-                  {{ lastPowerOperationTime }}
-                  {{ lastPowerOperationTime }}
+                  {{ $filters.formatDate(lastPowerOperationTime) }}
+                  {{ $filters.formatTime(lastPowerOperationTime) }}
                 </dd>
                 <dd v-else>--</dd>
               </dl>
@@ -158,6 +158,8 @@
 import BootSettings from './BootSettings';
 import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin';
 import Alert from '@/components/Global/Alert';
+import { useI18n } from 'vue-i18n';
+import i18n from '@/i18n';
 
 export default {
   name: 'ServerPowerOperations',
@@ -169,6 +171,7 @@
   },
   data() {
     return {
+      $t: useI18n().t,
       form: {
         rebootOption: 'orderly',
         shutdownOption: 'orderly',
@@ -212,13 +215,15 @@
       this.$store.dispatch('controls/serverPowerOn');
     },
     rebootServer() {
-      const modalMessage = this.$t(
+      const modalMessage = i18n.global.t(
         'pageServerPowerOperations.modal.confirmRebootMessage',
       );
       const modalOptions = {
-        title: this.$t('pageServerPowerOperations.modal.confirmRebootTitle'),
-        okTitle: this.$t('global.action.confirm'),
-        cancelTitle: this.$t('global.action.cancel'),
+        title: i18n.global.t(
+          'pageServerPowerOperations.modal.confirmRebootTitle',
+        ),
+        okTitle: i18n.global.t('global.action.confirm'),
+        cancelTitle: i18n.global.t('global.action.cancel'),
         autoFocusButton: 'ok',
       };
 
@@ -237,13 +242,15 @@
       }
     },
     shutdownServer() {
-      const modalMessage = this.$t(
+      const modalMessage = i18n.global.t(
         'pageServerPowerOperations.modal.confirmShutdownMessage',
       );
       const modalOptions = {
-        title: this.$t('pageServerPowerOperations.modal.confirmShutdownTitle'),
-        okTitle: this.$t('global.action.confirm'),
-        cancelTitle: this.$t('global.action.cancel'),
+        title: i18n.global.t(
+          'pageServerPowerOperations.modal.confirmShutdownTitle',
+        ),
+        okTitle: i18n.global.t('global.action.confirm'),
+        cancelTitle: i18n.global.t('global.action.cancel'),
         autoFocusButton: 'ok',
       };
 
diff --git a/src/views/Operations/VirtualMedia/ModalConfigureConnection.vue b/src/views/Operations/VirtualMedia/ModalConfigureConnection.vue
index 61e2050..f8d4af0 100644
--- a/src/views/Operations/VirtualMedia/ModalConfigureConnection.vue
+++ b/src/views/Operations/VirtualMedia/ModalConfigureConnection.vue
@@ -18,12 +18,12 @@
           id="serverUri"
           v-model="form.serverUri"
           type="text"
-          :state="getValidationState($v.form.serverUri)"
+          :state="getValidationState(v$.form.serverUri)"
           data-test-id="configureConnection-input-serverUri"
-          @input="$v.form.serverUri.$touch()"
+          @input="v$.form.serverUri.$touch()"
         />
         <b-form-invalid-feedback role="alert">
-          <template v-if="!$v.form.serverUri.required">
+          <template v-if="!v$.form.serverUri.required">
             {{ $t('global.form.fieldRequired') }}
           </template>
         </b-form-invalid-feedback>
@@ -73,6 +73,7 @@
 import { required } from '@vuelidate/validators';
 import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
 import { useVuelidate } from '@vuelidate/core';
+import { useI18n } from 'vue-i18n';
 
 export default {
   mixins: [VuelidateMixin],
@@ -93,6 +94,7 @@
   },
   data() {
     return {
+      $t: useI18n().t,
       form: {
         serverUri: null,
         username: null,
@@ -118,8 +120,8 @@
   },
   methods: {
     handleSubmit() {
-      this.$v.$touch();
-      if (this.$v.$invalid) return;
+      this.v$.$touch();
+      if (this.v$.$invalid) return;
       let connectionData = {};
       Object.assign(connectionData, this.form);
       this.$emit('ok', connectionData);
@@ -140,7 +142,7 @@
       this.form.username = null;
       this.form.password = null;
       this.form.isRW = false;
-      this.$v.$reset();
+      this.v$.$reset();
     },
     onOk(bvModalEvt) {
       bvModalEvt.preventDefault();
diff --git a/src/views/Operations/VirtualMedia/VirtualMedia.vue b/src/views/Operations/VirtualMedia/VirtualMedia.vue
index 9ad1b1e..e158059 100644
--- a/src/views/Operations/VirtualMedia/VirtualMedia.vue
+++ b/src/views/Operations/VirtualMedia/VirtualMedia.vue
@@ -104,6 +104,8 @@
 import ModalConfigureConnection from './ModalConfigureConnection';
 import NbdServer from '@/utilities/NBDServer';
 import FormFile from '@/components/Global/FormFile';
+import { useI18n } from 'vue-i18n';
+import i18n from '@/i18n';
 
 export default {
   name: 'VirtualMedia',
@@ -111,6 +113,7 @@
   mixins: [BVToastMixin, LoadingBarMixin],
   data() {
     return {
+      $t: useI18n().t,
       modalConfigureConnection: null,
       loadImageFromExternalServer:
         process.env.VUE_APP_VIRTUAL_MEDIA_LIST_ENABLED === 'true'
@@ -144,17 +147,21 @@
         token,
       );
       device.nbd.socketStarted = () =>
-        this.successToast(this.$t('pageVirtualMedia.toast.serverRunning'));
+        this.successToast(
+          i18n.global.t('pageVirtualMedia.toast.serverRunning'),
+        );
       device.nbd.errorReadingFile = () =>
-        this.errorToast(this.$t('pageVirtualMedia.toast.errorReadingFile'));
+        this.errorToast(
+          i18n.global.t('pageVirtualMedia.toast.errorReadingFile'),
+        );
       device.nbd.socketClosed = (code) => {
         if (code === 1000)
           this.successToast(
-            this.$t('pageVirtualMedia.toast.serverClosedSuccessfully'),
+            i18n.global.t('pageVirtualMedia.toast.serverClosedSuccessfully'),
           );
         else
           this.errorToast(
-            this.$t('pageVirtualMedia.toast.serverClosedWithErrors'),
+            i18n.global.t('pageVirtualMedia.toast.serverClosedWithErrors'),
           );
         device.file = null;
         device.isActive = false;
@@ -180,12 +187,14 @@
         })
         .then(() => {
           this.successToast(
-            this.$t('pageVirtualMedia.toast.serverConnectionEstablished'),
+            i18n.global.t('pageVirtualMedia.toast.serverConnectionEstablished'),
           );
           connectionData.isActive = true;
         })
         .catch(() => {
-          this.errorToast(this.$t('pageVirtualMedia.toast.errorMounting'));
+          this.errorToast(
+            i18n.global.t('pageVirtualMedia.toast.errorMounting'),
+          );
           this.isActive = false;
         })
         .finally(() => this.endLoader());
@@ -195,12 +204,14 @@
         .dispatch('virtualMedia/unmountImage', connectionData.id)
         .then(() => {
           this.successToast(
-            this.$t('pageVirtualMedia.toast.serverClosedSuccessfully'),
+            i18n.global.t('pageVirtualMedia.toast.serverClosedSuccessfully'),
           );
           connectionData.isActive = false;
         })
         .catch(() =>
-          this.errorToast(this.$t('pageVirtualMedia.toast.errorUnmounting')),
+          this.errorToast(
+            i18n.global.t('pageVirtualMedia.toast.errorUnmounting'),
+          ),
         )
         .finally(() => this.endLoader());
     },