diff --git a/app/javascript/dashboard/components/CustomAttribute.vue b/app/javascript/dashboard/components/CustomAttribute.vue
index e7de811d6..fefd19d47 100644
--- a/app/javascript/dashboard/components/CustomAttribute.vue
+++ b/app/javascript/dashboard/components/CustomAttribute.vue
@@ -14,7 +14,7 @@
           <span
             class="w-full inline-flex gap-1.5 items-start font-medium whitespace-nowrap text-sm mb-0"
             :class="
-              $v.editedValue.$error
+              v$.editedValue.$error
                 ? 'text-red-400 dark:text-red-500'
                 : 'text-slate-800 dark:text-slate-100'
             "
@@ -48,8 +48,8 @@
             :type="inputType"
             class="!h-8 ltr:!rounded-r-none rtl:!rounded-l-none !mb-0 !text-sm"
             autofocus="true"
-            :class="{ error: $v.editedValue.$error }"
-            @blur="$v.editedValue.$touch"
+            :class="{ error: v$.editedValue.$error }"
+            @blur="v$.editedValue.$touch"
             @keyup.enter="onUpdate"
           />
           <div>
@@ -142,6 +142,7 @@ import MultiselectDropdown from 'shared/components/ui/MultiselectDropdown.vue';
 import HelperTextPopup from 'dashboard/components/ui/HelperTextPopup.vue';
 import { isValidURL } from '../helper/URLHelper';
 import customAttributeMixin from '../mixins/customAttributeMixin';
+import { useVuelidate } from '@vuelidate/core';
 
 const DATE_FORMAT = 'yyyy-MM-dd';
 
@@ -167,6 +168,9 @@ export default {
     attributeKey: { type: String, required: true },
     contactId: { type: Number, default: null },
   },
