Upgrade @vuelidate to 2.x

app/javascript/dashboard/components/layout/sidebarComponents/AddAccountModal.vue

@@ -19,13 +19,13 @@
 
       <form class="flex flex-col w-full" @submit.prevent="addAccount">
         <div class="w-full">
-          <label :class="{ error: $v.accountName.$error }">
+          <label :class="{ error: v$.accountName.$error }">
             {{ $t('CREATE_ACCOUNT.FORM.NAME.LABEL') }}
             <input
               v-model.trim="accountName"
               type="text"
               :placeholder="$t('CREATE_ACCOUNT.FORM.NAME.PLACEHOLDER')"
-              @input="$v.accountName.$touch"
+              @input="v$.accountName.$touch"
             />
           </label>
         </div>
@@ -33,8 +33,8 @@
           <div class="w-full">
             <woot-submit-button
               :disabled="
-                $v.accountName.$invalid ||
-                $v.accountName.$invalid ||
+                v$.accountName.$invalid ||
+                v$.accountName.$invalid ||
                 uiFlags.isCreating
               "
               :button-text="$t('CREATE_ACCOUNT.FORM.SUBMIT')"
@@ -49,9 +49,10 @@
 </template>
 
 <script>
-import { required, minLength } from 'vuelidate/lib/validators';
+import { required, minLength } from '@vuelidate/validators';
 import { mapGetters } from 'vuex';
 import alertMixin from 'shared/mixins/alertMixin';
+import { useVuelidate } from '@vuelidate/core';
 
 export default {
   mixins: [alertMixin],
@@ -65,6 +66,9 @@ export default {
       default: true,
     },
   },
+  setup() {
+    return { v$: useVuelidate() };
+  },
   data() {
     return {
       accountName: '',