chore: Migrate all instances of old vuelidate to new v2 syntax

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

@@ -48,14 +48,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>
@@ -76,6 +76,7 @@
 </template>
 
 <script>
+import { useVuelidate } from '@vuelidate/core';
 import { required, minLength, email } from 'vuelidate/lib/validators';
 import alertMixin from 'shared/mixins/alertMixin';
 export default {
@@ -90,6 +91,9 @@ export default {
       default: () => ({}),
     },
   },
+  setup() {
+    return { v$: useVuelidate() };
+  },
   data() {
     return {
       email: '',
@@ -111,7 +115,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;
       }

app/javascript/dashboard/components/widgets/conversation/WhatsappTemplates/TemplateParser.vue

@@ -25,7 +25,7 @@
           :styles="{ marginBottom: 0 }"
         />
       </div>
-      <p v-if="$v.$dirty && $v.$invalid" class="error">
+      <p v-if="v$.$dirty && v$.$invalid" class="error">
         {{ $t('WHATSAPP_TEMPLATES.PARSER.FORM_ERROR_MESSAGE') }}
       </p>
     </div>
@@ -41,11 +41,12 @@
 </template>
 
 <script>
+import { useVuelidate } from '@vuelidate/core';
+import { requiredIf } from 'vuelidate/lib/validators';
 const allKeysRequired = value => {
   const keys = Object.keys(value);
   return keys.every(key => value[key]);
 };
-import { requiredIf } from 'vuelidate/lib/validators';
 export default {
   props: {
     template: {
@@ -53,6 +54,9 @@ export default {
       default: () => {},
     },
   },
+  setup() {
+    return { v$: useVuelidate() };
+  },
   validations: {
     processedParams: {
       requiredIfKeysPresent: requiredIf('variables'),
@@ -86,8 +90,8 @@ export default {
   },
   methods: {
     sendMessage() {
-      this.$v.$touch();
-      if (this.$v.$invalid) return;
+      this.v$.$touch();
+      if (this.v$.$invalid) return;
       const payload = {
         message: this.processedString,
         templateParams: {