+  setup() {
+    return { v$: useVuelidate() };
+  },
   data() {
     return {
       isEditing: false,
@@ -225,13 +229,13 @@ export default {
       return this.isAttributeTypeLink ? 'url' : this.attributeType;
     },
     shouldShowErrorMessage() {
-      return this.$v.editedValue.$error;
+      return this.v$.editedValue.$error;
     },
     errorMessage() {
-      if (this.$v.editedValue.url) {
+      if (this.v$.editedValue.url) {
         return this.$t('CUSTOM_ATTRIBUTES.VALIDATIONS.INVALID_URL');
       }
-      if (!this.$v.editedValue.regexValidation) {
+      if (!this.v$.editedValue.regexValidation) {
         return this.regexCue
           ? this.regexCue
           : this.$t('CUSTOM_ATTRIBUTES.VALIDATIONS.INVALID_INPUT');
@@ -246,7 +250,7 @@ export default {
     },
     contactId() {
       // Fix to solve validation not resetting when contactId changes in contact page
-      this.$v.$reset();
+      this.v$.$reset();
     },
   },
 
@@ -287,7 +291,7 @@ export default {
       }
     },
     onClickAway() {
-      this.$v.$reset();
+      this.v$.$reset();
       this.isEditing = false;
     },
     onEdit() {
@@ -307,8 +311,8 @@ export default {
         this.attributeType === 'date'
           ? parseISO(this.editedValue)
           : this.editedValue;
-      this.$v.$touch();
-      if (this.$v.$invalid) {
+      this.v$.$touch();
+      if (this.v$.$invalid) {
         return;
       }
       this.isEditing = false;
@@ -316,7 +320,7 @@ export default {
     },
     onDelete() {
       this.isEditing = false;
-      this.$v.$reset();
+      this.v$.$reset();
       this.$emit('delete', this.attributeKey);
     },
     onCopy() {
diff --git a/app/javascript/dashboard/components/widgets/conversation/ReplyEmailHead.vue b/app/javascript/dashboard/components/widgets/conversation/ReplyEmailHead.vue
index e3135fa47..ab507febe 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ReplyEmailHead.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ReplyEmailHead.vue
@@ -1,16 +1,16 @@
 <template>
   <div>
     <div v-if="toEmails">
-      <div class="input-group small" :class="{ error: $v.toEmailsVal.$error }">
+      <div class="input-group small" :class="{ error: v$.toEmailsVal.$error }">
         <label class="input-group-label">
           {{ $t('CONVERSATION.REPLYBOX.EMAIL_HEAD.TO') }}
         </label>
         <div class="rounded-none flex-1 min-w-0 m-0 whitespace-nowrap">
           <woot-input
-            v-model.trim="$v.toEmailsVal.$model"
+            v-model.trim="v$.toEmailsVal.$model"
             type="text"
             class="[&>input]:!mb-0 [&>input]:border-transparent [&>input]:h-8 [&>input]:text-sm [&>input]:!border-0 [&>input]:border-none"
-            :class="{ error: $v.toEmailsVal.$error }"
+            :class="{ error: v$.toEmailsVal.$error }"
             :placeholder="$t('CONVERSATION.REPLYBOX.EMAIL_HEAD.CC.PLACEHOLDER')"
             @blur="onBlur"
           />
@@ -18,16 +18,16 @@
       </div>
     </div>
     <div class="input-group-wrap">
-      <div class="input-group small" :class="{ error: $v.ccEmailsVal.$error }">
+      <div class="input-group small" :class="{ error: v$.ccEmailsVal.$error }">
         <label class="input-group-label">
           {{ $t('CONVERSATION.REPLYBOX.EMAIL_HEAD.CC.LABEL') }}
         </label>
         <div class="rounded-none flex-1 min-w-0 m-0 whitespace-nowrap">
           <woot-input
-            v-model.trim="$v.ccEmailsVal.$model"
+            v-model.trim="v$.ccEmailsVal.$model"
             class="[&>input]:!mb-0 [&>input]:border-transparent [&>input]:h-8 [&>input]:text-sm [&>input]:!border-0 [&>input]:border-none"
             type="text"
-            :class="{ error: $v.ccEmailsVal.$error }"
+            :class="{ error: v$.ccEmailsVal.$error }"
             :placeholder="$t('CONVERSATION.REPLYBOX.EMAIL_HEAD.CC.PLACEHOLDER')"
             @blur="onBlur"
           />
@@ -41,21 +41,21 @@
           {{ $t('CONVERSATION.REPLYBOX.EMAIL_HEAD.ADD_BCC') }}
         </woot-button>
       </div>
-      <span v-if="$v.ccEmailsVal.$error" class="message">
+      <span v-if="v$.ccEmailsVal.$error" class="message">
         {{ $t('CONVERSATION.REPLYBOX.EMAIL_HEAD.CC.ERROR') }}
       </span>
     </div>
     <div v-if="showBcc" class="input-group-wrap">
-      <div class="input-group small" :class="{ error: $v.bccEmailsVal.$error }">
+      <div class="input-group small" :class="{ error: v$.bccEmailsVal.$error }">
         <label class="input-group-label">
           {{ $t('CONVERSATION.REPLYBOX.EMAIL_HEAD.BCC.LABEL') }}
         </label>
         <div class="rounded-none flex-1 min-w-0 m-0 whitespace-nowrap">
           <woot-input
-            v-model.trim="$v.bccEmailsVal.$model"
+            v-model.trim="v$.bccEmailsVal.$model"
             type="text"
             class="[&>input]:!mb-0 [&>input]:border-transparent [&>input]:h-8 [&>input]:text-sm [&>input]:!border-0 [&>input]:border-none"
-            :class="{ error: $v.bccEmailsVal.$error }"
+            :class="{ error: v$.bccEmailsVal.$error }"
             :placeholder="
               $t('CONVERSATION.REPLYBOX.EMAIL_HEAD.BCC.PLACEHOLDER')
             "
@@ -63,7 +63,7 @@
           />
         </div>
       </div>
-      <span v-if="$v.bccEmailsVal.$error" class="message">
+      <span v-if="v$.bccEmailsVal.$error" class="message">
         {{ $t('CONVERSATION.REPLYBOX.EMAIL_HEAD.BCC.ERROR') }}
       </span>
     </div>
@@ -72,6 +72,7 @@
 
 <script>
 import { validEmailsByComma } from './helpers/emailHeadHelper';
+import { useVuelidate } from '@vuelidate/core';
 
 export default {
   props: {
@@ -88,6 +89,9 @@ export default {
       default: '',
     },
   },
+  setup() {
+    return { v$: useVuelidate() };
+  },
   data() {
     return {
       showBcc: false,
@@ -140,7 +144,7 @@ export default {
       this.showBcc = true;
     },
     onBlur() {
-      this.$v.$touch();
+      this.v$.$touch();
       this.$emit('update:bccEmails', this.bccEmailsVal);
       this.$emit('update:ccEmails', this.ccEmailsVal);
       this.$emit('update:toEmails', this.toEmailsVal);
diff --git a/app/javascript/dashboard/mixins/automations/methodsMixin.js b/app/javascript/dashboard/mixins/automations/methodsMixin.js
index a7e8d8120..7797417a5 100644
--- a/app/javascript/dashboard/mixins/automations/methodsMixin.js
+++ b/app/javascript/dashboard/mixins/automations/methodsMixin.js
@@ -1,5 +1,7 @@
 import languages from 'dashboard/components/widgets/conversation/advancedFilterItems/languages';
 import countries from 'shared/constants/countries';
+import { useVuelidate } from '@vuelidate/core';
+
 import {
   generateCustomAttributeTypes,
   getActionOptions,
@@ -19,6 +21,9 @@ import {
 import { mapGetters } from 'vuex';
 
 export default {
+  setup() {
+    return { v$: useVuelidate() };
+  },
   computed: {
     ...mapGetters({
       agents: 'agents/getAgents',
@@ -151,8 +156,8 @@ export default {
       }
     },
     submitAutomation() {
-      this.$v.$touch();
-      if (this.$v.$invalid) return;
+      this.v$.$touch();
+      if (this.v$.$invalid) return;
       const automation = generateAutomationPayload(this.automation);
       this.$emit('saveAutomation', automation, this.mode);
     },
diff --git a/app/javascript/dashboard/routes/dashboard/settings/labels/validationMixin.js b/app/javascript/dashboard/routes/dashboard/settings/labels/validationMixin.js
index 9f11646a6..238fc6c2b 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/labels/validationMixin.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/labels/validationMixin.js
@@ -1,14 +1,19 @@
+import { useVuelidate } from '@vuelidate/core';
+
 export default {
+  setup() {
+    return { v$: useVuelidate() };
+  },
   computed: {
     getLabelTitleErrorMessage() {
       let errorMessage = '';
-      if (!this.$v.title.$error) {
+      if (!this.v$.title.$error) {
         errorMessage = '';
-      } else if (!this.$v.title.required) {
+      } else if (!this.v$.title.required) {
         errorMessage = this.$t('LABEL_MGMT.FORM.NAME.REQUIRED_ERROR');
-      } else if (!this.$v.title.minLength) {
+      } else if (!this.v$.title.minLength) {
         errorMessage = this.$t('LABEL_MGMT.FORM.NAME.MINIMUM_LENGTH_ERROR');
-      } else if (!this.$v.title.validLabelCharacters) {
+      } else if (!this.v$.title.validLabelCharacters) {
         errorMessage = this.$t('LABEL_MGMT.FORM.NAME.VALID_ERROR');
       }
       return errorMessage;
diff --git a/app/javascript/dashboard/routes/dashboard/settings/sla/SlaForm.vue b/app/javascript/dashboard/routes/dashboard/settings/sla/SlaForm.vue
index bbe0ac7fe..8eb64fbfd 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/sla/SlaForm.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/sla/SlaForm.vue
@@ -3,7 +3,7 @@
     <form class="flex flex-wrap mx-0" @submit.prevent="onSubmit">
       <woot-input
         v-model="name"
-        :class="{ error: $v.name.$error }"
+        :class="{ error: v$.name.$error }"
         class="w-full"
         :styles="{
           borderRadius: '12px',
@@ -13,7 +13,7 @@
         :label="$t('SLA.FORM.NAME.LABEL')"
         :placeholder="$t('SLA.FORM.NAME.PLACEHOLDER')"
         :error="getSlaNameErrorMessage"
-        @input="$v.name.$touch"
+        @input="v$.name.$touch"
       />
       <woot-input
         v-model="description"
@@ -73,6 +73,7 @@ import { convertSecondsToTimeUnit } from '@chatwoot/utils';
 import validationMixin from './validationMixin';
 import validations from './validations';
 import SlaTimeInput from './SlaTimeInput.vue';
+import { useVuelidate } from '@vuelidate/core';
 
 export default {
   components: {
@@ -89,6 +90,9 @@ export default {
       required: true,
     },
   },
+  setup() {
+    return { v$: useVuelidate() };
+  },
   data() {
     return {
       name: '',
@@ -125,7 +129,7 @@ export default {
     }),
     isSubmitDisabled() {
       return (
-        this.$v.name.$invalid ||
+        this.v$.name.$invalid ||
         this.isSlaTimeInputsInvalid ||
         this.uiFlags.isUpdating
       );
diff --git a/app/javascript/dashboard/routes/dashboard/settings/sla/SlaTimeInput.vue b/app/javascript/dashboard/routes/dashboard/settings/sla/SlaTimeInput.vue
index d8c7594c2..bdc72a645 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/sla/SlaTimeInput.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/sla/SlaTimeInput.vue
@@ -2,7 +2,7 @@
   <div class="flex items-center w-full gap-3">
     <woot-input
       v-model="thresholdTime"
-      :class="{ error: $v.thresholdTime.$error }"
+      :class="{ error: v$.thresholdTime.$error }"
       class="flex-grow"
       :styles="{
         borderRadius: '12px',
@@ -36,6 +36,7 @@
 <script>
 import validationMixin from './validationMixin';
 import validations from './validations';
+import { useVuelidate } from '@vuelidate/core';
 
 export default {
   mixins: [validationMixin],
@@ -57,6 +58,9 @@ export default {
       default: '',
     },
   },
+  setup() {
+    return { v$: useVuelidate() };
+  },
   data() {
     return {
       thresholdTime: this.threshold || '',
@@ -90,8 +94,8 @@ export default {
       this.$emit('unit', this.thresholdUnitValue);
     },
     onThresholdTimeChange() {
-      this.$v.thresholdTime.$touch();
-      const isInvalid = this.$v.thresholdTime.$invalid;
+      this.v$.thresholdTime.$touch();
+      const isInvalid = this.v$.thresholdTime.$invalid;
       this.$emit('isInValid', isInvalid);
       this.$emit('input', Number(this.thresholdTime));
     },
diff --git a/app/javascript/dashboard/routes/dashboard/settings/sla/validationMixin.js b/app/javascript/dashboard/routes/dashboard/settings/sla/validationMixin.js
index d086c6072..76afe3872 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/sla/validationMixin.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/sla/validationMixin.js
@@ -1,11 +1,15 @@
+import { useVuelidate } from '@vuelidate/core';
 export default {
+  setup() {
+    return { v$: useVuelidate() };
+  },
   computed: {
     getSlaNameErrorMessage() {
       let errorMessage = '';
-      if (this.$v.name.$error) {
-        if (!this.$v.name.required) {
+      if (this.v$.name.$error) {
+        if (!this.v$.name.required) {
           errorMessage = this.$t('SLA.FORM.NAME.REQUIRED_ERROR');
-        } else if (!this.$v.name.minLength) {
+        } else if (!this.v$.name.minLength) {
           errorMessage = this.$t('SLA.FORM.NAME.MINIMUM_LENGTH_ERROR');
         }
       }
@@ -13,8 +17,8 @@ export default {
     },
     getThresholdTimeErrorMessage() {
       let errorMessage = '';
-      if (this.$v.thresholdTime.$error) {
-        if (!this.$v.thresholdTime.numeric || !this.$v.thresholdTime.minValue) {
+      if (this.v$.thresholdTime.$error) {
+        if (!this.v$.thresholdTime.numeric || !this.v$.thresholdTime.minValue) {
           errorMessage = this.$t(
             'SLA.FORM.THRESHOLD_TIME.INVALID_FORMAT_ERROR'
           );
diff --git a/app/javascript/dashboard/routes/dashboard/settings/teams/Create/AddAgents.vue b/app/javascript/dashboard/routes/dashboard/settings/teams/Create/AddAgents.vue
index 6493f20f5..02221962f 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/teams/Create/AddAgents.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/teams/Create/AddAgents.vue
@@ -14,7 +14,7 @@
       </div>
 
       <div class="w-full">
-        <div v-if="$v.selectedAgents.$error">
+        <div v-if="v$.selectedAgents.$error">
           <p class="error-message">
             {{ $t('TEAMS_SETTINGS.ADD.AGENT_VALIDATION_ERROR') }}
           </p>
@@ -38,6 +38,7 @@ import alertMixin from 'shared/mixins/alertMixin';
 import router from '../../../../index';
 import PageHeader from '../../SettingsSubPageHeader.vue';
 import AgentSelector from '../AgentSelector.vue';
+import { useVuelidate } from '@vuelidate/core';
 
 export default {
   components: {
@@ -59,6 +60,10 @@ export default {
     },
   },
 
+  setup() {
+    return { v$: useVuelidate() };
+  },
+
   data() {
     return {
       selectedAgents: [],
@@ -90,7 +95,7 @@ export default {
 
   methods: {
     updateSelectedAgents(newAgentList) {
-      this.$v.selectedAgents.$touch();
+      this.v$.selectedAgents.$touch();
       this.selectedAgents = [...newAgentList];
     },
     selectAllAgents() {
diff --git a/app/javascript/dashboard/routes/dashboard/settings/teams/Edit/EditAgents.vue b/app/javascript/dashboard/routes/dashboard/settings/teams/Edit/EditAgents.vue
index 0b3587bf8..3a908e4b6 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/teams/Edit/EditAgents.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/teams/Edit/EditAgents.vue
@@ -14,7 +14,7 @@
       </div>
 
       <div class="w-full">
-        <div v-if="$v.selectedAgents.$error">
+        <div v-if="v$.selectedAgents.$error">
           <p class="error-message">
             {{ $t('TEAMS_SETTINGS.ADD.AGENT_VALIDATION_ERROR') }}
           </p>
@@ -39,10 +39,10 @@
 import { mapGetters } from 'vuex';
 import Spinner from 'shared/components/Spinner.vue';
 import alertMixin from 'shared/mixins/alertMixin';
-
 import router from '../../../../index';
 import PageHeader from '../../SettingsSubPageHeader.vue';
 import AgentSelector from '../AgentSelector.vue';
+import { useVuelidate } from '@vuelidate/core';
 
 export default {
   components: {
@@ -65,7 +65,9 @@ export default {
       },
     },
   },
-
+  setup() {
+    return { v$: useVuelidate() };
+  },
   data() {
     return {
       selectedAgents: [],
@@ -115,7 +117,7 @@ export default {
 
   methods: {
     updateSelectedAgents(newAgentList) {
-      this.$v.selectedAgents.$touch();
+      this.v$.selectedAgents.$touch();
       this.selectedAgents = [...newAgentList];
     },
     async addAgents() {
diff --git a/app/javascript/dashboard/routes/dashboard/settings/teams/TeamForm.vue b/app/javascript/dashboard/routes/dashboard/settings/teams/TeamForm.vue
index 1f1f7ceb3..9cab0c2d3 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/teams/TeamForm.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/teams/TeamForm.vue
@@ -4,20 +4,20 @@
       <form class="mx-0 flex flex-wrap" @submit.prevent="handleSubmit">
         <woot-input
           v-model.trim="title"
-          :class="{ error: $v.title.$error }"
+          :class="{ error: v$.title.$error }"
           class="w-full"
           :label="$t('TEAMS_SETTINGS.FORM.NAME.LABEL')"
           :placeholder="$t('TEAMS_SETTINGS.FORM.NAME.PLACEHOLDER')"
-          @input="$v.title.$touch"
+          @input="v$.title.$touch"
         />
 
         <woot-input
           v-model.trim="description"
-          :class="{ error: $v.description.$error }"
+          :class="{ error: v$.description.$error }"
           class="w-full"
           :label="$t('TEAMS_SETTINGS.FORM.DESCRIPTION.LABEL')"
           :placeholder="$t('TEAMS_SETTINGS.FORM.DESCRIPTION.PLACEHOLDER')"
-          @input="$v.description.$touch"
+          @input="v$.description.$touch"
         />
 
         <div class="w-full flex items-center gap-2">
@@ -29,7 +29,7 @@
         <div class="flex flex-row justify-end gap-2 py-2 px-0 w-full">
           <div class="w-full">
             <woot-submit-button
-              :disabled="$v.title.$invalid || submitInProgress"
+              :disabled="v$.title.$invalid || submitInProgress"
               :button-text="submitButtonText"
               :loading="submitInProgress"
             />
@@ -43,6 +43,7 @@
 <script>
 import WootSubmitButton from '../../../../components/buttons/FormSubmitButton.vue';
 import validations from './helpers/validations';
+import { useVuelidate } from '@vuelidate/core';
 
 export default {
   components: {
@@ -67,6 +68,9 @@ export default {
       default: '',
     },
   },
+  setup() {
+    return { v$: useVuelidate() };
+  },
   data() {
     const formData = this.formData || {};
     const {
@@ -84,8 +88,8 @@ export default {
   validations,
   methods: {
     handleSubmit() {
-      this.$v.$touch();
-      if (this.$v.$invalid) {
+      this.v$.$touch();
+      if (this.v$.$invalid) {
         return;
       }
       this.onSubmit({