Upgrade @vuelidate to 2.x

app/javascript/dashboard/components/widgets/conversation/EmailTranscriptModal.vue

@@ -45,14 +45,14 @@
             }}</label>
           </div>
           <div v-if="sentToOtherEmailAddress" class="w-[50%] mt-1">
-            <label :class="{ error: $v.email.$error }">
+            <label :class="{ error: v$.email.$error }">
               <input
                 v-model.trim="email"
                 type="text"
                 :placeholder="$t('EMAIL_TRANSCRIPT.FORM.EMAIL.PLACEHOLDER')"
-                @input="$v.email.$touch"
+                @input="v$.email.$touch"
               />
-              <span v-if="$v.email.$error" class="message">
+              <span v-if="v$.email.$error" class="message">
                 {{ $t('EMAIL_TRANSCRIPT.FORM.EMAIL.ERROR') }}
               </span>
             </label>
@@ -73,8 +73,10 @@
 </template>
 
 <script>
-import { required, minLength, email } from 'vuelidate/lib/validators';
+import { required, minLength, email } from '@vuelidate/validators';
 import alertMixin from 'shared/mixins/alertMixin';
+import { useVuelidate } from '@vuelidate/core';
+
 export default {
   mixins: [alertMixin],
   props: {
@@ -87,6 +89,9 @@ export default {
       default: () => ({}),
     },
   },
+  setup() {
+    return { v$: useVuelidate() };
+  },
   data() {
     return {
       email: '',
@@ -108,7 +113,7 @@ export default {
     isFormValid() {
       if (this.selectedType) {
         if (this.sentToOtherEmailAddress) {
-          return !!this.email && !this.$v.email.$error;
+          return !!this.email && !this.v$.email.$error;
         }
         return true;
       }