Network page validation and i18n issue fix

In network page invalid if condition changed, added validations and i18n
function changed based on the vue 3 support.

Change-Id: If5b9c00f6da722984f1c568cfbcb6b34537c3df1
Signed-off-by: Surya Venkatesan <suryav@ami.com>
diff --git a/src/views/Settings/Network/ModalHostname.vue b/src/views/Settings/Network/ModalHostname.vue
index b2155b7..5eeffb3 100644
--- a/src/views/Settings/Network/ModalHostname.vue
+++ b/src/views/Settings/Network/ModalHostname.vue
@@ -20,10 +20,10 @@
               @input="v$.form.hostname.$touch()"
             />
             <b-form-invalid-feedback role="alert">
-              <template v-if="!v$.form.hostname.required">
+              <template v-if="v$.form.hostname.required.$invalid">
                 {{ $t('global.form.fieldRequired') }}
               </template>
-              <template v-if="!v$.form.hostname.validateHostname">
+              <template v-if="v$.form.hostname.validateHostname.$invalid">
                 {{ $t('global.form.lengthMustBeBetween', { min: 1, max: 64 }) }}
               </template>
             </b-form-invalid-feedback>
@@ -50,8 +50,8 @@
 <script>
 import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
 import { useVuelidate } from '@vuelidate/core';
-
-import { required, helpers } from '@vuelidate/validators';
+import { helpers } from 'vuelidate/lib/validators';
+import { required } from '@vuelidate/validators';
 import { useI18n } from 'vue-i18n';
 
 const validateHostname = helpers.regex('validateHostname', /^\S{0,64}$/);