chore: Migrate all instances of old vuelidate to new v2 syntax [CW-3274] (#9623)

Removes all the old vuelidate syntax and replaced it with the new
`useValidate` composable and the `v$` helper.

| Component | Path | Migrated | Tested |

|------------------------------------|--------------------------------------------------------------|-----------------------------------------------|--------|
| Login page | app/javascript/v3/views/login/Index.vue | ✅ | ✅ |
| Custom Attributes settings page |
app/javascript/dashboard/components/CustomAttribute.vue | ✅ | ✅ |
| Account settings page |
app/javascript/dashboard/routes/dashboard/settings/account/Index.vue | ✅
| ✅ |
| Add Account Modal |
app/javascript/dashboard/components/layout/sidebarComponents/AddAccountModal.vue
| ✅ | ✅ |
| AICTA Modal |
app/javascript/dashboard/components/widgets/AICTAModal.vue | ✅ | ✅ |
| Conversation Advanced Filters |
app/javascript/dashboard/components/widgets/conversation/ConversationAdvancedFilter.vue
| deprecated `$each` prop in validations object | |
| Email Transript Modal |
app/javascript/dashboard/components/widgets/conversation/EmailTranscriptModal.vue
| ✅ | ✅ |
| Linear Create Issue |
app/javascript/dashboard/components/widgets/conversation/linear/CreateIssue.vue
| ✅ | ✅ |
| Template Parser |
app/javascript/dashboard/components/widgets/conversation/WhatsappTemplates/TemplateParser.vue
| ✅ | |
| Delete Confirmation Modal |
app/javascript/dashboard/components/widgets/modal/ConfirmDeleteModal.vue
| ✅ | ✅ |
| Add Custom Attribute |
app/javascript/dashboard/modules/contact/components/AddCustomAttribute.vue
| ✅ | ✅ |
| Merge Contacts |
app/javascript/dashboard/modules/contact/components/MergeContact.vue | ✅
| ✅ |
| Contacts Advanced Filters |
app/javascript/dashboard/routes/dashboard/contacts/components/ContactsAdvancedFilters.vue
| deprecated `$each` prop in validations object | |
| Contact Form |
app/javascript/dashboard/routes/dashboard/conversation/contact/ContactForm.vue
| ✅ | ✅ |
| Conversation Form |
app/javascript/dashboard/routes/dashboard/conversation/contact/ConversationForm.vue
| ✅ | ✅ |
| Add Custom Views |
app/javascript/dashboard/routes/dashboard/customviews/AddCustomViews.vue
| ✅ | ✅ |
| Add Locale |
app/javascript/dashboard/routes/dashboard/helpcenter/components/AddLocale.vue
| ✅ | ✅ |
| Portal Settings Basic Form |
/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSettingsBasicForm.vue
| ✅ | ✅ |
| Portal Settings Customization Form |
/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSettingsCustomizationForm.vue
| ✅ | ✅ |
| Add Category |
app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/AddCategory.vue
| ✅ | ✅ |
| Edit Category |
app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/EditCategory.vue
| ✅ | ✅ |
| CSML Bot Editor |
app/javascript/dashboard/routes/dashboard/settings/agentBots/components/CSMLBotEditor.vue
| ✅ | ✅ |
| Add Agent |
app/javascript/dashboard/routes/dashboard/settings/agents/AddAgent.vue |
✅ | ✅ |
| Edit Agent |
app/javascript/dashboard/routes/dashboard/settings/agents/EditAgent.vue
| ✅ | ✅ |
| Add Attribute |
app/javascript/dashboard/routes/dashboard/settings/attributes/AddAttribute.vue
| ✅ | ✅ |
| Edit Attribute |
app/javascript/dashboard/routes/dashboard/settings/attributes/EditAttribute.vue
| ✅ | ✅ |
| Add Campaign |
app/javascript/dashboard/routes/dashboard/settings/campaigns/AddCampaign.vue
| ✅ | ✅ |
| Edit Campaign |
app/javascript/dashboard/routes/dashboard/settings/campaigns/EditCampaign.vue
| ✅ | ✅ |
| Add Canned |
app/javascript/dashboard/routes/dashboard/settings/canned/AddCanned.vue
| ✅ | ✅ |
| Edit Canned |
app/javascript/dashboard/routes/dashboard/settings/canned/EditCanned.vue
| ✅ | ✅ |
| IMAP Settings |
app/javascript/dashboard/routes/dashboard/settings/inbox/ImapSettings.vue
| ✅ | ✅ |
| SMTP Settings |
app/javascript/dashboard/routes/dashboard/settings/inbox/SmtpSettings.vue
| ✅ | ✅ |
| Widget Builder |
app/javascript/dashboard/routes/dashboard/settings/inbox/WidgetBuilder.vue
| ✅ | ✅ |
| 360 Dialog Whatsapp |
app/javascript/dashboard/routes/dashboard/settings/inbox/channels/360DialogWhatsapp.vue
| ✅ | ✅ |
| Inbox API settings |
app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Api.vue
| ✅ | ✅ |
| SMS Bandwidth settings |
app/javascript/dashboard/routes/dashboard/settings/inbox/channels/BandwidthSms.vue
| ✅ | ✅ |
| Cloud Whatsapp Settings |
app/javascript/dashboard/routes/dashboard/settings/inbox/channels/CloudWhatsapp.vue
| ✅ | ✅ |
| Facebook Settings |
app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Facebook.vue
| ✅ | ✅ |
| Line Settings |
app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Line.vue
| ✅ | ✅ |
| Telegram Settings |
app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Telegram.vue
| ✅ | ✅ |
| Twillio Settings |
app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Twilio.vue
| ✅ | ✅ |
| Forward To option settings |
app/javascript/dashboard/routes/dashboard/settings/inbox/channels/emailChannels/ForwardToOption.vue
| ✅ | ✅ |
| Microsoft settings |
app/javascript/dashboard/routes/dashboard/settings/inbox/channels/emailChannels/Microsoft.vue
| ✅ | ✅ |
| Collaborators page |
app/javascript/dashboard/routes/dashboard/settings/inbox/settingsPage/CollaboratorsPage.vue
| ✅ | ✅ |
| Configuration Page |
app/javascript/dashboard/routes/dashboard/settings/inbox/settingsPage/ConfigurationPage.vue
| ✅ | ✅ |
| Dashboard App Modal Settings |
app/javascript/dashboard/routes/dashboard/settings/integrations/DashboardApps/DashboardAppModal.vue
| ✅ | ✅ |
| Settings - Webhook Form |
app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/WebhookForm.vue
| ✅ | ✅ |
| Macro Form |
app/javascript/dashboard/routes/dashboard/settings/macros/MacroForm.vue
| deprecated `$each` prop in validations object | |
| Change Password |
app/javascript/dashboard/routes/dashboard/settings/profile/ChangePassword.vue
| ✅ | ✅ |
| settings - User Basic Details |
app/javascript/dashboard/routes/dashboard/settings/profile/UserBasicDetails.vue
| ✅ | ✅ |
| Password Edit | app/javascript/v3/views/auth/password/Edit.vue | ✅ | ✅
|
| Password Reset form |
app/javascript/v3/views/auth/reset/password/Index.vue | ✅ | ✅ |
| Signup form |
app/javascript/v3/views/auth/signup/components/Signup/Form.vue | ✅ | ✅ |
| Login form | app/javascript/v3/views/login/Index.vue | ✅ | ✅ |
| Custom Attributes |
app/javascript/dashboard/components/CustomAttribute.vue | ✅ | ✅ |
| Reply Email Head |
app/javascript/dashboard/components/widgets/conversation/ReplyEmailHead.vue
| ✅ | ✅ |
| Methods Mixin |
app/javascript/dashboard/mixins/automations/methodsMixin.js | ✅ | ✅ |
| Validations mixin |
app/javascript/dashboard/routes/dashboard/settings/labels/validationMixin.js
| ✅ | ✅ |
| SLA Form |
app/javascript/dashboard/routes/dashboard/settings/sla/SlaForm.vue | ✅ |
✅ |
| SLA Time Input |
app/javascript/dashboard/routes/dashboard/settings/sla/SlaTimeInput.vue
| ✅ | ✅ |
| SLA Validation Mixin |
app/javascript/dashboard/routes/dashboard/settings/sla/validationMixin.js
| ✅ | ✅ |
| Team Form |
app/javascript/dashboard/routes/dashboard/settings/teams/TeamForm.vue |
✅ | ✅ |
| Add Agents |
app/javascript/dashboard/routes/dashboard/settings/teams/Create/AddAgents.vue
| ✅ | ✅ |
| Edit Agents |
app/javascript/dashboard/routes/dashboard/settings/teams/Edit/EditAgents.vue
| ✅ | ✅ |


---------

Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>
Co-authored-by: Shivam Mishra <scm.mymail@gmail.com>
Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Co-authored-by: Pranav <pranav@chatwoot.com>

.storybook/preview.js

@@ -2,7 +2,6 @@ import { addDecorator } from '@storybook/vue';
 import Vue from 'vue';
 import Vuex from 'vuex';
 import VueI18n from 'vue-i18n';
-import Vuelidate from 'vuelidate';
 import Multiselect from 'vue-multiselect';
 import VueDOMPurifyHTML from 'vue-dompurify-html';
 import FluentIcon from 'shared/components/FluentIcon/DashboardIcon';
@@ -14,7 +13,6 @@ import { domPurifyConfig } from 'shared/helpers/HTMLSanitizer';
 import '../app/javascript/dashboard/assets/scss/storybook.scss';
 
 Vue.use(VueI18n);
-Vue.use(Vuelidate);
 Vue.use(WootUiKit);
 Vue.use(Vuex);
 Vue.use(VueDOMPurifyHTML, domPurifyConfig);
@@ -32,7 +30,7 @@ addDecorator(() => ({
   template: '<story/>',
   i18n: i18nConfig,
   store,
-  beforeCreate: function() {
+  beforeCreate: function () {
     this.$root._i18n = this.$i18n;
   },
 }));

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 }"
+            :class="{ error: v$.editedValue.$error }"
-            @blur="$v.editedValue.$touch"
+            @blur="v$.editedValue.$touch"
             @keyup.enter="onUpdate"
           />
           <div>
@@ -136,12 +136,13 @@
 
 <script>
 import { format, parseISO } from 'date-fns';
-import { required, url } from 'vuelidate/lib/validators';
+import { required, url } from '@vuelidate/validators';
 import { BUS_EVENTS } from 'shared/constants/busEvents';
 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();
+      this.v$.$touch();
-      if (this.$v.$invalid) {
+      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() {

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,7 +49,8 @@
 </template>
 
 <script>
-import { required, minLength } from 'vuelidate/lib/validators';
+import { useVuelidate } from '@vuelidate/core';
+import { required, minLength } from '@vuelidate/validators';
 import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
 
@@ -64,6 +65,9 @@ export default {
       default: true,
     },
   },
+  setup() {
+    return { v$: useVuelidate() };
+  },
   data() {
     return {
       accountName: '',

app/javascript/dashboard/components/widgets/AICTAModal.vue

@@ -12,11 +12,11 @@
         <woot-input
           v-model="value"
           type="text"
-          :class="{ error: $v.value.$error }"
+          :class="{ error: v$.value.$error }"
           :placeholder="
             $t('INTEGRATION_SETTINGS.OPEN_AI.CTA_MODAL.KEY_PLACEHOLDER')
           "
-          @blur="$v.value.$touch"
+          @blur="v$.value.$touch"
         />
       </div>
       <div class="flex flex-row justify-between w-full gap-2 px-0 py-2">
@@ -27,7 +27,7 @@
           <woot-button variant="clear" @click.prevent="onDismiss">
             {{ $t('INTEGRATION_SETTINGS.OPEN_AI.CTA_MODAL.BUTTONS.DISMISS') }}
           </woot-button>
-          <woot-button :is-disabled="$v.value.$invalid">
+          <woot-button :is-disabled="v$.value.$invalid">
             {{ $t('INTEGRATION_SETTINGS.OPEN_AI.CTA_MODAL.BUTTONS.FINISH') }}
           </woot-button>
         </div>
@@ -37,7 +37,8 @@
 </template>
 
 <script>
-import { required } from 'vuelidate/lib/validators';
+import { useVuelidate } from '@vuelidate/core';
+import { required } from '@vuelidate/validators';
 import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
 import { useUISettings } from 'dashboard/composables/useUISettings';
@@ -48,10 +49,9 @@ export default {
   mixins: [aiMixin],
   setup() {
     const { updateUISettings } = useUISettings();
+    const v$ = useVuelidate();
 
-    return {
+    return { updateUISettings, v$ };
-      updateUISettings,
-    };
   },
   data() {
     return {

app/javascript/dashboard/components/widgets/AutomationActionInput.vue

@@ -96,11 +96,8 @@
       :placeholder="$t('AUTOMATION.ACTION.TEAM_MESSAGE_INPUT_PLACEHOLDER')"
       class="action-message"
     />
-    <p
+    <p v-if="errorMessage" class="filter-error">
-      v-if="v.action_params.$dirty && v.action_params.$error"
+      {{ errorMessage }}
-      class="filter-error"
-    >
-      {{ $t('FILTER.EMPTY_VALUE_ERROR') }}
     </p>
   </div>
 </template>
@@ -128,9 +125,9 @@ export default {
       type: Array,
       default: () => [],
     },
-    v: {
+    errorMessage: {
-      type: Object,
+      type: String,
-      default: () => null,
+      default: '',
     },
     showActionInput: {
       type: Boolean,
@@ -172,7 +169,7 @@ export default {
     },
     actionInputStyles() {
       return {
-        'has-error': this.v.action_params.$dirty && this.v.action_params.$error,
+        'has-error': this.errorMessage,
         'is-a-macro': this.isMacro,
       };
     },

app/javascript/dashboard/components/widgets/FilterInput/Index.vue

@@ -3,7 +3,7 @@
   <div>
     <div
       class="rounded-md p-2 border border-solid"
-      :class="getInputErrorClass(v.values.$dirty, v.values.$error)"
+      :class="getInputErrorClass(errorMessage)"
     >
       <div class="flex">
         <select
@@ -115,8 +115,8 @@
           @click="removeFilter"
         />
       </div>
-      <p v-if="v.values.$dirty && v.values.$error" class="filter-error">
+      <p v-if="errorMessage" class="filter-error">
-        {{ $t('FILTER.EMPTY_VALUE_ERROR') }}
+        {{ errorMessage }}
       </p>
     </div>
 
@@ -173,10 +173,6 @@ export default {
       type: Boolean,
       default: false,
     },
-    v: {
-      type: Object,
-      default: () => null,
-    },
     showUserInput: {
       type: Boolean,
       default: true,
@@ -193,6 +189,10 @@ export default {
       type: String,
       default: '',
     },
+    errorMessage: {
+      type: String,
+      default: '',
+    },
   },
   computed: {
     attributeKey: {
@@ -271,8 +271,8 @@ export default {
     resetFilter() {
       this.$emit('resetFilter');
     },
-    getInputErrorClass(isDirty, hasError) {
+    getInputErrorClass(errorMessage) {
-      return isDirty && hasError
+      return errorMessage
         ? 'bg-red-50 dark:bg-red-800/50 border-red-100 dark:border-red-700/50'
         : 'bg-slate-50 dark:bg-slate-800 border-slate-75 dark:border-slate-700/50';
     },

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

@@ -12,7 +12,7 @@
           <input
             v-model="activeFolderNewName"
             type="text"
-            class="folder-input border-slate-75 dark:border-slate-600 bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-100"
+            class="bg-white folder-input border-slate-75 dark:border-slate-600 dark:bg-slate-900 text-slate-900 dark:text-slate-100"
           />
           <span v-if="!activeFolderNewName" class="message">
             {{ $t('FILTER.EMPTY_VALUE_ERROR') }}
@@ -23,7 +23,7 @@
         </label>
       </div>
       <div
-        class="p-4 rounded-lg bg-slate-25 dark:bg-slate-900 border border-solid border-slate-50 dark:border-slate-700/50 mb-4"
+        class="p-4 mb-4 border border-solid rounded-lg bg-slate-25 dark:bg-slate-900 border-slate-50 dark:border-slate-700/50"
       >
         <filter-input-box
           v-for="(filter, i) in appliedFilters"
@@ -41,7 +41,7 @@
           :show-query-operator="i !== appliedFilters.length - 1"
           :show-user-input="showUserInput(appliedFilters[i].filter_operator)"
           :grouped-filters="true"
-          :v="$v.appliedFilters.$each[i]"
+          :error-message="validationErrors[`filter_${i}`]"
           @resetFilter="resetFilter(i, appliedFilters[i])"
           @removeFilter="removeFilter(i)"
         />
@@ -58,7 +58,7 @@
         </div>
       </div>
       <div class="w-full">
-        <div class="flex flex-row justify-end gap-2 py-2 px-0 w-full">
+        <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
           <woot-button class="button clear" @click.prevent="onClose">
             {{ $t('FILTER.CANCEL_BUTTON_LABEL') }}
           </woot-button>
@@ -80,7 +80,6 @@
 
 <script>
 import { useAlert } from 'dashboard/composables';
-import { required, requiredIf } from 'vuelidate/lib/validators';
 import FilterInputBox from '../FilterInput/Index.vue';
 import languages from './advancedFilterItems/languages';
 import countries from 'shared/constants/countries.js';
@@ -89,6 +88,7 @@ import { filterAttributeGroups } from './advancedFilterItems';
 import filterMixin from 'shared/mixins/filterMixin';
 import * as OPERATORS from 'dashboard/components/widgets/FilterInput/FilterOperatorTypes.js';
 import { CONVERSATION_EVENTS } from '../../../helper/AnalyticsHelper/events';
+import { validateConversationOrContactFilters } from 'dashboard/helper/validations.js';
 
 export default {
   components: {
@@ -117,27 +117,6 @@ export default {
       default: false,
     },
   },
-  validations: {
-    appliedFilters: {
-      required,
-      $each: {
-        values: {
-          ensureBetween0to999(value, prop) {
-            if (prop.filter_operator === 'days_before') {
-              return parseInt(value, 10) > 0 && parseInt(value, 10) < 999;
-            }
-            return true;
-          },
-          required: requiredIf(prop => {
-            return !(
-              prop.filter_operator === 'is_present' ||
-              prop.filter_operator === 'is_not_present'
-            );
-          }),
-        },
-      },
-    },
-  },
   data() {
     return {
       show: true,
@@ -149,6 +128,7 @@ export default {
       allCustomAttributes: [],
       attributeModel: 'conversation_attribute',
       filtersFori18n: 'FILTER',
+      validationErrors: {},
     };
   },
   computed: {
@@ -347,20 +327,23 @@ export default {
       }
     },
     submitFilterQuery() {
-      this.$v.$touch();
+      this.validationErrors = validateConversationOrContactFilters(
-      if (this.$v.$invalid) return;
+        this.appliedFilters
-      this.$store.dispatch(
-        'setConversationFilters',
-        JSON.parse(JSON.stringify(this.appliedFilters))
       );
-      this.$emit('applyFilter', this.appliedFilters);
+      if (Object.keys(this.validationErrors).length === 0) {
-      this.$track(CONVERSATION_EVENTS.APPLY_FILTER, {
+        this.$store.dispatch(
-        applied_filters: this.appliedFilters.map(filter => ({
+          'setConversationFilters',
-          key: filter.attribute_key,
+          JSON.parse(JSON.stringify(this.appliedFilters))
-          operator: filter.filter_operator,
+        );
-          query_operator: filter.query_operator,
+        this.$emit('applyFilter', this.appliedFilters);
-        })),
+        this.$track(CONVERSATION_EVENTS.APPLY_FILTER, {
-      });
+          applied_filters: this.appliedFilters.map(filter => ({
+            key: filter.attribute_key,
+            operator: filter.filter_operator,
+            query_operator: filter.query_operator,
+          })),
+        });
+      }
     },
     updateSavedCustomViews() {
       this.$emit('updateFolder', this.appliedFilters, this.activeFolderNewName);

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,7 +76,8 @@
 </template>
 
 <script>
-import { required, minLength, email } from 'vuelidate/lib/validators';
+import { useVuelidate } from '@vuelidate/core';
+import { required, minLength, email } from '@vuelidate/validators';
 import { useAlert } from 'dashboard/composables';
 export default {
   props: {
@@ -89,6 +90,9 @@ export default {
       default: () => ({}),
     },
   },
+  setup() {
+    return { v$: useVuelidate() };
+  },
   data() {
     return {
       email: '',
@@ -110,7 +114,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/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);

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/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();
+      this.v$.$touch();
-      if (this.$v.$invalid) return;
+      if (this.v$.$invalid) return;
       const payload = {
         message: this.processedString,
         templateParams: {

app/javascript/dashboard/components/widgets/conversation/helpers/emailHeadHelper.js

@@ -1,7 +1,7 @@
-import emailValidator from 'vuelidate/lib/validators/email';
+import { email as emailValidator } from '@vuelidate/validators';
 
 export const validEmailsByComma = value => {
   if (!value.length) return true;
   const emails = value.replace(/\s+/g, '').split(',');
-  return emails.every(email => emailValidator(email));
+  return emails.every(email => emailValidator.$validator(email));
 };

app/javascript/dashboard/components/widgets/modal/ConfirmDeleteModal.vue

@@ -6,12 +6,12 @@
       <woot-input
         v-model="value"
         type="text"
-        :class="{ error: $v.value.$error }"
+        :class="{ error: v$.value.$error }"
         :placeholder="confirmPlaceHolderText"
-        @blur="$v.value.$touch"
+        @blur="v$.value.$touch"
       />
       <div class="button-wrapper">
-        <woot-button color-scheme="alert" :is-disabled="$v.value.$invalid">
+        <woot-button color-scheme="alert" :is-disabled="v$.value.$invalid">
           {{ confirmText }}
         </woot-button>
         <woot-button class="clear" @click.prevent="closeModal">
@@ -23,9 +23,9 @@
 </template>
 
 <script>
-import { required } from 'vuelidate/lib/validators';
+import { useVuelidate } from '@vuelidate/core';
+import { required } from '@vuelidate/validators';
 import Modal from '../../Modal.vue';
-
 export default {
   components: {
     Modal,
@@ -61,6 +61,9 @@ export default {
       default: '',
     },
   },
+  setup() {
+    return { v$: useVuelidate() };
+  },
   data() {
     return {
       value: '',

app/javascript/dashboard/helper/specs/validations.spec.js

@@ -0,0 +1,127 @@
+import { describe, it, expect } from 'vitest';
+import {
+  validateConversationOrContactFilters,
+  validateAutomation,
+} from '../validations';
+
+describe('validateConversationOrContactFilters', () => {
+  it('should return no errors for valid filters', () => {
+    const validFilters = [
+      { attribute_key: 'name', filter_operator: 'contains', values: 'John' },
+      { attribute_key: 'email', filter_operator: 'is_present' },
+    ];
+    const errors = validateConversationOrContactFilters(validFilters);
+    expect(errors).toEqual({});
+  });
+
+  it('should return errors for invalid filters', () => {
+    const invalidFilters = [
+      { attribute_key: '', filter_operator: 'contains', values: 'John' },
+      { attribute_key: 'email', filter_operator: '' },
+      { attribute_key: 'age', filter_operator: 'equals' },
+    ];
+    const errors = validateConversationOrContactFilters(invalidFilters);
+    expect(errors).toEqual({
+      filter_0: 'ATTRIBUTE_KEY_REQUIRED',
+      filter_1: 'FILTER_OPERATOR_REQUIRED',
+      filter_2: 'VALUE_REQUIRED',
+    });
+  });
+
+  it('should validate days_before operator correctly', () => {
+    const filters = [
+      { attribute_key: 'date', filter_operator: 'days_before', values: '0' },
+      { attribute_key: 'date', filter_operator: 'days_before', values: '999' },
+      { attribute_key: 'date', filter_operator: 'days_before', values: '500' },
+    ];
+    const errors = validateConversationOrContactFilters(filters);
+    expect(errors).toEqual({
+      filter_0: 'VALUE_MUST_BE_BETWEEN_1_AND_998',
+      filter_1: 'VALUE_MUST_BE_BETWEEN_1_AND_998',
+    });
+  });
+});
+
+describe('validateAutomation', () => {
+  it('should return no errors for a valid automation', () => {
+    const validAutomation = {
+      name: 'Test Automation',
+      description: 'A test automation',
+      event_name: 'message_created',
+      conditions: [
+        {
+          attribute_key: 'content',
+          filter_operator: 'contains',
+          values: 'hello',
+        },
+      ],
+      actions: [
+        { action_name: 'send_message', action_params: ['Hello there!'] },
+      ],
+    };
+    const errors = validateAutomation(validAutomation);
+    expect(errors).toEqual({});
+  });
+
+  it('should return errors for missing basic fields', () => {
+    const invalidAutomation = {
+      name: '',
+      description: '',
+      event_name: '',
+      conditions: [],
+      actions: [],
+    };
+    const errors = validateAutomation(invalidAutomation);
+    expect(errors).toHaveProperty('name');
+    expect(errors).toHaveProperty('description');
+    expect(errors).toHaveProperty('event_name');
+  });
+
+  it('should return errors for invalid conditions', () => {
+    const automationWithInvalidConditions = {
+      name: 'Test',
+      description: 'Test',
+      event_name: 'message_created',
+      conditions: [{ attribute_key: '', filter_operator: '', values: '' }],
+      actions: [{ action_name: 'send_message', action_params: ['Hello'] }],
+    };
+    const errors = validateAutomation(automationWithInvalidConditions);
+    expect(errors).toHaveProperty('condition_0');
+  });
+
+  it('should return errors for invalid actions', () => {
+    const automationWithInvalidActions = {
+      name: 'Test',
+      description: 'Test',
+      event_name: 'message_created',
+      conditions: [
+        {
+          attribute_key: 'content',
+          filter_operator: 'contains',
+          values: 'hello',
+        },
+      ],
+      actions: [{ action_name: 'send_message', action_params: [] }],
+    };
+    const errors = validateAutomation(automationWithInvalidActions);
+    expect(errors).toHaveProperty('action_0');
+  });
+
+  it('should not require action params for specific actions', () => {
+    const automationWithNoParamAction = {
+      name: 'Test',
+      description: 'Test',
+      event_name: 'message_created',
+      conditions: [
+        {
+          attribute_key: 'content',
+          filter_operator: 'contains',
+          values: 'hello',
+        },
+      ],
+      actions: [{ action_name: 'mute_conversation' }],
+    };
+    const errors = validateAutomation(automationWithNoParamAction);
+    expect(errors).toEqual({});
+  });
+});

app/javascript/dashboard/helper/validations.js

@@ -0,0 +1,193 @@
+export const ATTRIBUTE_KEY_REQUIRED = 'ATTRIBUTE_KEY_REQUIRED';
+export const FILTER_OPERATOR_REQUIRED = 'FILTER_OPERATOR_REQUIRED';
+export const VALUE_REQUIRED = 'VALUE_REQUIRED';
+export const VALUE_MUST_BE_BETWEEN_1_AND_998 =
+  'VALUE_MUST_BE_BETWEEN_1_AND_998';
+export const ACTION_PARAMETERS_REQUIRED = 'ACTION_PARAMETERS_REQUIRED';
+export const ATLEAST_ONE_CONDITION_REQUIRED = 'ATLEAST_ONE_CONDITION_REQUIRED';
+export const ATLEAST_ONE_ACTION_REQUIRED = 'ATLEAST_ONE_ACTION_REQUIRED';
+// ------------------------------------------------------------------
+// ------------------------ Filter Validation -----------------------
+// ------------------------------------------------------------------
+
+/**
+ * Validates a single filter for conversations or contacts.
+ *
+ * @param {Object} filter - The filter object to validate.
+ * @param {string} filter.attribute_key - The key of the attribute to filter on.
+ * @param {string} filter.filter_operator - The operator to use for filtering.
+ * @param {string|number|Array} [filter.values] - The value(s) to filter by (required for most operators).
+ *
+ * @returns {string|null} An error message if validation fails, or null if validation passes.
+ */
+const validateSingleFilter = filter => {
+  if (!filter.attribute_key) {
+    return ATTRIBUTE_KEY_REQUIRED;
+  }
+
+  if (!filter.filter_operator) {
+    return FILTER_OPERATOR_REQUIRED;
+  }
+
+  if (
+    filter.filter_operator !== 'is_present' &&
+    filter.filter_operator !== 'is_not_present' &&
+    (!filter.values ||
+      (Array.isArray(filter.values) && filter.values.length === 0))
+  ) {
+    return VALUE_REQUIRED;
+  }
+
+  if (
+    filter.filter_operator === 'days_before' &&
+    (parseInt(filter.values, 10) <= 0 || parseInt(filter.values, 10) >= 999)
+  ) {
+    return VALUE_MUST_BE_BETWEEN_1_AND_998;
+  }
+
+  return null;
+};
+
+/**
+ * Validates filters for conversations or contacts.
+ *
+ * @param {Array} filters - An array of filter objects to validate.
+ * @param {string} filters[].attribute_key - The key of the attribute to filter on.
+ * @param {string} filters[].filter_operator - The operator to use for filtering.
+ * @param {string|number} [filters[].values] - The value(s) to filter by (required for most operators).
+ *
+ * @returns {Object} An object containing any validation errors, keyed by filter index.
+ */
+export const validateConversationOrContactFilters = filters => {
+  const errors = {};
+
+  filters.forEach((filter, index) => {
+    const error = validateSingleFilter(filter);
+    if (error) {
+      errors[`filter_${index}`] = error;
+    }
+  });
+
+  return errors;
+};
+
+// ------------------------------------------------------------------
+// ---------------------- Automation Validation ---------------------
+// ------------------------------------------------------------------
+
+/**
+ * Validates the basic fields of an automation object.
+ *
+ * @param {Object} automation - The automation object to validate.
+ * @returns {Object} An object containing any validation errors.
+ */
+const validateBasicFields = automation => {
+  const errors = {};
+  const requiredFields = ['name', 'description', 'event_name'];
+
+  requiredFields.forEach(field => {
+    if (!automation[field]) {
+      errors[field] = `${
+        field.charAt(0).toUpperCase() + field.slice(1)
+      } is required`;
+    }
+  });
+
+  return errors;
+};
+
+/**
+ * Validates the conditions of an automation object.
+ *
+ * @param {Array} conditions - The conditions to validate.
+ * @returns {Object} An object containing any validation errors.
+ */
+export const validateConditions = conditions => {
+  const errors = {};
+
+  if (!conditions || conditions.length === 0) {
+    errors.conditions = ATLEAST_ONE_CONDITION_REQUIRED;
+    return errors;
+  }
+
+  conditions.forEach((condition, index) => {
+    const error = validateSingleFilter(condition);
+    if (error) {
+      errors[`condition_${index}`] = error;
+    }
+  });
+
+  return errors;
+};
+
+/**
+ * Validates a single action of an automation object.
+ *
+ * @param {Object} action - The action to validate.
+ * @returns {string|null} An error message if validation fails, or null if validation passes.
+ */
+const validateSingleAction = action => {
+  const noParamActions = [
+    'mute_conversation',
+    'snooze_conversation',
+    'resolve_conversation',
+    'remove_assigned_team',
+  ];
+
+  if (
+    !noParamActions.includes(action.action_name) &&
+    (!action.action_params || action.action_params.length === 0)
+  ) {
+    return ACTION_PARAMETERS_REQUIRED;
+  }
+
+  return null;
+};
+
+/**
+ * Validates the actions of an automation object.
+ *
+ * @param {Array} actions - The actions to validate.
+ * @returns {Object} An object containing any validation errors.
+ */
+export const validateActions = actions => {
+  if (!actions || actions.length === 0) {
+    return { actions: ATLEAST_ONE_ACTION_REQUIRED };
+  }
+
+  return actions.reduce((errors, action, index) => {
+    const error = validateSingleAction(action);
+    if (error) {
+      errors[`action_${index}`] = error;
+    }
+    return errors;
+  }, {});
+};
+
+/**
+ * Validates an automation object.
+ *
+ * @param {Object} automation - The automation object to validate.
+ * @param {string} automation.name - The name of the automation.
+ * @param {string} automation.description - The description of the automation.
+ * @param {string} automation.event_name - The name of the event that triggers the automation.
+ * @param {Array} automation.conditions - An array of condition objects for the automation.
+ * @param {string} automation.conditions[].filter_operator - The operator for the condition.
+ * @param {string|number} [automation.conditions[].values] - The value(s) for the condition.
+ * @param {Array} automation.actions - An array of action objects for the automation.
+ * @param {string} automation.actions[].action_name - The name of the action.
+ * @param {Array} [automation.actions[].action_params] - The parameters for the action.
+ *
+ * @returns {Object} An object containing any validation errors.
+ */
+export const validateAutomation = automation => {
+  const basicErrors = validateBasicFields(automation);
+  const conditionErrors = validateConditions(automation.conditions);
+  const actionErrors = validateActions(automation.actions);
+
+  return {
+    ...basicErrors,
+    ...conditionErrors,
+    ...actionErrors,
+  };
+};

app/javascript/dashboard/i18n/locale/en/automation.json

@@ -39,12 +39,7 @@
       }
     },
     "LIST": {
-      "TABLE_HEADER": [
+      "TABLE_HEADER": ["Name", "Description", "Active", "Created on"],
-        "Name",
-        "Description",
-        "Active",
-        "Created on"
-      ],
       "404": "No automation rules found"
     },
     "DELETE": {
@@ -113,6 +108,15 @@
       "LABEL_UPLOADING": "Uploading...",
       "LABEL_UPLOADED": "Successfully Uploaded",
       "LABEL_UPLOAD_FAILED": "Upload Failed"
+    },
+    "ERRORS": {
+      "ATTRIBUTE_KEY_REQUIRED": "Attribute key is required",
+      "FILTER_OPERATOR_REQUIRED": "Filter operator is required",
+      "VALUE_REQUIRED": "Value is required",
+      "VALUE_MUST_BE_BETWEEN_1_AND_998": "Value must be between 1 and 998",
+      "ACTION_PARAMETERS_REQUIRED": "Action parameters are required",
+      "ATLEAST_ONE_CONDITION_REQUIRED": "At least one condition is required",
+      "ATLEAST_ONE_ACTION_REQUIRED": "At least one action is required"
     }
   }
 }

app/javascript/dashboard/i18n/locale/en/macros.json

@@ -68,6 +68,15 @@
       "BUTTON_TOOLTIP": "Execute",
       "PREVIEW": "Preview Macro",
       "EXECUTED_SUCCESSFULLY": "Macro executed successfully"
+    },
+    "ERRORS": {
+      "ATTRIBUTE_KEY_REQUIRED": "Attribute key is required",
+      "FILTER_OPERATOR_REQUIRED": "Filter operator is required",
+      "VALUE_REQUIRED": "Value is required",
+      "VALUE_MUST_BE_BETWEEN_1_AND_998": "Value must be between 1 and 998",
+      "ACTION_PARAMETERS_REQUIRED": "Action parameters are required",
+      "ATLEAST_ONE_CONDITION_REQUIRED": "At least one condition is required",
+      "ATLEAST_ONE_ACTION_REQUIRED": "At least one action is required"
     }
   }
 }

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 { validateAutomation } from 'dashboard/helper/validations';
+
 import {
   generateCustomAttributeTypes,
   getActionOptions,
@@ -152,10 +154,13 @@ export default {
       }
     },
     submitAutomation() {
-      this.$v.$touch();
+      // we assign it to this.errors so that it can be accessed in the template
-      if (this.$v.$invalid) return;
+      // it is supposed to be declared in the data function
-      const automation = generateAutomationPayload(this.automation);
+      this.errors = validateAutomation(this.automation);
-      this.$emit('saveAutomation', automation, this.mode);
+      if (Object.keys(this.errors).length === 0) {
+        const automation = generateAutomationPayload(this.automation);
+        this.$emit('saveAutomation', automation, this.mode);
+      }
     },
     resetFilter(index, currentCondition) {
       this.automation.conditions[index].filter_operator = this.automationTypes[

app/javascript/dashboard/mixins/automations/validationsMixin.js

@@ -1,44 +0,0 @@
-import { required, requiredIf } from 'vuelidate/lib/validators';
-
-export default {
-  validations: {
-    automation: {
-      name: {
-        required,
-      },
-      description: {
-        required,
-      },
-      event_name: {
-        required,
-      },
-      conditions: {
-        required,
-        $each: {
-          values: {
-            required: requiredIf(prop => {
-              return !(
-                prop.filter_operator === 'is_present' ||
-                prop.filter_operator === 'is_not_present'
-              );
-            }),
-          },
-        },
-      },
-      actions: {
-        required,
-        $each: {
-          action_params: {
-            required: requiredIf(prop => {
-              return !(
-                prop.action_name === 'mute_conversation' ||
-                prop.action_name === 'snooze_conversation' ||
-                prop.action_name === 'resolve_conversation'
-              );
-            }),
-          },
-        },
-      },
-    },
-  },
-};

app/javascript/dashboard/modules/contact/components/AddCustomAttribute.vue

@@ -8,12 +8,12 @@
     <form class="w-full" @submit.prevent="addCustomAttribute">
       <woot-input
         v-model.trim="attributeName"
-        :class="{ error: $v.attributeName.$error }"
+        :class="{ error: v$.attributeName.$error }"
         class="w-full"
         :error="attributeNameError"
         :label="$t('CUSTOM_ATTRIBUTES.FORM.NAME.LABEL')"
         :placeholder="$t('CUSTOM_ATTRIBUTES.FORM.NAME.PLACEHOLDER')"
-        @input="$v.attributeName.$touch"
+        @input="v$.attributeName.$touch"
       />
       <woot-input
         v-model.trim="attributeValue"
@@ -23,7 +23,7 @@
       />
       <div class="flex items-center justify-end gap-2 px-0 py-2">
         <woot-button
-          :is-disabled="$v.attributeName.$invalid || isCreating"
+          :is-disabled="v$.attributeName.$invalid || isCreating"
           :is-loading="isCreating"
         >
           {{ $t('CUSTOM_ATTRIBUTES.FORM.CREATE') }}
@@ -38,7 +38,8 @@
 
 <script>
 import Modal from 'dashboard/components/Modal.vue';
-import { required, minLength } from 'vuelidate/lib/validators';
+import { useVuelidate } from '@vuelidate/core';
+import { required, minLength } from '@vuelidate/validators';
 
 export default {
   components: {
@@ -54,6 +55,9 @@ export default {
       default: false,
     },
   },
+  setup() {
+    return { v$: useVuelidate() };
+  },
   data() {
     return {
       attributeValue: '',
@@ -68,7 +72,7 @@ export default {
   },
   computed: {
     attributeNameError() {
-      if (this.$v.attributeName.$error) {
+      if (this.v$.attributeName.$error) {
         return this.$t('CUSTOM_ATTRIBUTES.FORM.NAME.ERROR');
       }
       return '';

app/javascript/dashboard/modules/contact/components/MergeContact.vue

@@ -4,7 +4,7 @@
       <div>
         <div
           class="mt-1 multiselect-wrap--medium"
-          :class="{ error: $v.parentContact.$error }"
+          :class="{ error: v$.parentContact.$error }"
         >
           <label class="multiselect__label">
             {{ $t('MERGE_CONTACTS.PARENT.TITLE') }}
@@ -52,7 +52,7 @@
               {{ $t('AGENT_MGMT.SEARCH.NO_RESULTS') }}
             </span>
           </multiselect>
-          <span v-if="$v.parentContact.$error" class="message">
+          <span v-if="v$.parentContact.$error" class="message">
             {{ $t('MERGE_CONTACTS.FORM.CHILD_CONTACT.ERROR') }}
           </span>
         </div>
@@ -114,7 +114,8 @@
 </template>
 
 <script>
-import { required } from 'vuelidate/lib/validators';
+import { useVuelidate } from '@vuelidate/core';
+import { required } from '@vuelidate/validators';
 
 import MergeContactSummary from 'dashboard/modules/contact/components/MergeContactSummary.vue';
 import ContactDropdownItem from './ContactDropdownItem.vue';
@@ -139,6 +140,9 @@ export default {
       default: () => [],
     },
   },
+  setup() {
+    return { v$: useVuelidate() };
+  },
   validations: {
     primaryContact: {
       required,
@@ -163,8 +167,8 @@ export default {
       this.$emit('search', query);
     },
     onSubmit() {
-      this.$v.$touch();
+      this.v$.$touch();
-      if (this.$v.$invalid) {
+      if (this.v$.$invalid) {
         return;
       }
       this.$emit('submit', this.parentContact.id);

app/javascript/dashboard/routes/dashboard/contacts/components/ContactsAdvancedFilters.vue

@@ -12,7 +12,7 @@
           <input
             v-model="activeSegmentNewName"
             type="text"
-            class="folder-input border-slate-75 dark:border-slate-600 bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-100"
+            class="bg-white folder-input border-slate-75 dark:border-slate-600 dark:bg-slate-900 text-slate-900 dark:text-slate-100"
           />
           <span v-if="!activeSegmentNewName" class="message">
             {{ $t('CONTACTS_FILTER.EMPTY_VALUE_ERROR') }}
@@ -23,7 +23,7 @@
         </label>
       </div>
       <div
-        class="p-4 rounded-lg bg-slate-25 dark:bg-slate-900 border border-solid border-slate-50 dark:border-slate-700/50 mb-4"
+        class="p-4 mb-4 border border-solid rounded-lg bg-slate-25 dark:bg-slate-900 border-slate-50 dark:border-slate-700/50"
       >
         <filter-input-box
           v-for="(filter, i) in appliedFilters"
@@ -41,7 +41,7 @@
           :dropdown-values="getDropdownValues(appliedFilters[i].attribute_key)"
           :show-query-operator="i !== appliedFilters.length - 1"
           :show-user-input="showUserInput(appliedFilters[i].filter_operator)"
-          :v="$v.appliedFilters.$each[i]"
+          :error-message="validationErrors[`filter_${i}`]"
           @resetFilter="resetFilter(i, appliedFilters[i])"
           @removeFilter="removeFilter(i)"
         />
@@ -68,7 +68,7 @@
         </div>
       </div>
       <div class="w-full">
-        <div class="flex flex-row justify-end gap-2 py-2 px-0 w-full">
+        <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
           <woot-button class="button clear" @click.prevent="onClose">
             {{ $t('CONTACTS_FILTER.CANCEL_BUTTON_LABEL') }}
           </woot-button>
@@ -90,7 +90,6 @@
 
 <script>
 import { useAlert } from 'dashboard/composables';
-import { required } from 'vuelidate/lib/validators';
 import FilterInputBox from '../../../../components/widgets/FilterInput/Index.vue';
 import countries from 'shared/constants/countries.js';
 import { mapGetters } from 'vuex';
@@ -98,6 +97,8 @@ import { filterAttributeGroups } from '../contactFilterItems';
 import filterMixin from 'shared/mixins/filterMixin';
 import * as OPERATORS from 'dashboard/components/widgets/FilterInput/FilterOperatorTypes.js';
 import { CONTACTS_EVENTS } from '../../../../helper/AnalyticsHelper/events';
+import { validateConversationOrContactFilters } from 'dashboard/helper/validations.js';
+
 export default {
   components: {
     FilterInputBox,
@@ -125,22 +126,6 @@ export default {
       default: '',
     },
   },
-  validations: {
-    appliedFilters: {
-      required,
-      $each: {
-        values: {
-          required,
-          ensureBetween0to999(value, prop) {
-            if (prop.filter_operator === 'days_before') {
-              return parseInt(value, 10) > 0 && parseInt(value, 10) < 999;
-            }
-            return true;
-          },
-        },
-      },
-    },
-  },
   data() {
     return {
       show: true,
@@ -152,6 +137,7 @@ export default {
       filterAttributeGroups,
       attributeModel: 'contact_attribute',
       filtersFori18n: 'CONTACTS_FILTER',
+      validationErrors: {},
     };
   },
   computed: {
@@ -314,20 +300,23 @@ export default {
       }
     },
     submitFilterQuery() {
-      this.$v.$touch();
+      this.validationErrors = validateConversationOrContactFilters(
-      if (this.$v.$invalid) return;
+        this.appliedFilters
-      this.$store.dispatch(
-        'contacts/setContactFilters',
-        JSON.parse(JSON.stringify(this.appliedFilters))
       );
-      this.$emit('applyFilter', this.appliedFilters);
+      if (Object.keys(this.validationErrors).length === 0) {
-      this.$track(CONTACTS_EVENTS.APPLY_FILTER, {
+        this.$store.dispatch(
-        applied_filters: this.appliedFilters.map(filter => ({
+          'contacts/setContactFilters',
-          key: filter.attribute_key,
+          JSON.parse(JSON.stringify(this.appliedFilters))
-          operator: filter.filter_operator,
+        );
-          query_operator: filter.query_operator,
+        this.$emit('applyFilter', this.appliedFilters);
-        })),
+        this.$track(CONTACTS_EVENTS.APPLY_FILTER, {
-      });
+          applied_filters: this.appliedFilters.map(filter => ({
+            key: filter.attribute_key,
+            operator: filter.filter_operator,
+            query_operator: filter.query_operator,
+          })),
+        });
+      }
     },
     updateSegment() {
       this.$emit(

app/javascript/dashboard/routes/dashboard/conversation/contact/ContactForm.vue

@@ -18,38 +18,38 @@
     </div>
     <div>
       <div class="w-full">
-        <label :class="{ error: $v.name.$error }">
+        <label :class="{ error: v$.name.$error }">
           {{ $t('CONTACT_FORM.FORM.NAME.LABEL') }}
           <input
             v-model.trim="name"
             type="text"
             :placeholder="$t('CONTACT_FORM.FORM.NAME.PLACEHOLDER')"
-            @input="$v.name.$touch"
+            @input="v$.name.$touch"
           />
         </label>
 
-        <label :class="{ error: $v.email.$error }">
+        <label :class="{ error: v$.email.$error }">
           {{ $t('CONTACT_FORM.FORM.EMAIL_ADDRESS.LABEL') }}
           <input
             v-model.trim="email"
             type="text"
             :placeholder="$t('CONTACT_FORM.FORM.EMAIL_ADDRESS.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('CONTACT_FORM.FORM.EMAIL_ADDRESS.ERROR') }}
           </span>
         </label>
       </div>
     </div>
     <div class="w-full">
-      <label :class="{ error: $v.description.$error }">
+      <label :class="{ error: v$.description.$error }">
         {{ $t('CONTACT_FORM.FORM.BIO.LABEL') }}
         <textarea
           v-model.trim="description"
           type="text"
           :placeholder="$t('CONTACT_FORM.FORM.BIO.PLACEHOLDER')"
-          @input="$v.description.$touch"
+          @input="v$.description.$touch"
         />
       </label>
     </div>
@@ -67,7 +67,7 @@
             :error="isPhoneNumberNotValid"
             :placeholder="$t('CONTACT_FORM.FORM.PHONE_NUMBER.PLACEHOLDER')"
             @input="onPhoneNumberInputChange"
-            @blur="$v.phoneNumber.$touch"
+            @blur="v$.phoneNumber.$touch"
             @setCode="setPhoneCode"
           />
           <span v-if="isPhoneNumberNotValid" class="message">
@@ -155,7 +155,8 @@ import {
   DuplicateContactException,
   ExceptionWithMessage,
 } from 'shared/helpers/CustomErrors';
-import { required, email } from 'vuelidate/lib/validators';
+import { useVuelidate } from '@vuelidate/core';
+import { required, email } from '@vuelidate/validators';
 import countries from 'shared/constants/countries.js';
 import { isPhoneNumberValid } from 'shared/helpers/Validators';
 import parsePhoneNumber from 'libphonenumber-js';
@@ -175,6 +176,9 @@ export default {
       default: () => {},
     },
   },
+  setup() {
+    return { v$: useVuelidate() };
+  },
   data() {
     return {
       countries: countries,
@@ -367,8 +371,8 @@ export default {
       }
     },
     async handleSubmit() {
-      this.$v.$touch();
+      this.v$.$touch();
-      if (this.$v.$invalid || this.isPhoneNumberNotValid) {
+      if (this.v$.$invalid || this.isPhoneNumberNotValid) {
         return;
       }
       try {

app/javascript/dashboard/routes/dashboard/conversation/contact/ConversationForm.vue

@@ -16,7 +16,7 @@
           </label>
           <div
             class="multiselect-wrap--small"
-            :class="{ 'has-multi-select-error': $v.targetInbox.$error }"
+            :class="{ 'has-multi-select-error': v$.targetInbox.$error }"
           >
             <multiselect
               v-model="targetInbox"
@@ -50,8 +50,8 @@
               </template>
             </multiselect>
           </div>
-          <label :class="{ error: $v.targetInbox.$error }">
+          <label :class="{ error: v$.targetInbox.$error }">
-            <span v-if="$v.targetInbox.$error" class="message">
+            <span v-if="v$.targetInbox.$error" class="message">
               {{ $t('NEW_CONVERSATION.FORM.INBOX.ERROR') }}
             </span>
           </label>
@@ -79,15 +79,15 @@
       </div>
       <div v-if="isAnEmailInbox" class="w-full">
         <div class="w-full">
-          <label :class="{ error: $v.subject.$error }">
+          <label :class="{ error: v$.subject.$error }">
             {{ $t('NEW_CONVERSATION.FORM.SUBJECT.LABEL') }}
             <input
               v-model="subject"
               type="text"
               :placeholder="$t('NEW_CONVERSATION.FORM.SUBJECT.PLACEHOLDER')"
-              @input="$v.subject.$touch"
+              @input="v$.subject.$touch"
             />
-            <span v-if="$v.subject.$error" class="message">
+            <span v-if="v$.subject.$error" class="message">
               {{ $t('NEW_CONVERSATION.FORM.SUBJECT.ERROR') }}
             </span>
           </label>
@@ -115,13 +115,13 @@
               <woot-message-editor
                 v-model="message"
                 class="message-editor"
-                :class="{ editor_warning: $v.message.$error }"
+                :class="{ editor_warning: v$.message.$error }"
                 :enable-variables="true"
                 :signature="signatureToApply"
                 :allow-signature="true"
                 :placeholder="$t('NEW_CONVERSATION.FORM.MESSAGE.PLACEHOLDER')"
                 @toggle-canned-menu="toggleCannedMenu"
-                @blur="$v.message.$touch"
+                @blur="v$.message.$touch"
               >
                 <template #footer>
                   <message-signature-missing-alert
@@ -141,7 +141,7 @@
                   </div>
                 </template>
               </woot-message-editor>
-              <span v-if="$v.message.$error" class="editor-warning__message">
+              <span v-if="v$.message.$error" class="editor-warning__message">
                 {{ $t('NEW_CONVERSATION.FORM.MESSAGE.ERROR') }}
               </span>
             </div>
@@ -152,16 +152,16 @@
             @on-select-template="toggleWaTemplate"
             @on-send="onSendWhatsAppReply"
           />
-          <label v-else :class="{ error: $v.message.$error }">
+          <label v-else :class="{ error: v$.message.$error }">
             {{ $t('NEW_CONVERSATION.FORM.MESSAGE.LABEL') }}
             <textarea
               v-model="message"
               class="min-h-[5rem]"
               type="text"
               :placeholder="$t('NEW_CONVERSATION.FORM.MESSAGE.PLACEHOLDER')"
-              @input="$v.message.$touch"
+              @input="v$.message.$touch"
             />
-            <span v-if="$v.message.$error" class="message">
+            <span v-if="v$.message.$error" class="message">
               {{ $t('NEW_CONVERSATION.FORM.MESSAGE.ERROR') }}
             </span>
           </label>
@@ -251,7 +251,8 @@ import WhatsappTemplates from './WhatsappTemplates.vue';
 import { INBOX_TYPES } from 'shared/mixins/inboxMixin';
 import { ExceptionWithMessage } from 'shared/helpers/CustomErrors';
 import { getInboxSource } from 'dashboard/helper/inbox';
-import { required, requiredIf } from 'vuelidate/lib/validators';
+import { useVuelidate } from '@vuelidate/core';
+import { required, requiredIf } from '@vuelidate/validators';
 import inboxMixin from 'shared/mixins/inboxMixin';
 import FileUpload from 'vue-upload-component';
 import AttachmentPreview from 'dashboard/components/widgets/AttachmentsPreview';
@@ -292,11 +293,9 @@ export default {
   setup() {
     const { fetchSignatureFlagFromUISettings, setSignatureFlagForInbox } =
       useUISettings();
+    const v$ = useVuelidate();
 
-    return {
+    return { fetchSignatureFlagFromUISettings, setSignatureFlagForInbox, v$ };
-      fetchSignatureFlagFromUISettings,
-      setSignatureFlagForInbox,
-    };
   },
   data() {
     return {
@@ -506,8 +505,8 @@ export default {
     },
     onFormSubmit() {
       const isFromWhatsApp = false;
-      this.$v.$touch();
+      this.v$.$touch();
-      if (this.$v.$invalid) {
+      if (this.v$.$invalid) {
         return;
       }
       this.createConversation({

app/javascript/dashboard/routes/dashboard/customviews/AddCustomViews.vue

@@ -8,11 +8,11 @@
           :label="$t('FILTER.CUSTOM_VIEWS.ADD.LABEL')"
           type="text"
           :error="
-            $v.name.$error ? $t('FILTER.CUSTOM_VIEWS.ADD.ERROR_MESSAGE') : ''
+            v$.name.$error ? $t('FILTER.CUSTOM_VIEWS.ADD.ERROR_MESSAGE') : ''
           "
-          :class="{ error: $v.name.$error }"
+          :class="{ error: v$.name.$error }"
           :placeholder="$t('FILTER.CUSTOM_VIEWS.ADD.PLACEHOLDER')"
-          @blur="$v.name.$touch"
+          @blur="v$.name.$touch"
         />
 
         <div class="flex flex-row justify-end gap-2 py-2 px-0 w-full">
@@ -29,7 +29,8 @@
 </template>
 
 <script>
-import { required, minLength } from 'vuelidate/lib/validators';
+import { useVuelidate } from '@vuelidate/core';
+import { required, minLength } from '@vuelidate/validators';
 import { useAlert } from 'dashboard/composables';
 import { CONTACTS_EVENTS } from '../../../helper/AnalyticsHelper/events';
 
@@ -48,7 +49,9 @@ export default {
       default: () => {},
     },
   },
-
+  setup() {
+    return { v$: useVuelidate() };
+  },
   data() {
     return {
       show: true,
@@ -58,7 +61,7 @@ export default {
 
   computed: {
     isButtonDisabled() {
-      return this.$v.name.$invalid;
+      return this.v$.name.$invalid;
     },
   },
 
@@ -74,8 +77,8 @@ export default {
       this.$emit('close');
     },
     async saveCustomViews() {
-      this.$v.$touch();
+      this.v$.$touch();
-      if (this.$v.$invalid) {
+      if (this.v$.$invalid) {
         return;
       }
       try {

app/javascript/dashboard/routes/dashboard/helpcenter/components/AddLocale.vue

@@ -7,7 +7,7 @@
     />
     <form class="w-full" @submit.prevent="onCreate">
       <div class="w-full">
-        <label :class="{ error: $v.selectedLocale.$error }">
+        <label :class="{ error: v$.selectedLocale.$error }">
           {{ $t('HELP_CENTER.PORTAL.ADD_LOCALE.LOCALE.LABEL') }}
           <select v-model="selectedLocale">
             <option
@@ -18,7 +18,7 @@
               {{ locale.name }}-{{ locale.code }}
             </option>
           </select>
-          <span v-if="$v.selectedLocale.$error" class="message">
+          <span v-if="v$.selectedLocale.$error" class="message">
             {{ $t('HELP_CENTER.PORTAL.ADD_LOCALE.LOCALE.ERROR') }}
           </span>
         </label>
@@ -39,11 +39,13 @@
 </template>
 
 <script>
+import Modal from 'dashboard/components/Modal.vue';
+import { useVuelidate } from '@vuelidate/core';
 import { useAlert } from 'dashboard/composables';
-import { required } from 'vuelidate/lib/validators';
+import { required } from '@vuelidate/validators';
 import allLocales from 'shared/constants/locales.js';
 import { PORTALS_EVENTS } from '../../../../helper/AnalyticsHelper/events';
-import Modal from 'dashboard/components/Modal.vue';
+
 export default {
   components: {
     Modal,
@@ -58,6 +60,9 @@ export default {
       default: () => ({}),
     },
   },
+  setup() {
+    return { v$: useVuelidate() };
+  },
   data() {
     return {
       selectedLocale: '',
@@ -93,8 +98,8 @@ export default {
   },
   methods: {
     async onCreate() {
-      this.$v.$touch();
+      this.v$.$touch();
-      if (this.$v.$invalid) {
+      if (this.v$.$invalid) {
         return;
       }
       const updatedLocales = this.addedLocales;

app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/AddCategory.vue

@@ -25,20 +25,20 @@
           :label="$t('HELP_CENTER.CATEGORY.ADD.NAME.LABEL')"
           :placeholder="$t('HELP_CENTER.CATEGORY.ADD.NAME.PLACEHOLDER')"
           :help-text="$t('HELP_CENTER.CATEGORY.ADD.NAME.HELP_TEXT')"
-          :has-error="$v.name.$error"
+          :has-error="v$.name.$error"
           :error-message="$t('HELP_CENTER.CATEGORY.ADD.NAME.ERROR')"
           @name-change="onNameChange"
           @icon-change="onClickInsertEmoji"
         />
         <woot-input
           v-model.trim="slug"
-          :class="{ error: $v.slug.$error }"
+          :class="{ error: v$.slug.$error }"
           class="w-full"
           :error="slugError"
           :label="$t('HELP_CENTER.CATEGORY.ADD.SLUG.LABEL')"
           :placeholder="$t('HELP_CENTER.CATEGORY.ADD.SLUG.PLACEHOLDER')"
           :help-text="$t('HELP_CENTER.CATEGORY.ADD.SLUG.HELP_TEXT')"
-          @input="$v.slug.$touch"
+          @input="v$.slug.$touch"
         />
         <label>
           {{ $t('HELP_CENTER.CATEGORY.ADD.DESCRIPTION.LABEL') }}
@@ -67,8 +67,9 @@
 </template>
 
 <script>
+import { useVuelidate } from '@vuelidate/core';
 import { useAlert } from 'dashboard/composables';
-import { required, minLength } from 'vuelidate/lib/validators';
+import { required, minLength } from '@vuelidate/validators';
 import { convertToCategorySlug } from 'dashboard/helper/commons.js';
 import { PORTALS_EVENTS } from '../../../../../helper/AnalyticsHelper/events';
 import CategoryNameIconInput from './NameEmojiInput.vue';
@@ -93,6 +94,9 @@ export default {
       default: '',
     },
   },
+  setup() {
+    return { v$: useVuelidate() };
+  },
   data() {
     return {
       name: '',
@@ -117,7 +121,7 @@ export default {
         : this.portalSlug;
     },
     slugError() {
-      if (this.$v.slug.$error) {
+      if (this.v$.slug.$error) {
         return this.$t('HELP_CENTER.CATEGORY.ADD.SLUG.ERROR');
       }
       return '';
@@ -147,8 +151,8 @@ export default {
         description,
         locale,
       };
-      this.$v.$touch();
+      this.v$.$touch();
-      if (this.$v.$invalid) {
+      if (this.v$.$invalid) {
         return;
       }
       try {

app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/EditCategory.vue

@@ -25,7 +25,7 @@
           :label="$t('HELP_CENTER.CATEGORY.EDIT.NAME.LABEL')"
           :placeholder="$t('HELP_CENTER.CATEGORY.EDIT.NAME.PLACEHOLDER')"
           :help-text="$t('HELP_CENTER.CATEGORY.EDIT.NAME.HELP_TEXT')"
-          :has-error="$v.name.$error"
+          :has-error="v$.name.$error"
           :error-message="$t('HELP_CENTER.CATEGORY.ADD.NAME.ERROR')"
           :existing-name="category.name"
           :saved-icon="category.icon"
@@ -34,13 +34,13 @@
         />
         <woot-input
           v-model.trim="slug"
-          :class="{ error: $v.slug.$error }"
+          :class="{ error: v$.slug.$error }"
           class="w-full"
           :error="slugError"
           :label="$t('HELP_CENTER.CATEGORY.EDIT.SLUG.LABEL')"
           :placeholder="$t('HELP_CENTER.CATEGORY.EDIT.SLUG.PLACEHOLDER')"
           :help-text="$t('HELP_CENTER.CATEGORY.EDIT.SLUG.HELP_TEXT')"
-          @input="$v.slug.$touch"
+          @input="v$.slug.$touch"
         />
         <label>
           {{ $t('HELP_CENTER.CATEGORY.EDIT.DESCRIPTION.LABEL') }}
@@ -69,8 +69,9 @@
 </template>
 
 <script>
+import { useVuelidate } from '@vuelidate/core';
 import { useAlert } from 'dashboard/composables';
-import { required, minLength } from 'vuelidate/lib/validators';
+import { required, minLength } from '@vuelidate/validators';
 import { convertToCategorySlug } from 'dashboard/helper/commons.js';
 import { PORTALS_EVENTS } from '../../../../../helper/AnalyticsHelper/events';
 import CategoryNameIconInput from './NameEmojiInput.vue';
@@ -99,6 +100,9 @@ export default {
       default: '',
     },
   },
+  setup() {
+    return { v$: useVuelidate() };
+  },
   data() {
     return {
       id: this.category.id,
@@ -119,7 +123,7 @@ export default {
   },
   computed: {
     slugError() {
-      if (this.$v.slug.$error) {
+      if (this.v$.slug.$error) {
         return this.$t('HELP_CENTER.CATEGORY.ADD.SLUG.ERROR');
       }
       return '';
@@ -158,8 +162,8 @@ export default {
         slug,
         description,
       };
-      this.$v.$touch();
+      this.v$.$touch();
-      if (this.$v.$invalid) {
+      if (this.v$.$invalid) {
         return;
       }
       try {

app/javascript/dashboard/routes/dashboard/settings/account/Index.vue

@@ -13,19 +13,19 @@
           <p>{{ $t('GENERAL_SETTINGS.FORM.GENERAL_SECTION.NOTE') }}</p>
         </div>
         <div class="p-4 flex-grow-0 flex-shrink-0 flex-[50%]">
-          <label :class="{ error: $v.name.$error }">
+          <label :class="{ error: v$.name.$error }">
             {{ $t('GENERAL_SETTINGS.FORM.NAME.LABEL') }}
             <input
               v-model="name"
               type="text"
               :placeholder="$t('GENERAL_SETTINGS.FORM.NAME.PLACEHOLDER')"
-              @blur="$v.name.$touch"
+              @blur="v$.name.$touch"
             />
-            <span v-if="$v.name.$error" class="message">
+            <span v-if="v$.name.$error" class="message">
               {{ $t('GENERAL_SETTINGS.FORM.NAME.ERROR') }}
             </span>
           </label>
-          <label :class="{ error: $v.locale.$error }">
+          <label :class="{ error: v$.locale.$error }">
             {{ $t('GENERAL_SETTINGS.FORM.LANGUAGE.LABEL') }}
             <select v-model="locale">
               <option
@@ -36,7 +36,7 @@
                 {{ lang.name }}
               </option>
             </select>
-            <span v-if="$v.locale.$error" class="message">
+            <span v-if="v$.locale.$error" class="message">
               {{ $t('GENERAL_SETTINGS.FORM.LANGUAGE.ERROR') }}
             </span>
           </label>
@@ -68,7 +68,7 @@
           </label>
           <label
             v-if="showAutoResolutionConfig"
-            :class="{ error: $v.autoResolveDuration.$error }"
+            :class="{ error: v$.autoResolveDuration.$error }"
           >
             {{ $t('GENERAL_SETTINGS.FORM.AUTO_RESOLVE_DURATION.LABEL') }}
             <input
@@ -77,9 +77,9 @@
               :placeholder="
                 $t('GENERAL_SETTINGS.FORM.AUTO_RESOLVE_DURATION.PLACEHOLDER')
               "
-              @blur="$v.autoResolveDuration.$touch"
+              @blur="v$.autoResolveDuration.$touch"
             />
-            <span v-if="$v.autoResolveDuration.$error" class="message">
+            <span v-if="v$.autoResolveDuration.$error" class="message">
               {{ $t('GENERAL_SETTINGS.FORM.AUTO_RESOLVE_DURATION.ERROR') }}
             </span>
           </label>
@@ -129,7 +129,8 @@
 </template>
 
 <script>
-import { required, minValue, maxValue } from 'vuelidate/lib/validators';
+import { useVuelidate } from '@vuelidate/core';
+import { required, minValue, maxValue } from '@vuelidate/validators';
 import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
 import { useUISettings } from 'dashboard/composables/useUISettings';
@@ -143,10 +144,9 @@ export default {
   mixins: [accountMixin, configMixin],
   setup() {
     const { updateUISettings } = useUISettings();
+    const v$ = useVuelidate();
 
-    return {
+    return { updateUISettings, v$ };
-      updateUISettings,
-    };
   },
   data() {
     return {
@@ -258,8 +258,8 @@ export default {
     },
 
     async updateAccount() {
-      this.$v.$touch();
+      this.v$.$touch();
-      if (this.$v.$invalid) {
+      if (this.v$.$invalid) {
         useAlert(this.$t('GENERAL_SETTINGS.FORM.ERROR'));
         return;
       }

app/javascript/dashboard/routes/dashboard/settings/agentBots/components/CSMLBotEditor.vue

@@ -5,7 +5,7 @@
         <div class="h-[calc(100vh-56px)] relative">
           <csml-monaco-editor v-model="bot.csmlContent" class="w-full h-full" />
           <div
-            v-if="$v.bot.csmlContent.$error"
+            v-if="v$.bot.csmlContent.$error"
             class="bg-red-100 dark:bg-red-200 text-white dark:text-white absolute bottom-0 w-full p-2.5 flex items-center text-xs justify-center flex-shrink-0"
           >
             <span>{{ $t('AGENT_BOTS.CSML_BOT_EDITOR.BOT_CONFIG.ERROR') }}</span>
@@ -18,14 +18,14 @@
           @submit.prevent="onSubmit"
         >
           <div>
-            <label :class="{ error: $v.bot.name.$error }">
+            <label :class="{ error: v$.bot.name.$error }">
               {{ $t('AGENT_BOTS.CSML_BOT_EDITOR.NAME.LABEL') }}
               <input
                 v-model="bot.name"
                 type="text"
                 :placeholder="$t('AGENT_BOTS.CSML_BOT_EDITOR.NAME.PLACEHOLDER')"
               />
-              <span v-if="$v.bot.name.$error" class="message">
+              <span v-if="v$.bot.name.$error" class="message">
                 {{ $t('AGENT_BOTS.CSML_BOT_EDITOR.NAME.ERROR') }}
               </span>
             </label>
@@ -50,7 +50,8 @@
 </template>
 
 <script>
-import { required } from 'vuelidate/lib/validators';
+import { useVuelidate } from '@vuelidate/core';
+import { required } from '@vuelidate/validators';
 import CsmlMonacoEditor from './CSMLMonacoEditor.vue';
 
 export default {
@@ -61,6 +62,9 @@ export default {
       default: () => {},
     },
   },
+  setup() {
+    return { v$: useVuelidate() };
+  },
   validations: {
     bot: {
       name: { required },
@@ -78,8 +82,8 @@ export default {
   },
   methods: {
     onSubmit() {
-      this.$v.$touch();
+      this.v$.$touch();
-      if (this.$v.$invalid) {
+      if (this.v$.$invalid) {
         return;
       }
       this.$emit('submit', {

app/javascript/dashboard/routes/dashboard/settings/agents/AddAgent.vue

@@ -11,37 +11,37 @@
         @submit.prevent="addAgent()"
       >
         <div class="w-full">
-          <label :class="{ error: $v.agentName.$error }">
+          <label :class="{ error: v$.agentName.$error }">
             {{ $t('AGENT_MGMT.ADD.FORM.NAME.LABEL') }}
             <input
               v-model.trim="agentName"
               type="text"
               :placeholder="$t('AGENT_MGMT.ADD.FORM.NAME.PLACEHOLDER')"
-              @input="$v.agentName.$touch"
+              @input="v$.agentName.$touch"
             />
           </label>
         </div>
         <div class="w-full">
-          <label :class="{ error: $v.agentType.$error }">
+          <label :class="{ error: v$.agentType.$error }">
             {{ $t('AGENT_MGMT.ADD.FORM.AGENT_TYPE.LABEL') }}
             <select v-model="agentType">
               <option v-for="role in roles" :key="role.name" :value="role.name">
                 {{ role.label }}
               </option>
             </select>
-            <span v-if="$v.agentType.$error" class="message">
+            <span v-if="v$.agentType.$error" class="message">
               {{ $t('AGENT_MGMT.ADD.FORM.AGENT_TYPE.ERROR') }}
             </span>
           </label>
         </div>
         <div class="w-full">
-          <label :class="{ error: $v.agentEmail.$error }">
+          <label :class="{ error: v$.agentEmail.$error }">
             {{ $t('AGENT_MGMT.ADD.FORM.EMAIL.LABEL') }}
             <input
               v-model.trim="agentEmail"
               type="text"
               :placeholder="$t('AGENT_MGMT.ADD.FORM.EMAIL.PLACEHOLDER')"
-              @input="$v.agentEmail.$touch"
+              @input="v$.agentEmail.$touch"
             />
           </label>
         </div>
@@ -49,8 +49,8 @@
           <div class="w-full">
             <woot-submit-button
               :disabled="
-                $v.agentEmail.$invalid ||
+                v$.agentEmail.$invalid ||
-                $v.agentName.$invalid ||
+                v$.agentName.$invalid ||
                 uiFlags.isCreating
               "
               :button-text="$t('AGENT_MGMT.ADD.FORM.SUBMIT')"
@@ -67,7 +67,8 @@
 </template>
 
 <script>
-import { required, minLength, email } from 'vuelidate/lib/validators';
+import { useVuelidate } from '@vuelidate/core';
+import { required, minLength, email } from '@vuelidate/validators';
 import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
 
@@ -78,6 +79,9 @@ export default {
       default: () => {},
     },
   },
+  setup() {
+    return { v$: useVuelidate() };
+  },
   data() {
     return {
       agentName: '',

app/javascript/dashboard/routes/dashboard/settings/agents/EditAgent.vue

@@ -4,33 +4,33 @@
       <woot-modal-header :header-title="pageTitle" />
       <form class="w-full" @submit.prevent="editAgent()">
         <div class="w-full">
-          <label :class="{ error: $v.agentName.$error }">
+          <label :class="{ error: v$.agentName.$error }">
             {{ $t('AGENT_MGMT.EDIT.FORM.NAME.LABEL') }}
             <input
               v-model.trim="agentName"
               type="text"
               :placeholder="$t('AGENT_MGMT.EDIT.FORM.NAME.PLACEHOLDER')"
-              @input="$v.agentName.$touch"
+              @input="v$.agentName.$touch"
             />
           </label>
         </div>
 
         <div class="w-full">
-          <label :class="{ error: $v.agentType.$error }">
+          <label :class="{ error: v$.agentType.$error }">
             {{ $t('AGENT_MGMT.EDIT.FORM.AGENT_TYPE.LABEL') }}
             <select v-model="agentType">
               <option v-for="role in roles" :key="role.name" :value="role.name">
                 {{ role.label }}
               </option>
             </select>
-            <span v-if="$v.agentType.$error" class="message">
+            <span v-if="v$.agentType.$error" class="message">
               {{ $t('AGENT_MGMT.EDIT.FORM.AGENT_TYPE.ERROR') }}
             </span>
           </label>
         </div>
 
         <div class="w-full">
-          <label :class="{ error: $v.agentAvailability.$error }">
+          <label :class="{ error: v$.agentAvailability.$error }">
             {{ $t('PROFILE_SETTINGS.FORM.AVAILABILITY.LABEL') }}
             <select v-model="agentAvailability">
               <option
@@ -41,7 +41,7 @@
                 {{ role.label }}
               </option>
             </select>
-            <span v-if="$v.agentAvailability.$error" class="message">
+            <span v-if="v$.agentAvailability.$error" class="message">
               {{ $t('AGENT_MGMT.EDIT.FORM.AGENT_AVAILABILITY.ERROR') }}
             </span>
           </label>
@@ -50,8 +50,8 @@
           <div class="w-[50%]">
             <woot-submit-button
               :disabled="
-                $v.agentType.$invalid ||
+                v$.agentType.$invalid ||
-                $v.agentName.$invalid ||
+                v$.agentName.$invalid ||
                 uiFlags.isUpdating
               "
               :button-text="$t('AGENT_MGMT.EDIT.FORM.SUBMIT')"
@@ -77,7 +77,8 @@
 </template>
 
 <script>
-import { required, minLength } from 'vuelidate/lib/validators';
+import { useVuelidate } from '@vuelidate/core';
+import { required, minLength } from '@vuelidate/validators';
 import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
 import WootSubmitButton from '../../../../components/buttons/FormSubmitButton.vue';
@@ -118,6 +119,9 @@ export default {
       required: true,
     },
   },
+  setup() {
+    return { v$: useVuelidate() };
+  },
   data() {
     return {
       roles: [

app/javascript/dashboard/routes/dashboard/settings/attributes/AddAttribute.vue

@@ -5,14 +5,14 @@
 
       <form class="flex w-full" @submit.prevent="addAttributes">
         <div class="w-full">
-          <label :class="{ error: $v.attributeModel.$error }">
+          <label :class="{ error: v$.attributeModel.$error }">
             {{ $t('ATTRIBUTES_MGMT.ADD.FORM.MODEL.LABEL') }}
             <select v-model="attributeModel">
               <option v-for="model in models" :key="model.id" :value="model.id">
                 {{ model.option }}
               </option>
             </select>
-            <span v-if="$v.attributeModel.$error" class="message">
+            <span v-if="v$.attributeModel.$error" class="message">
               {{ $t('ATTRIBUTES_MGMT.ADD.FORM.MODEL.ERROR') }}
             </span>
           </label>
@@ -20,46 +20,46 @@
             v-model="displayName"
             :label="$t('ATTRIBUTES_MGMT.ADD.FORM.NAME.LABEL')"
             type="text"
-            :class="{ error: $v.displayName.$error }"
+            :class="{ error: v$.displayName.$error }"
             :error="
-              $v.displayName.$error
+              v$.displayName.$error
                 ? $t('ATTRIBUTES_MGMT.ADD.FORM.NAME.ERROR')
                 : ''
             "
             :placeholder="$t('ATTRIBUTES_MGMT.ADD.FORM.NAME.PLACEHOLDER')"
             @input="onDisplayNameChange"
-            @blur="$v.displayName.$touch"
+            @blur="v$.displayName.$touch"
           />
           <woot-input
             v-model="attributeKey"
             :label="$t('ATTRIBUTES_MGMT.ADD.FORM.KEY.LABEL')"
             type="text"
-            :class="{ error: $v.attributeKey.$error }"
+            :class="{ error: v$.attributeKey.$error }"
-            :error="$v.attributeKey.$error ? keyErrorMessage : ''"
+            :error="v$.attributeKey.$error ? keyErrorMessage : ''"
             :placeholder="$t('ATTRIBUTES_MGMT.ADD.FORM.KEY.PLACEHOLDER')"
-            @blur="$v.attributeKey.$touch"
+            @blur="v$.attributeKey.$touch"
           />
-          <label :class="{ error: $v.description.$error }">
+          <label :class="{ error: v$.description.$error }">
             {{ $t('ATTRIBUTES_MGMT.ADD.FORM.DESC.LABEL') }}
             <textarea
               v-model="description"
               rows="3"
               type="text"
               :placeholder="$t('ATTRIBUTES_MGMT.ADD.FORM.DESC.PLACEHOLDER')"
-              @blur="$v.description.$touch"
+              @blur="v$.description.$touch"
             />
-            <span v-if="$v.description.$error" class="message">
+            <span v-if="v$.description.$error" class="message">
               {{ $t('ATTRIBUTES_MGMT.ADD.FORM.DESC.ERROR') }}
             </span>
           </label>
-          <label :class="{ error: $v.attributeType.$error }">
+          <label :class="{ error: v$.attributeType.$error }">
             {{ $t('ATTRIBUTES_MGMT.ADD.FORM.TYPE.LABEL') }}
             <select v-model="attributeType">
               <option v-for="type in types" :key="type.id" :value="type.id">
                 {{ type.option }}
               </option>
             </select>
-            <span v-if="$v.attributeType.$error" class="message">
+            <span v-if="v$.attributeType.$error" class="message">
               {{ $t('ATTRIBUTES_MGMT.ADD.FORM.TYPE.ERROR') }}
             </span>
           </label>
@@ -126,7 +126,8 @@
 </template>
 
 <script>
-import { required, minLength } from 'vuelidate/lib/validators';
+import { useVuelidate } from '@vuelidate/core';
+import { required, minLength } from '@vuelidate/validators';
 import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
 import { convertToAttributeSlug } from 'dashboard/helper/commons.js';
@@ -139,7 +140,9 @@ export default {
       default: () => {},
     },
   },
-
+  setup() {
+    return { v$: useVuelidate() };
+  },
   data() {
     return {
       displayName: '',
@@ -174,14 +177,14 @@ export default {
     },
     isButtonDisabled() {
       return (
-        this.$v.displayName.$invalid ||
+        this.v$.displayName.$invalid ||
-        this.$v.description.$invalid ||
+        this.v$.description.$invalid ||
         this.uiFlags.isCreating ||
         this.isTagInputInvalid
       );
     },
     keyErrorMessage() {
-      if (!this.$v.attributeKey.isKey) {
+      if (!this.v$.attributeKey.isKey) {
         return this.$t('ATTRIBUTES_MGMT.ADD.FORM.KEY.IN_VALID');
       }
       return this.$t('ATTRIBUTES_MGMT.ADD.FORM.KEY.ERROR');
@@ -237,8 +240,8 @@ export default {
       this.regexEnabled = !this.regexEnabled;
     },
     async addAttributes() {
-      this.$v.$touch();
+      this.v$.$touch();
-      if (this.$v.$invalid) {
+      if (this.v$.$invalid) {
         return;
       }
       if (!this.regexEnabled) {

app/javascript/dashboard/routes/dashboard/settings/attributes/EditAttribute.vue

@@ -7,46 +7,46 @@
           v-model.trim="displayName"
           :label="$t('ATTRIBUTES_MGMT.ADD.FORM.NAME.LABEL')"
           type="text"
-          :class="{ error: $v.displayName.$error }"
+          :class="{ error: v$.displayName.$error }"
           :error="
-            $v.displayName.$error
+            v$.displayName.$error
               ? $t('ATTRIBUTES_MGMT.ADD.FORM.NAME.ERROR')
               : ''
           "
           :placeholder="$t('ATTRIBUTES_MGMT.ADD.FORM.NAME.PLACEHOLDER')"
-          @blur="$v.displayName.$touch"
+          @blur="v$.displayName.$touch"
         />
         <woot-input
           v-model.trim="attributeKey"
           :label="$t('ATTRIBUTES_MGMT.ADD.FORM.KEY.LABEL')"
           type="text"
-          :class="{ error: $v.attributeKey.$error }"
+          :class="{ error: v$.attributeKey.$error }"
-          :error="$v.attributeKey.$error ? keyErrorMessage : ''"
+          :error="v$.attributeKey.$error ? keyErrorMessage : ''"
           :placeholder="$t('ATTRIBUTES_MGMT.ADD.FORM.KEY.PLACEHOLDER')"
           readonly
-          @blur="$v.attributeKey.$touch"
+          @blur="v$.attributeKey.$touch"
         />
-        <label :class="{ error: $v.description.$error }">
+        <label :class="{ error: v$.description.$error }">
           {{ $t('ATTRIBUTES_MGMT.ADD.FORM.DESC.LABEL') }}
           <textarea
             v-model.trim="description"
             rows="5"
             type="text"
             :placeholder="$t('ATTRIBUTES_MGMT.ADD.FORM.DESC.PLACEHOLDER')"
-            @blur="$v.description.$touch"
+            @blur="v$.description.$touch"
           />
-          <span v-if="$v.description.$error" class="message">
+          <span v-if="v$.description.$error" class="message">
             {{ $t('ATTRIBUTES_MGMT.ADD.FORM.DESC.ERROR') }}
           </span>
         </label>
-        <label :class="{ error: $v.attributeType.$error }">
+        <label :class="{ error: v$.attributeType.$error }">
           {{ $t('ATTRIBUTES_MGMT.ADD.FORM.TYPE.LABEL') }}
           <select v-model="attributeType" disabled>
             <option v-for="type in types" :key="type.id" :value="type.id">
               {{ type.option }}
             </option>
           </select>
-          <span v-if="$v.attributeType.$error" class="message">
+          <span v-if="v$.attributeType.$error" class="message">
             {{ $t('ATTRIBUTES_MGMT.ADD.FORM.TYPE.ERROR') }}
           </span>
         </label>
@@ -109,8 +109,9 @@
 
 <script>
 import { mapGetters } from 'vuex';
+import { useVuelidate } from '@vuelidate/core';
 import { useAlert } from 'dashboard/composables';
-import { required, minLength } from 'vuelidate/lib/validators';
+import { required, minLength } from '@vuelidate/validators';
 import { ATTRIBUTE_TYPES } from './constants';
 import customAttributeMixin from '../../../../mixins/customAttributeMixin';
 export default {
@@ -126,6 +127,9 @@ export default {
       default: false,
     },
   },
+  setup() {
+    return { v$: useVuelidate() };
+  },
   data() {
     return {
       displayName: '',
@@ -173,7 +177,7 @@ export default {
       return this.values.map(item => item.name);
     },
     isButtonDisabled() {
-      return this.$v.description.$invalid || this.isMultiselectInvalid;
+      return this.v$.description.$invalid || this.isMultiselectInvalid;
     },
     isMultiselectInvalid() {
       return (
@@ -194,7 +198,7 @@ export default {
       ).id;
     },
     keyErrorMessage() {
-      if (!this.$v.attributeKey.isKey) {
+      if (!this.v$.attributeKey.isKey) {
         return this.$t('ATTRIBUTES_MGMT.ADD.FORM.KEY.IN_VALID');
       }
       return this.$t('ATTRIBUTES_MGMT.ADD.FORM.KEY.ERROR');
@@ -237,8 +241,8 @@ export default {
       this.values = this.setAttributeListValue;
     },
     async editAttributes() {
-      this.$v.$touch();
+      this.v$.$touch();
-      if (this.$v.$invalid) {
+      if (this.v$.$invalid) {
         return;
       }
       if (!this.regexEnabled) {

app/javascript/dashboard/routes/dashboard/settings/automation/AddAutomationRule.vue

@@ -7,32 +7,28 @@
           v-model="automation.name"
           :label="$t('AUTOMATION.ADD.FORM.NAME.LABEL')"
           type="text"
-          :class="{ error: $v.automation.name.$error }"
+          :class="{ error: errors.name }"
-          :error="
+          :error="errors.name ? $t('AUTOMATION.ADD.FORM.NAME.ERROR') : ''"
-            $v.automation.name.$error
-              ? $t('AUTOMATION.ADD.FORM.NAME.ERROR')
-              : ''
-          "
           :placeholder="$t('AUTOMATION.ADD.FORM.NAME.PLACEHOLDER')"
-          @blur="$v.automation.name.$touch"
         />
         <woot-input
           v-model="automation.description"
           :label="$t('AUTOMATION.ADD.FORM.DESC.LABEL')"
           type="text"
-          :class="{ error: $v.automation.description.$error }"
+          :class="{ error: errors.description }"
           :error="
-            $v.automation.description.$error
+            errors.description ? $t('AUTOMATION.ADD.FORM.DESC.ERROR') : ''
-              ? $t('AUTOMATION.ADD.FORM.DESC.ERROR')
-              : ''
           "
           :placeholder="$t('AUTOMATION.ADD.FORM.DESC.PLACEHOLDER')"
-          @blur="$v.automation.description.$touch"
         />
-        <div class="event_wrapper">
+        <div class="mb-6">
-          <label :class="{ error: $v.automation.event_name.$error }">
+          <label :class="{ error: errors.event_name }">
             {{ $t('AUTOMATION.ADD.FORM.EVENT.LABEL') }}
-            <select v-model="automation.event_name" @change="onEventChange()">
+            <select
+              v-model="automation.event_name"
+              class="m-0"
+              @change="onEventChange()"
+            >
               <option
                 v-for="event in automationRuleEvents"
                 :key="event.key"
@@ -41,11 +37,14 @@
                 {{ event.value }}
               </option>
             </select>
-            <span v-if="$v.automation.event_name.$error" class="message">
+            <span v-if="errors.event_name" class="message">
               {{ $t('AUTOMATION.ADD.FORM.EVENT.ERROR') }}
             </span>
           </label>
-          <p v-if="hasAutomationMutated" class="info-message">
+          <p
+            v-if="hasAutomationMutated"
+            class="text-xs text-green-500 dark:text-green-500 text-right"
+          >
             {{ $t('AUTOMATION.FORM.RESET_MESSAGE') }}
           </p>
         </div>
@@ -73,7 +72,11 @@
               :custom-attribute-type="
                 getCustomAttributeType(automation.conditions[i].attribute_key)
               "
-              :v="$v.automation.conditions.$each[i]"
+              :error-message="
+                errors[`condition_${i}`]
+                  ? $t(`AUTOMATION.ERRORS.${errors[`condition_${i}`]}`)
+                  : ''
+              "
               @resetFilter="resetFilter(i, automation.conditions[i])"
               @removeFilter="removeFilter(i)"
             />
@@ -110,7 +113,11 @@
               :show-action-input="
                 showActionInput(automation.actions[i].action_name)
               "
-              :v="$v.automation.actions.$each[i]"
+              :error-message="
+                errors[`action_${i}`]
+                  ? $t(`AUTOMATION.ERRORS.${errors[`action_${i}`]}`)
+                  : ''
+              "
               @resetAction="resetAction(i)"
               @removeAction="removeAction(i)"
             />
@@ -146,9 +153,9 @@
 <script>
 import { mapGetters } from 'vuex';
 import automationMethodsMixin from 'dashboard/mixins/automations/methodsMixin';
-import automationValidationsMixin from 'dashboard/mixins/automations/validationsMixin';
 import filterInputBox from 'dashboard/components/widgets/FilterInput/Index.vue';
 import automationActionInput from 'dashboard/components/widgets/AutomationActionInput.vue';
+// import { useVuelidate } from '@vuelidate/core';
 
 import {
   AUTOMATION_RULE_EVENTS,
@@ -160,14 +167,13 @@ export default {
     filterInputBox,
     automationActionInput,
   },
-  mixins: [automationMethodsMixin, automationValidationsMixin],
+  mixins: [automationMethodsMixin],
   props: {
     onClose: {
       type: Function,
       default: () => {},
     },
   },
-
   data() {
     return {
       automationTypes: JSON.parse(JSON.stringify(AUTOMATIONS)),
@@ -198,6 +204,7 @@ export default {
       showDeleteConfirmationModal: false,
       allCustomAttributes: [],
       mode: 'create',
+      errors: {},
     };
   },
   computed: {
@@ -237,15 +244,3 @@ export default {
   },
 };
 </script>
-<style lang="scss" scoped>
-.event_wrapper {
-  select {
-    @apply m-0;
-  }
-  .info-message {
-    @apply text-xs text-green-500 dark:text-green-500 text-right;
-  }
-
-  @apply mb-6;
-}
-</style>

app/javascript/dashboard/routes/dashboard/settings/automation/EditAutomationRule.vue

@@ -7,30 +7,22 @@
           v-model="automation.name"
           :label="$t('AUTOMATION.ADD.FORM.NAME.LABEL')"
           type="text"
-          :class="{ error: $v.automation.name.$error }"
+          :class="{ error: errors.name }"
-          :error="
+          :error="errors.name ? $t('AUTOMATION.ADD.FORM.NAME.ERROR') : ''"
-            $v.automation.name.$error
-              ? $t('AUTOMATION.ADD.FORM.NAME.ERROR')
-              : ''
-          "
           :placeholder="$t('AUTOMATION.ADD.FORM.NAME.PLACEHOLDER')"
-          @blur="$v.automation.name.$touch"
         />
         <woot-input
           v-model="automation.description"
           :label="$t('AUTOMATION.ADD.FORM.DESC.LABEL')"
           type="text"
-          :class="{ error: $v.automation.description.$error }"
+          :class="{ error: errors.description }"
           :error="
-            $v.automation.description.$error
+            errors.description ? $t('AUTOMATION.ADD.FORM.DESC.ERROR') : ''
-              ? $t('AUTOMATION.ADD.FORM.DESC.ERROR')
-              : ''
           "
           :placeholder="$t('AUTOMATION.ADD.FORM.DESC.PLACEHOLDER')"
-          @blur="$v.automation.description.$touch"
         />
         <div class="event_wrapper">
-          <label :class="{ error: $v.automation.event_name.$error }">
+          <label :class="{ error: errors.event_name }">
             {{ $t('AUTOMATION.ADD.FORM.EVENT.LABEL') }}
             <select v-model="automation.event_name" @change="onEventChange()">
               <option
@@ -41,7 +33,7 @@
                 {{ event.value }}
               </option>
             </select>
-            <span v-if="$v.automation.event_name.$error" class="message">
+            <span v-if="errors.event_name" class="message">
               {{ $t('AUTOMATION.ADD.FORM.EVENT.ERROR') }}
             </span>
           </label>
@@ -70,7 +62,11 @@
                 getCustomAttributeType(automation.conditions[i].attribute_key)
               "
               :show-query-operator="i !== automation.conditions.length - 1"
-              :v="$v.automation.conditions.$each[i]"
+              :error-message="
+                errors[`condition_${i}`]
+                  ? $t(`AUTOMATION.ERRORS.${errors[`condition_${i}`]}`)
+                  : ''
+              "
               @resetFilter="resetFilter(i, automation.conditions[i])"
               @removeFilter="removeFilter(i)"
             />
@@ -103,7 +99,11 @@
               :action-types="automationActionTypes"
               :dropdown-values="getActionDropdownValues(action.action_name)"
               :show-action-input="showActionInput(action.action_name)"
-              :v="$v.automation.actions.$each[i]"
+              :error-message="
+                errors[`action_${i}`]
+                  ? $t(`AUTOMATION.ERRORS.${errors[`action_${i}`]}`)
+                  : ''
+              "
               :initial-file-name="getFileName(action, automation.files)"
               @resetAction="resetAction(i)"
               @removeAction="removeAction(i)"
@@ -144,7 +144,6 @@
 <script>
 import { mapGetters } from 'vuex';
 import automationMethodsMixin from 'dashboard/mixins/automations/methodsMixin';
-import automationValidationsMixin from 'dashboard/mixins/automations/validationsMixin';
 import filterInputBox from 'dashboard/components/widgets/FilterInput/Index.vue';
 import automationActionInput from 'dashboard/components/widgets/AutomationActionInput.vue';
 
@@ -159,7 +158,7 @@ export default {
     filterInputBox,
     automationActionInput,
   },
-  mixins: [automationMethodsMixin, automationValidationsMixin],
+  mixins: [automationMethodsMixin],
   props: {
     onClose: {
       type: Function,
@@ -181,6 +180,7 @@ export default {
       showDeleteConfirmationModal: false,
       allCustomAttributes: [],
       mode: 'edit',
+      errors: {},
     };
   },
   computed: {

app/javascript/dashboard/routes/dashboard/settings/campaigns/AddCampaign.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="h-auto overflow-auto flex flex-col">
+  <div class="flex flex-col h-auto overflow-auto">
     <woot-modal-header
       :header-title="$t('CAMPAIGN.ADD.TITLE')"
       :header-content="$t('CAMPAIGN.ADD.DESC')"
@@ -10,10 +10,10 @@
           v-model="title"
           :label="$t('CAMPAIGN.ADD.FORM.TITLE.LABEL')"
           type="text"
-          :class="{ error: $v.title.$error }"
+          :class="{ error: v$.title.$error }"
-          :error="$v.title.$error ? $t('CAMPAIGN.ADD.FORM.TITLE.ERROR') : ''"
+          :error="v$.title.$error ? $t('CAMPAIGN.ADD.FORM.TITLE.ERROR') : ''"
           :placeholder="$t('CAMPAIGN.ADD.FORM.TITLE.PLACEHOLDER')"
-          @blur="$v.title.$touch"
+          @blur="v$.title.$touch"
         />
 
         <div v-if="isOngoingType" class="editor-wrap">
@@ -24,38 +24,38 @@
             <woot-message-editor
               v-model="message"
               class="message-editor"
-              :class="{ editor_warning: $v.message.$error }"
+              :class="{ editor_warning: v$.message.$error }"
               :placeholder="$t('CAMPAIGN.ADD.FORM.MESSAGE.PLACEHOLDER')"
-              @blur="$v.message.$touch"
+              @blur="v$.message.$touch"
             />
-            <span v-if="$v.message.$error" class="editor-warning__message">
+            <span v-if="v$.message.$error" class="editor-warning__message">
               {{ $t('CAMPAIGN.ADD.FORM.MESSAGE.ERROR') }}
             </span>
           </div>
         </div>
 
-        <label v-else :class="{ error: $v.message.$error }">
+        <label v-else :class="{ error: v$.message.$error }">
           {{ $t('CAMPAIGN.ADD.FORM.MESSAGE.LABEL') }}
           <textarea
             v-model="message"
             rows="5"
             type="text"
             :placeholder="$t('CAMPAIGN.ADD.FORM.MESSAGE.PLACEHOLDER')"
-            @blur="$v.message.$touch"
+            @blur="v$.message.$touch"
           />
-          <span v-if="$v.message.$error" class="message">
+          <span v-if="v$.message.$error" class="message">
             {{ $t('CAMPAIGN.ADD.FORM.MESSAGE.ERROR') }}
           </span>
         </label>
 
-        <label :class="{ error: $v.selectedInbox.$error }">
+        <label :class="{ error: v$.selectedInbox.$error }">
           {{ $t('CAMPAIGN.ADD.FORM.INBOX.LABEL') }}
           <select v-model="selectedInbox" @change="onChangeInbox($event)">
             <option v-for="item in inboxes" :key="item.name" :value="item.id">
               {{ item.name }}
             </option>
           </select>
-          <span v-if="$v.selectedInbox.$error" class="message">
+          <span v-if="v$.selectedInbox.$error" class="message">
             {{ $t('CAMPAIGN.ADD.FORM.INBOX.ERROR') }}
           </span>
         </label>
@@ -63,7 +63,7 @@
         <label
           v-if="isOneOffType"
           class="multiselect-wrap--small"
-          :class="{ error: $v.selectedAudience.$error }"
+          :class="{ error: v$.selectedAudience.$error }"
         >
           {{ $t('CAMPAIGN.ADD.FORM.AUDIENCE.LABEL') }}
           <multiselect
@@ -79,17 +79,17 @@
             selected-label
             :select-label="$t('FORMS.MULTISELECT.ENTER_TO_SELECT')"
             :deselect-label="$t('FORMS.MULTISELECT.ENTER_TO_REMOVE')"
-            @blur="$v.selectedAudience.$touch"
+            @blur="v$.selectedAudience.$touch"
-            @select="$v.selectedAudience.$touch"
+            @select="v$.selectedAudience.$touch"
           />
-          <span v-if="$v.selectedAudience.$error" class="message">
+          <span v-if="v$.selectedAudience.$error" class="message">
             {{ $t('CAMPAIGN.ADD.FORM.AUDIENCE.ERROR') }}
           </span>
         </label>
 
         <label
           v-if="isOngoingType"
-          :class="{ error: $v.selectedSender.$error }"
+          :class="{ error: v$.selectedSender.$error }"
         >
           {{ $t('CAMPAIGN.ADD.FORM.SENT_BY.LABEL') }}
           <select v-model="selectedSender">
@@ -101,7 +101,7 @@
               {{ sender.name }}
             </option>
           </select>
-          <span v-if="$v.selectedSender.$error" class="message">
+          <span v-if="v$.selectedSender.$error" class="message">
             {{ $t('CAMPAIGN.ADD.FORM.SENT_BY.ERROR') }}
           </span>
         </label>
@@ -121,26 +121,26 @@
           v-model="endPoint"
           :label="$t('CAMPAIGN.ADD.FORM.END_POINT.LABEL')"
           type="text"
-          :class="{ error: $v.endPoint.$error }"
+          :class="{ error: v$.endPoint.$error }"
           :error="
-            $v.endPoint.$error ? $t('CAMPAIGN.ADD.FORM.END_POINT.ERROR') : ''
+            v$.endPoint.$error ? $t('CAMPAIGN.ADD.FORM.END_POINT.ERROR') : ''
           "
           :placeholder="$t('CAMPAIGN.ADD.FORM.END_POINT.PLACEHOLDER')"
-          @blur="$v.endPoint.$touch"
+          @blur="v$.endPoint.$touch"
         />
         <woot-input
           v-if="isOngoingType"
           v-model="timeOnPage"
           :label="$t('CAMPAIGN.ADD.FORM.TIME_ON_PAGE.LABEL')"
           type="text"
-          :class="{ error: $v.timeOnPage.$error }"
+          :class="{ error: v$.timeOnPage.$error }"
           :error="
-            $v.timeOnPage.$error
+            v$.timeOnPage.$error
               ? $t('CAMPAIGN.ADD.FORM.TIME_ON_PAGE.ERROR')
               : ''
           "
           :placeholder="$t('CAMPAIGN.ADD.FORM.TIME_ON_PAGE.PLACEHOLDER')"
-          @blur="$v.timeOnPage.$touch"
+          @blur="v$.timeOnPage.$touch"
         />
         <label v-if="isOngoingType">
           <input
@@ -162,7 +162,7 @@
         </label>
       </div>
 
-      <div class="flex flex-row justify-end gap-2 py-2 px-0 w-full">
+      <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
         <woot-button :is-loading="uiFlags.isCreating">
           {{ $t('CAMPAIGN.ADD.CREATE_BUTTON_TEXT') }}
         </woot-button>
@@ -176,7 +176,8 @@
 
 <script>
 import { mapGetters } from 'vuex';
-import { required } from 'vuelidate/lib/validators';
+import { useVuelidate } from '@vuelidate/core';
+import { required } from '@vuelidate/validators';
 import { useAlert } from 'dashboard/composables';
 import WootMessageEditor from 'dashboard/components/widgets/WootWriter/Editor.vue';
 import campaignMixin from 'shared/mixins/campaignMixin';
@@ -189,8 +190,10 @@ export default {
     WootDateTimePicker,
     WootMessageEditor,
   },
-
   mixins: [campaignMixin],
+  setup() {
+    return { v$: useVuelidate() };
+  },
   data() {
     return {
       title: '',
@@ -343,8 +346,8 @@ export default {
       return campaignDetails;
     },
     async addCampaign() {
-      this.$v.$touch();
+      this.v$.$touch();
-      if (this.$v.$invalid) {
+      if (this.v$.$invalid) {
         return;
       }
       try {

app/javascript/dashboard/routes/dashboard/settings/campaigns/EditCampaign.vue

@@ -7,10 +7,10 @@
           v-model="title"
           :label="$t('CAMPAIGN.ADD.FORM.TITLE.LABEL')"
           type="text"
-          :class="{ error: $v.title.$error }"
+          :class="{ error: v$.title.$error }"
-          :error="$v.title.$error ? $t('CAMPAIGN.ADD.FORM.TITLE.ERROR') : ''"
+          :error="v$.title.$error ? $t('CAMPAIGN.ADD.FORM.TITLE.ERROR') : ''"
           :placeholder="$t('CAMPAIGN.ADD.FORM.TITLE.PLACEHOLDER')"
-          @blur="$v.title.$touch"
+          @blur="v$.title.$touch"
         />
         <div class="editor-wrap">
           <label>
@@ -20,28 +20,28 @@
             v-model="message"
             class="message-editor"
             :is-format-mode="true"
-            :class="{ editor_warning: $v.message.$error }"
+            :class="{ editor_warning: v$.message.$error }"
             :placeholder="$t('CAMPAIGN.ADD.FORM.MESSAGE.PLACEHOLDER')"
-            @input="$v.message.$touch"
+            @input="v$.message.$touch"
           />
-          <span v-if="$v.message.$error" class="editor-warning__message">
+          <span v-if="v$.message.$error" class="editor-warning__message">
             {{ $t('CAMPAIGN.ADD.FORM.MESSAGE.ERROR') }}
           </span>
         </div>
 
-        <label :class="{ error: $v.selectedInbox.$error }">
+        <label :class="{ error: v$.selectedInbox.$error }">
           {{ $t('CAMPAIGN.ADD.FORM.INBOX.LABEL') }}
           <select v-model="selectedInbox" @change="onChangeInbox($event)">
             <option v-for="item in inboxes" :key="item.id" :value="item.id">
               {{ item.name }}
             </option>
           </select>
-          <span v-if="$v.selectedInbox.$error" class="message">
+          <span v-if="v$.selectedInbox.$error" class="message">
             {{ $t('CAMPAIGN.ADD.FORM.INBOX.ERROR') }}
           </span>
         </label>
 
-        <label :class="{ error: $v.selectedSender.$error }">
+        <label :class="{ error: v$.selectedSender.$error }">
           {{ $t('CAMPAIGN.ADD.FORM.SENT_BY.LABEL') }}
           <select v-model="selectedSender">
             <option
@@ -52,7 +52,7 @@
               {{ sender.name }}
             </option>
           </select>
-          <span v-if="$v.selectedSender.$error" class="message">
+          <span v-if="v$.selectedSender.$error" class="message">
             {{ $t('CAMPAIGN.ADD.FORM.SENT_BY.ERROR') }}
           </span>
         </label>
@@ -60,25 +60,25 @@
           v-model="endPoint"
           :label="$t('CAMPAIGN.ADD.FORM.END_POINT.LABEL')"
           type="text"
-          :class="{ error: $v.endPoint.$error }"
+          :class="{ error: v$.endPoint.$error }"
           :error="
-            $v.endPoint.$error ? $t('CAMPAIGN.ADD.FORM.END_POINT.ERROR') : ''
+            v$.endPoint.$error ? $t('CAMPAIGN.ADD.FORM.END_POINT.ERROR') : ''
           "
           :placeholder="$t('CAMPAIGN.ADD.FORM.END_POINT.PLACEHOLDER')"
-          @blur="$v.endPoint.$touch"
+          @blur="v$.endPoint.$touch"
         />
         <woot-input
           v-model="timeOnPage"
           :label="$t('CAMPAIGN.ADD.FORM.TIME_ON_PAGE.LABEL')"
           type="text"
-          :class="{ error: $v.timeOnPage.$error }"
+          :class="{ error: v$.timeOnPage.$error }"
           :error="
-            $v.timeOnPage.$error
+            v$.timeOnPage.$error
               ? $t('CAMPAIGN.ADD.FORM.TIME_ON_PAGE.ERROR')
               : ''
           "
           :placeholder="$t('CAMPAIGN.ADD.FORM.TIME_ON_PAGE.PLACEHOLDER')"
-          @blur="$v.timeOnPage.$touch"
+          @blur="v$.timeOnPage.$touch"
         />
         <label>
           <input
@@ -113,7 +113,8 @@
 
 <script>
 import { mapGetters } from 'vuex';
-import { required } from 'vuelidate/lib/validators';
+import { useVuelidate } from '@vuelidate/core';
+import { required } from '@vuelidate/validators';
 import { useAlert } from 'dashboard/composables';
 import WootMessageEditor from 'dashboard/components/widgets/WootWriter/Editor.vue';
 import campaignMixin from 'shared/mixins/campaignMixin';
@@ -130,6 +131,9 @@ export default {
       default: () => {},
     },
   },
+  setup() {
+    return { v$: useVuelidate() };
+  },
   data() {
     return {
       title: '',
@@ -252,8 +256,8 @@ export default {
       this.loadInboxMembers();
     },
     async editCampaign() {
-      this.$v.$touch();
+      this.v$.$touch();
-      if (this.$v.$invalid) {
+      if (this.v$.$invalid) {
         return;
       }
       try {

app/javascript/dashboard/routes/dashboard/settings/canned/AddCanned.vue

@@ -7,38 +7,38 @@
       />
       <form class="flex flex-col w-full" @submit.prevent="addCannedResponse()">
         <div class="w-full">
-          <label :class="{ error: $v.shortCode.$error }">
+          <label :class="{ error: v$.shortCode.$error }">
             {{ $t('CANNED_MGMT.ADD.FORM.SHORT_CODE.LABEL') }}
             <input
               v-model.trim="shortCode"
               type="text"
               :placeholder="$t('CANNED_MGMT.ADD.FORM.SHORT_CODE.PLACEHOLDER')"
-              @input="$v.shortCode.$touch"
+              @input="v$.shortCode.$touch"
             />
           </label>
         </div>
 
         <div class="w-full">
-          <label :class="{ error: $v.content.$error }">
+          <label :class="{ error: v$.content.$error }">
             {{ $t('CANNED_MGMT.ADD.FORM.CONTENT.LABEL') }}
           </label>
           <div class="editor-wrap">
             <woot-message-editor
               v-model="content"
               class="message-editor [&>div]:px-1"
-              :class="{ editor_warning: $v.content.$error }"
+              :class="{ editor_warning: v$.content.$error }"
               :enable-variables="true"
               :enable-canned-responses="false"
               :placeholder="$t('CANNED_MGMT.ADD.FORM.CONTENT.PLACEHOLDER')"
-              @blur="$v.content.$touch"
+              @blur="v$.content.$touch"
             />
           </div>
         </div>
         <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
           <woot-submit-button
             :disabled="
-              $v.content.$invalid ||
+              v$.content.$invalid ||
-              $v.shortCode.$invalid ||
+              v$.shortCode.$invalid ||
               addCanned.showLoading
             "
             :button-text="$t('CANNED_MGMT.ADD.FORM.SUBMIT')"
@@ -54,7 +54,8 @@
 </template>
 
 <script>
-import { required, minLength } from 'vuelidate/lib/validators';
+import { useVuelidate } from '@vuelidate/core';
+import { required, minLength } from '@vuelidate/validators';
 import { useAlert } from 'dashboard/composables';
 
 import WootSubmitButton from '../../../../components/buttons/FormSubmitButton.vue';
@@ -77,6 +78,9 @@ export default {
       default: () => {},
     },
   },
+  setup() {
+    return { v$: useVuelidate() };
+  },
   data() {
     return {
       shortCode: '',
@@ -101,8 +105,8 @@ export default {
     resetForm() {
       this.shortCode = '';
       this.content = '';
-      this.$v.shortCode.$reset();
+      this.v$.shortCode.$reset();
-      this.$v.content.$reset();
+      this.v$.content.$reset();
     },
     addCannedResponse() {
       // Show loading on button

app/javascript/dashboard/routes/dashboard/settings/canned/EditCanned.vue

@@ -4,38 +4,38 @@
       <woot-modal-header :header-title="pageTitle" />
       <form class="flex flex-col w-full" @submit.prevent="editCannedResponse()">
         <div class="w-full">
-          <label :class="{ error: $v.shortCode.$error }">
+          <label :class="{ error: v$.shortCode.$error }">
             {{ $t('CANNED_MGMT.EDIT.FORM.SHORT_CODE.LABEL') }}
             <input
               v-model.trim="shortCode"
               type="text"
               :placeholder="$t('CANNED_MGMT.EDIT.FORM.SHORT_CODE.PLACEHOLDER')"
-              @input="$v.shortCode.$touch"
+              @input="v$.shortCode.$touch"
             />
           </label>
         </div>
 
         <div class="w-full">
-          <label :class="{ error: $v.content.$error }">
+          <label :class="{ error: v$.content.$error }">
             {{ $t('CANNED_MGMT.EDIT.FORM.CONTENT.LABEL') }}
           </label>
           <div class="editor-wrap">
             <woot-message-editor
               v-model="content"
               class="message-editor [&>div]:px-1"
-              :class="{ editor_warning: $v.content.$error }"
+              :class="{ editor_warning: v$.content.$error }"
               :enable-variables="true"
               :enable-canned-responses="false"
               :placeholder="$t('CANNED_MGMT.EDIT.FORM.CONTENT.PLACEHOLDER')"
-              @blur="$v.content.$touch"
+              @blur="v$.content.$touch"
             />
           </div>
         </div>
         <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
           <woot-submit-button
             :disabled="
-              $v.content.$invalid ||
+              v$.content.$invalid ||
-              $v.shortCode.$invalid ||
+              v$.shortCode.$invalid ||
               editCanned.showLoading
             "
             :button-text="$t('CANNED_MGMT.EDIT.FORM.SUBMIT')"
@@ -52,7 +52,8 @@
 
 <script>
 /* eslint no-console: 0 */
-import { required, minLength } from 'vuelidate/lib/validators';
+import { useVuelidate } from '@vuelidate/core';
+import { required, minLength } from '@vuelidate/validators';
 import { useAlert } from 'dashboard/composables';
 import WootMessageEditor from 'dashboard/components/widgets/WootWriter/Editor.vue';
 import WootSubmitButton from '../../../../components/buttons/FormSubmitButton.vue';
@@ -70,6 +71,9 @@ export default {
     edshortCode: { type: String, default: '' },
     onClose: { type: Function, default: () => {} },
   },
+  setup() {
+    return { v$: useVuelidate() };
+  },
   data() {
     return {
       editCanned: {
@@ -97,14 +101,14 @@ export default {
   },
   methods: {
     setPageName({ name }) {
-      this.$v.content.$touch();
+      this.v$.content.$touch();
       this.content = name;
     },
     resetForm() {
       this.shortCode = '';
       this.content = '';
-      this.$v.shortCode.$reset();
+      this.v$.shortCode.$reset();
-      this.$v.content.$reset();
+      this.v$.content.$reset();
     },
     editCannedResponse() {
       // Show loading on button

app/javascript/dashboard/routes/dashboard/settings/inbox/AddAgents.vue

@@ -11,7 +11,7 @@
       </div>
       <div class="w-3/5">
         <div class="w-full">
-          <label :class="{ error: $v.selectedAgents.$error }">
+          <label :class="{ error: v$.selectedAgents.$error }">
             {{ $t('INBOX_MGMT.ADD.AGENTS.TITLE') }}
             <multiselect
               v-model="selectedAgents"
@@ -26,9 +26,9 @@
               :select-label="$t('FORMS.MULTISELECT.ENTER_TO_SELECT')"
               :deselect-label="$t('FORMS.MULTISELECT.ENTER_TO_REMOVE')"
               :placeholder="$t('INBOX_MGMT.ADD.AGENTS.PICK_AGENTS')"
-              @select="$v.selectedAgents.$touch"
+              @select="v$.selectedAgents.$touch"
             />
-            <span v-if="$v.selectedAgents.$error" class="message">
+            <span v-if="v$.selectedAgents.$error" class="message">
               {{ $t('INBOX_MGMT.ADD.AGENTS.VALIDATION_ERROR') }}
             </span>
           </label>
@@ -52,12 +52,12 @@ import { useAlert } from 'dashboard/composables';
 import InboxMembersAPI from '../../../../api/inboxMembers';
 import router from '../../../index';
 import PageHeader from '../SettingsSubPageHeader.vue';
+import { useVuelidate } from '@vuelidate/core';
 
 export default {
   components: {
     PageHeader,
   },
-
   validations: {
     selectedAgents: {
       isEmpty() {
@@ -65,24 +65,23 @@ export default {
       },
     },
   },
-
+  setup() {
+    return { v$: useVuelidate() };
+  },
   data() {
     return {
       selectedAgents: [],
       isCreating: false,
     };
   },
-
   computed: {
     ...mapGetters({
       agentList: 'agents/getAgents',
     }),
   },
-
   mounted() {
     this.$store.dispatch('agents/get');
   },
-
   methods: {
     async addAgents() {
       this.isCreating = true;

app/javascript/dashboard/routes/dashboard/settings/inbox/ImapSettings.vue

@@ -19,37 +19,37 @@
         <div v-if="isIMAPEnabled" class="mb-6">
           <woot-input
             v-model.trim="address"
-            :class="{ error: $v.address.$error }"
+            :class="{ error: v$.address.$error }"
             class="max-w-[75%] w-full"
             :label="$t('INBOX_MGMT.IMAP.ADDRESS.LABEL')"
             :placeholder="$t('INBOX_MGMT.IMAP.ADDRESS.PLACE_HOLDER')"
-            @blur="$v.address.$touch"
+            @blur="v$.address.$touch"
           />
           <woot-input
             v-model="port"
             type="number"
-            :class="{ error: $v.port.$error }"
+            :class="{ error: v$.port.$error }"
             class="max-w-[75%] w-full"
             :label="$t('INBOX_MGMT.IMAP.PORT.LABEL')"
             :placeholder="$t('INBOX_MGMT.IMAP.PORT.PLACE_HOLDER')"
-            @blur="$v.port.$touch"
+            @blur="v$.port.$touch"
           />
           <woot-input
             v-model="login"
-            :class="{ error: $v.login.$error }"
+            :class="{ error: v$.login.$error }"
             class="max-w-[75%] w-full"
             :label="$t('INBOX_MGMT.IMAP.LOGIN.LABEL')"
             :placeholder="$t('INBOX_MGMT.IMAP.LOGIN.PLACE_HOLDER')"
-            @blur="$v.login.$touch"
+            @blur="v$.login.$touch"
           />
           <woot-input
             v-model="password"
-            :class="{ error: $v.password.$error }"
+            :class="{ error: v$.password.$error }"
             class="max-w-[75%] w-full"
             :label="$t('INBOX_MGMT.IMAP.PASSWORD.LABEL')"
             :placeholder="$t('INBOX_MGMT.IMAP.PASSWORD.PLACE_HOLDER')"
             type="password"
-            @blur="$v.password.$touch"
+            @blur="v$.password.$touch"
           />
           <label for="toggle-enable-ssl">
             <input
@@ -64,7 +64,7 @@
         <woot-submit-button
           :button-text="$t('INBOX_MGMT.IMAP.UPDATE')"
           :loading="uiFlags.isUpdatingIMAP"
-          :disabled="($v.$invalid && isIMAPEnabled) || uiFlags.isUpdatingIMAP"
+          :disabled="(v$.$invalid && isIMAPEnabled) || uiFlags.isUpdatingIMAP"
         />
       </form>
     </settings-section>
@@ -75,7 +75,8 @@
 import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
 import SettingsSection from 'dashboard/components/SettingsSection.vue';
-import { required, minLength } from 'vuelidate/lib/validators';
+import { useVuelidate } from '@vuelidate/core';
+import { required, minLength } from '@vuelidate/validators';
 
 export default {
   components: {
@@ -87,6 +88,9 @@ export default {
       default: () => ({}),
     },
   },
+  setup() {
+    return { v$: useVuelidate() };
+  },
   data() {
     return {
       isIMAPEnabled: false,

app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue

@@ -41,21 +41,21 @@
         <woot-input
           v-model.trim="selectedInboxName"
           class="w-3/4 pb-4"
-          :class="{ error: $v.selectedInboxName.$error }"
+          :class="{ error: v$.selectedInboxName.$error }"
           :label="inboxNameLabel"
           :placeholder="inboxNamePlaceHolder"
           :error="
-            $v.selectedInboxName.$error
+            v$.selectedInboxName.$error
               ? $t('INBOX_MGMT.ADD.CHANNEL_NAME.ERROR')
               : ''
           "
-          @blur="$v.selectedInboxName.$touch"
+          @blur="v$.selectedInboxName.$touch"
         />
         <woot-input
           v-if="isAPIInbox"
           v-model.trim="webhookUrl"
           class="w-3/4 pb-4"
-          :class="{ error: $v.webhookUrl.$error }"
+          :class="{ error: v$.webhookUrl.$error }"
           :label="
             $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WEBHOOK_URL.LABEL')
           "
@@ -63,11 +63,11 @@
             $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WEBHOOK_URL.PLACEHOLDER')
           "
           :error="
-            $v.webhookUrl.$error
+            v$.webhookUrl.$error
               ? $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WEBHOOK_URL.ERROR')
               : ''
           "
-          @blur="$v.webhookUrl.$touch"
+          @blur="v$.webhookUrl.$touch"
         />
         <woot-input
           v-if="isAWebWidgetInbox"
@@ -386,7 +386,7 @@
         <woot-submit-button
           v-if="isAPIInbox"
           type="submit"
-          :disabled="$v.webhookUrl.$invalid"
+          :disabled="v$.webhookUrl.$invalid"
           :button-text="$t('INBOX_MGMT.SETTINGS_POPUP.UPDATE')"
           :loading="uiFlags.isUpdating"
           @click="updateInbox"
@@ -394,7 +394,7 @@
         <woot-submit-button
           v-else
           type="submit"
-          :disabled="$v.$invalid"
+          :disabled="v$.$invalid"
           :button-text="$t('INBOX_MGMT.SETTINGS_POPUP.UPDATE')"
           :loading="uiFlags.isUpdating"
           @click="updateInbox"
@@ -428,6 +428,7 @@ import { mapGetters } from 'vuex';
 import { shouldBeUrl } from 'shared/helpers/Validators';
 import configMixin from 'shared/mixins/configMixin';
 import { useAlert } from 'dashboard/composables';
+import { useVuelidate } from '@vuelidate/core';
 import SettingIntroBanner from 'dashboard/components/widgets/SettingIntroBanner.vue';
 import SettingsSection from '../../../../components/SettingsSection.vue';
 import inboxMixin from 'shared/mixins/inboxMixin';
@@ -459,6 +460,9 @@ export default {
     MicrosoftReauthorize,
   },
   mixins: [configMixin, inboxMixin],
+  setup() {
+    return { v$: useVuelidate() };
+  },
   data() {
     return {
       avatarFile: null,

app/javascript/dashboard/routes/dashboard/settings/inbox/SmtpSettings.vue

@@ -17,45 +17,45 @@
         <div v-if="isSMTPEnabled" class="mb-6">
           <woot-input
             v-model.trim="address"
-            :class="{ error: $v.address.$error }"
+            :class="{ error: v$.address.$error }"
             class="max-w-[75%] w-full"
             :label="$t('INBOX_MGMT.SMTP.ADDRESS.LABEL')"
             :placeholder="$t('INBOX_MGMT.SMTP.ADDRESS.PLACE_HOLDER')"
-            @blur="$v.address.$touch"
+            @blur="v$.address.$touch"
           />
           <woot-input
             v-model="port"
             type="number"
-            :class="{ error: $v.port.$error }"
+            :class="{ error: v$.port.$error }"
             class="max-w-[75%] w-full"
             :label="$t('INBOX_MGMT.SMTP.PORT.LABEL')"
             :placeholder="$t('INBOX_MGMT.SMTP.PORT.PLACE_HOLDER')"
-            @blur="$v.port.$touch"
+            @blur="v$.port.$touch"
           />
           <woot-input
             v-model="login"
-            :class="{ error: $v.login.$error }"
+            :class="{ error: v$.login.$error }"
             class="max-w-[75%] w-full"
             :label="$t('INBOX_MGMT.SMTP.LOGIN.LABEL')"
             :placeholder="$t('INBOX_MGMT.SMTP.LOGIN.PLACE_HOLDER')"
-            @blur="$v.login.$touch"
+            @blur="v$.login.$touch"
           />
           <woot-input
             v-model="password"
-            :class="{ error: $v.password.$error }"
+            :class="{ error: v$.password.$error }"
             class="max-w-[75%] w-full"
             :label="$t('INBOX_MGMT.SMTP.PASSWORD.LABEL')"
             :placeholder="$t('INBOX_MGMT.SMTP.PASSWORD.PLACE_HOLDER')"
             type="password"
-            @blur="$v.password.$touch"
+            @blur="v$.password.$touch"
           />
           <woot-input
             v-model.trim="domain"
-            :class="{ error: $v.domain.$error }"
+            :class="{ error: v$.domain.$error }"
             class="max-w-[75%] w-full"
             :label="$t('INBOX_MGMT.SMTP.DOMAIN.LABEL')"
             :placeholder="$t('INBOX_MGMT.SMTP.DOMAIN.PLACE_HOLDER')"
-            @blur="$v.domain.$touch"
+            @blur="v$.domain.$touch"
           />
           <input-radio-group
             :label="$t('INBOX_MGMT.SMTP.ENCRYPTION')"
@@ -80,7 +80,7 @@
         <woot-submit-button
           :button-text="$t('INBOX_MGMT.SMTP.UPDATE')"
           :loading="uiFlags.isUpdatingSMTP"
-          :disabled="($v.$invalid && isSMTPEnabled) || uiFlags.isUpdatingSMTP"
+          :disabled="(v$.$invalid && isSMTPEnabled) || uiFlags.isUpdatingSMTP"
         />
       </form>
     </settings-section>
@@ -91,7 +91,8 @@
 import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
 import SettingsSection from 'dashboard/components/SettingsSection.vue';
-import { required, minLength } from 'vuelidate/lib/validators';
+import { useVuelidate } from '@vuelidate/core';
+import { required, minLength } from '@vuelidate/validators';
 import InputRadioGroup from './components/InputRadioGroup.vue';
 import SingleSelectDropdown from './components/SingleSelectDropdown.vue';
 
@@ -107,6 +108,9 @@ export default {
       default: () => ({}),
     },
   },
+  setup() {
+    return { v$: useVuelidate() };
+  },
   data() {
     return {
       isSMTPEnabled: false,

app/javascript/dashboard/routes/dashboard/settings/inbox/WidgetBuilder.vue

@@ -15,7 +15,7 @@
             />
             <woot-input
               v-model.trim="websiteName"
-              :class="{ error: $v.websiteName.$error }"
+              :class="{ error: v$.websiteName.$error }"
               :label="
                 $t(
                   'INBOX_MGMT.WIDGET_BUILDER.WIDGET_OPTIONS.WEBSITE_NAME.LABEL'
@@ -27,7 +27,7 @@
                 )
               "
               :error="websiteNameValidationErrorMsg"
-              @blur="$v.websiteName.$touch"
+              @blur="v$.websiteName.$touch"
             />
             <woot-input
               v-model.trim="welcomeHeading"
@@ -118,7 +118,7 @@
                 )
               "
               :loading="uiFlags.isUpdating"
-              :disabled="$v.$invalid || uiFlags.isUpdating"
+              :disabled="v$.$invalid || uiFlags.isUpdating"
             />
           </form>
         </div>
@@ -157,7 +157,8 @@ import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
 import Widget from 'dashboard/modules/widget-preview/components/Widget.vue';
 import InputRadioGroup from './components/InputRadioGroup.vue';
-import { required } from 'vuelidate/lib/validators';
+import { useVuelidate } from '@vuelidate/core';
+import { required } from '@vuelidate/validators';
 import { LOCAL_STORAGE_KEYS } from 'dashboard/constants/localStorage';
 import { LocalStorage } from 'shared/helpers/localStorage';
 
@@ -172,6 +173,9 @@ export default {
       default: () => {},
     },
   },
+  setup() {
+    return { v$: useVuelidate() };
+  },
   data() {
     return {
       isWidgetPreview: true,
@@ -287,7 +291,7 @@ export default {
       ];
     },
     websiteNameValidationErrorMsg() {
-      return this.$v.websiteName.$error
+      return this.v$.websiteName.$error
         ? this.$t('INBOX_MGMT.WIDGET_BUILDER.WIDGET_OPTIONS.WEBSITE_NAME.ERROR')
         : '';
     },

app/javascript/dashboard/routes/dashboard/settings/inbox/channels/360DialogWhatsapp.vue

@@ -1,37 +1,37 @@
 <template>
-  <form class="mx-0 flex flex-wrap" @submit.prevent="createChannel()">
+  <form class="flex flex-wrap mx-0" @submit.prevent="createChannel()">
     <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
-      <label :class="{ error: $v.inboxName.$error }">
+      <label :class="{ error: v$.inboxName.$error }">
         {{ $t('INBOX_MGMT.ADD.WHATSAPP.INBOX_NAME.LABEL') }}
         <input
           v-model.trim="inboxName"
           type="text"
           :placeholder="$t('INBOX_MGMT.ADD.WHATSAPP.INBOX_NAME.PLACEHOLDER')"
-          @blur="$v.inboxName.$touch"
+          @blur="v$.inboxName.$touch"
         />
-        <span v-if="$v.inboxName.$error" class="message">
+        <span v-if="v$.inboxName.$error" class="message">
           {{ $t('INBOX_MGMT.ADD.WHATSAPP.INBOX_NAME.ERROR') }}
         </span>
       </label>
     </div>
 
     <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
-      <label :class="{ error: $v.phoneNumber.$error }">
+      <label :class="{ error: v$.phoneNumber.$error }">
         {{ $t('INBOX_MGMT.ADD.WHATSAPP.PHONE_NUMBER.LABEL') }}
         <input
           v-model.trim="phoneNumber"
           type="text"
           :placeholder="$t('INBOX_MGMT.ADD.WHATSAPP.PHONE_NUMBER.PLACEHOLDER')"
-          @blur="$v.phoneNumber.$touch"
+          @blur="v$.phoneNumber.$touch"
         />
-        <span v-if="$v.phoneNumber.$error" class="message">
+        <span v-if="v$.phoneNumber.$error" class="message">
           {{ $t('INBOX_MGMT.ADD.WHATSAPP.PHONE_NUMBER.ERROR') }}
         </span>
       </label>
     </div>
 
     <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
-      <label :class="{ error: $v.apiKey.$error }">
+      <label :class="{ error: v$.apiKey.$error }">
         <span>
           {{ $t('INBOX_MGMT.ADD.WHATSAPP.API_KEY.LABEL') }}
         </span>
@@ -39,9 +39,9 @@
           v-model.trim="apiKey"
           type="text"
           :placeholder="$t('INBOX_MGMT.ADD.WHATSAPP.API_KEY.PLACEHOLDER')"
-          @blur="$v.apiKey.$touch"
+          @blur="v$.apiKey.$touch"
         />
-        <span v-if="$v.apiKey.$error" class="message">
+        <span v-if="v$.apiKey.$error" class="message">
           {{ $t('INBOX_MGMT.ADD.WHATSAPP.API_KEY.ERROR') }}
         </span>
       </label>
@@ -58,13 +58,17 @@
 
 <script>
 import { mapGetters } from 'vuex';
+import { useVuelidate } from '@vuelidate/core';
 import { useAlert } from 'dashboard/composables';
-import { required } from 'vuelidate/lib/validators';
+import { required } from '@vuelidate/validators';
 import router from '../../../../index';
 
 import { isPhoneE164OrEmpty } from 'shared/helpers/Validators';
 
 export default {
+  setup() {
+    return { v$: useVuelidate() };
+  },
   data() {
     return {
       inboxName: '',
@@ -82,8 +86,8 @@ export default {
   },
   methods: {
     async createChannel() {
-      this.$v.$touch();
+      this.v$.$touch();
-      if (this.$v.$invalid) {
+      if (this.v$.$invalid) {
         return;
       }
 

app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Api.vue

@@ -8,7 +8,7 @@
     />
     <form class="flex flex-wrap mx-0" @submit.prevent="createChannel()">
       <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
-        <label :class="{ error: $v.channelName.$error }">
+        <label :class="{ error: v$.channelName.$error }">
           {{ $t('INBOX_MGMT.ADD.API_CHANNEL.CHANNEL_NAME.LABEL') }}
           <input
             v-model.trim="channelName"
@@ -16,16 +16,16 @@
             :placeholder="
               $t('INBOX_MGMT.ADD.API_CHANNEL.CHANNEL_NAME.PLACEHOLDER')
             "
-            @blur="$v.channelName.$touch"
+            @blur="v$.channelName.$touch"
           />
-          <span v-if="$v.channelName.$error" class="message">{{
+          <span v-if="v$.channelName.$error" class="message">{{
             $t('INBOX_MGMT.ADD.API_CHANNEL.CHANNEL_NAME.ERROR')
           }}</span>
         </label>
       </div>
 
       <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
-        <label :class="{ error: $v.webhookUrl.$error }">
+        <label :class="{ error: v$.webhookUrl.$error }">
           {{ $t('INBOX_MGMT.ADD.API_CHANNEL.WEBHOOK_URL.LABEL') }}
           <input
             v-model.trim="webhookUrl"
@@ -33,7 +33,7 @@
             :placeholder="
               $t('INBOX_MGMT.ADD.API_CHANNEL.WEBHOOK_URL.PLACEHOLDER')
             "
-            @blur="$v.webhookUrl.$touch"
+            @blur="v$.webhookUrl.$touch"
           />
         </label>
         <p class="help-text">
@@ -53,8 +53,9 @@
 
 <script>
 import { mapGetters } from 'vuex';
+import { useVuelidate } from '@vuelidate/core';
 import { useAlert } from 'dashboard/composables';
-import { required } from 'vuelidate/lib/validators';
+import { required } from '@vuelidate/validators';
 import router from '../../../../index';
 import PageHeader from '../../SettingsSubPageHeader.vue';
 
@@ -65,6 +66,9 @@ export default {
   components: {
     PageHeader,
   },
+  setup() {
+    return { v$: useVuelidate() };
+  },
   data() {
     return {
       channelName: '',
@@ -82,8 +86,8 @@ export default {
   },
   methods: {
     async createChannel() {
-      this.$v.$touch();
+      this.v$.$touch();
-      if (this.$v.$invalid) {
+      if (this.v$.$invalid) {
         return;
       }
 

app/javascript/dashboard/routes/dashboard/settings/inbox/channels/BandwidthSms.vue

@@ -1,7 +1,7 @@
 <template>
-  <form class="mx-0 flex flex-wrap" @submit.prevent="createChannel()">
+  <form class="flex flex-wrap mx-0" @submit.prevent="createChannel()">
     <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
-      <label :class="{ error: $v.inboxName.$error }">
+      <label :class="{ error: v$.inboxName.$error }">
         {{ $t('INBOX_MGMT.ADD.SMS.BANDWIDTH.INBOX_NAME.LABEL') }}
         <input
           v-model.trim="inboxName"
@@ -9,16 +9,16 @@
           :placeholder="
             $t('INBOX_MGMT.ADD.SMS.BANDWIDTH.INBOX_NAME.PLACEHOLDER')
           "
-          @blur="$v.inboxName.$touch"
+          @blur="v$.inboxName.$touch"
         />
-        <span v-if="$v.inboxName.$error" class="message">{{
+        <span v-if="v$.inboxName.$error" class="message">{{
           $t('INBOX_MGMT.ADD.SMS.BANDWIDTH.INBOX_NAME.ERROR')
         }}</span>
       </label>
     </div>
 
     <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
-      <label :class="{ error: $v.phoneNumber.$error }">
+      <label :class="{ error: v$.phoneNumber.$error }">
         {{ $t('INBOX_MGMT.ADD.SMS.BANDWIDTH.PHONE_NUMBER.LABEL') }}
         <input
           v-model.trim="phoneNumber"
@@ -26,16 +26,16 @@
           :placeholder="
             $t('INBOX_MGMT.ADD.SMS.BANDWIDTH.PHONE_NUMBER.PLACEHOLDER')
           "
-          @blur="$v.phoneNumber.$touch"
+          @blur="v$.phoneNumber.$touch"
         />
-        <span v-if="$v.phoneNumber.$error" class="message">{{
+        <span v-if="v$.phoneNumber.$error" class="message">{{
           $t('INBOX_MGMT.ADD.SMS.BANDWIDTH.PHONE_NUMBER.ERROR')
         }}</span>
       </label>
     </div>
 
     <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
-      <label :class="{ error: $v.accountId.$error }">
+      <label :class="{ error: v$.accountId.$error }">
         {{ $t('INBOX_MGMT.ADD.SMS.BANDWIDTH.ACCOUNT_ID.LABEL') }}
         <input
           v-model.trim="accountId"
@@ -43,16 +43,16 @@
           :placeholder="
             $t('INBOX_MGMT.ADD.SMS.BANDWIDTH.ACCOUNT_ID.PLACEHOLDER')
           "
-          @blur="$v.accountId.$touch"
+          @blur="v$.accountId.$touch"
         />
-        <span v-if="$v.accountId.$error" class="message">{{
+        <span v-if="v$.accountId.$error" class="message">{{
           $t('INBOX_MGMT.ADD.SMS.BANDWIDTH.ACCOUNT_ID.ERROR')
         }}</span>
       </label>
     </div>
 
     <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
-      <label :class="{ error: $v.applicationId.$error }">
+      <label :class="{ error: v$.applicationId.$error }">
         {{ $t('INBOX_MGMT.ADD.SMS.BANDWIDTH.APPLICATION_ID.LABEL') }}
         <input
           v-model.trim="applicationId"
@@ -60,31 +60,31 @@
           :placeholder="
             $t('INBOX_MGMT.ADD.SMS.BANDWIDTH.APPLICATION_ID.PLACEHOLDER')
           "
-          @blur="$v.applicationId.$touch"
+          @blur="v$.applicationId.$touch"
         />
-        <span v-if="$v.applicationId.$error" class="message">{{
+        <span v-if="v$.applicationId.$error" class="message">{{
           $t('INBOX_MGMT.ADD.SMS.BANDWIDTH.APPLICATION_ID.ERROR')
         }}</span>
       </label>
     </div>
 
     <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
-      <label :class="{ error: $v.apiKey.$error }">
+      <label :class="{ error: v$.apiKey.$error }">
         {{ $t('INBOX_MGMT.ADD.SMS.BANDWIDTH.API_KEY.LABEL') }}
         <input
           v-model.trim="apiKey"
           type="text"
           :placeholder="$t('INBOX_MGMT.ADD.SMS.BANDWIDTH.API_KEY.PLACEHOLDER')"
-          @blur="$v.apiKey.$touch"
+          @blur="v$.apiKey.$touch"
         />
-        <span v-if="$v.apiKey.$error" class="message">{{
+        <span v-if="v$.apiKey.$error" class="message">{{
           $t('INBOX_MGMT.ADD.SMS.BANDWIDTH.API_KEY.ERROR')
         }}</span>
       </label>
     </div>
 
     <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
-      <label :class="{ error: $v.apiSecret.$error }">
+      <label :class="{ error: v$.apiSecret.$error }">
         {{ $t('INBOX_MGMT.ADD.SMS.BANDWIDTH.API_SECRET.LABEL') }}
         <input
           v-model.trim="apiSecret"
@@ -92,9 +92,9 @@
           :placeholder="
             $t('INBOX_MGMT.ADD.SMS.BANDWIDTH.API_SECRET.PLACEHOLDER')
           "
-          @blur="$v.apiSecret.$touch"
+          @blur="v$.apiSecret.$touch"
         />
-        <span v-if="$v.apiSecret.$error" class="message">{{
+        <span v-if="v$.apiSecret.$error" class="message">{{
           $t('INBOX_MGMT.ADD.SMS.BANDWIDTH.API_SECRET.ERROR')
         }}</span>
       </label>
@@ -111,13 +111,17 @@
 
 <script>
 import { mapGetters } from 'vuex';
+import { useVuelidate } from '@vuelidate/core';
 import { useAlert } from 'dashboard/composables';
-import { required } from 'vuelidate/lib/validators';
+import { required } from '@vuelidate/validators';
 import router from '../../../../index';
 
 const shouldStartWithPlusSign = (value = '') => value.startsWith('+');
 
 export default {
+  setup() {
+    return { v$: useVuelidate() };
+  },
   data() {
     return {
       accountId: '',
@@ -144,8 +148,8 @@ export default {
   },
   methods: {
     async createChannel() {
-      this.$v.$touch();
+      this.v$.$touch();
-      if (this.$v.$invalid) {
+      if (this.v$.$invalid) {
         return;
       }
 

app/javascript/dashboard/routes/dashboard/settings/inbox/channels/CloudWhatsapp.vue

@@ -1,37 +1,37 @@
 <template>
-  <form class="mx-0 flex flex-wrap" @submit.prevent="createChannel()">
+  <form class="flex flex-wrap mx-0" @submit.prevent="createChannel()">
     <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
-      <label :class="{ error: $v.inboxName.$error }">
+      <label :class="{ error: v$.inboxName.$error }">
         {{ $t('INBOX_MGMT.ADD.WHATSAPP.INBOX_NAME.LABEL') }}
         <input
           v-model.trim="inboxName"
           type="text"
           :placeholder="$t('INBOX_MGMT.ADD.WHATSAPP.INBOX_NAME.PLACEHOLDER')"
-          @blur="$v.inboxName.$touch"
+          @blur="v$.inboxName.$touch"
         />
-        <span v-if="$v.inboxName.$error" class="message">
+        <span v-if="v$.inboxName.$error" class="message">
           {{ $t('INBOX_MGMT.ADD.WHATSAPP.INBOX_NAME.ERROR') }}
         </span>
       </label>
     </div>
 
     <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
-      <label :class="{ error: $v.phoneNumber.$error }">
+      <label :class="{ error: v$.phoneNumber.$error }">
         {{ $t('INBOX_MGMT.ADD.WHATSAPP.PHONE_NUMBER.LABEL') }}
         <input
           v-model.trim="phoneNumber"
           type="text"
           :placeholder="$t('INBOX_MGMT.ADD.WHATSAPP.PHONE_NUMBER.PLACEHOLDER')"
-          @blur="$v.phoneNumber.$touch"
+          @blur="v$.phoneNumber.$touch"
         />
-        <span v-if="$v.phoneNumber.$error" class="message">
+        <span v-if="v$.phoneNumber.$error" class="message">
           {{ $t('INBOX_MGMT.ADD.WHATSAPP.PHONE_NUMBER.ERROR') }}
         </span>
       </label>
     </div>
 
     <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
-      <label :class="{ error: $v.phoneNumberId.$error }">
+      <label :class="{ error: v$.phoneNumberId.$error }">
         <span>
           {{ $t('INBOX_MGMT.ADD.WHATSAPP.PHONE_NUMBER_ID.LABEL') }}
         </span>
@@ -41,16 +41,16 @@
           :placeholder="
             $t('INBOX_MGMT.ADD.WHATSAPP.PHONE_NUMBER_ID.PLACEHOLDER')
           "
-          @blur="$v.phoneNumberId.$touch"
+          @blur="v$.phoneNumberId.$touch"
         />
-        <span v-if="$v.phoneNumberId.$error" class="message">
+        <span v-if="v$.phoneNumberId.$error" class="message">
           {{ $t('INBOX_MGMT.ADD.WHATSAPP.PHONE_NUMBER_ID.ERROR') }}
         </span>
       </label>
     </div>
 
     <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
-      <label :class="{ error: $v.businessAccountId.$error }">
+      <label :class="{ error: v$.businessAccountId.$error }">
         <span>
           {{ $t('INBOX_MGMT.ADD.WHATSAPP.BUSINESS_ACCOUNT_ID.LABEL') }}
         </span>
@@ -60,16 +60,16 @@
           :placeholder="
             $t('INBOX_MGMT.ADD.WHATSAPP.BUSINESS_ACCOUNT_ID.PLACEHOLDER')
           "
-          @blur="$v.businessAccountId.$touch"
+          @blur="v$.businessAccountId.$touch"
         />
-        <span v-if="$v.businessAccountId.$error" class="message">
+        <span v-if="v$.businessAccountId.$error" class="message">
           {{ $t('INBOX_MGMT.ADD.WHATSAPP.BUSINESS_ACCOUNT_ID.ERROR') }}
         </span>
       </label>
     </div>
 
     <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
-      <label :class="{ error: $v.apiKey.$error }">
+      <label :class="{ error: v$.apiKey.$error }">
         <span>
           {{ $t('INBOX_MGMT.ADD.WHATSAPP.API_KEY.LABEL') }}
         </span>
@@ -77,9 +77,9 @@
           v-model.trim="apiKey"
           type="text"
           :placeholder="$t('INBOX_MGMT.ADD.WHATSAPP.API_KEY.PLACEHOLDER')"
-          @blur="$v.apiKey.$touch"
+          @blur="v$.apiKey.$touch"
         />
-        <span v-if="$v.apiKey.$error" class="message">
+        <span v-if="v$.apiKey.$error" class="message">
           {{ $t('INBOX_MGMT.ADD.WHATSAPP.API_KEY.ERROR') }}
         </span>
       </label>
@@ -96,12 +96,16 @@
 
 <script>
 import { mapGetters } from 'vuex';
+import { useVuelidate } from '@vuelidate/core';
 import { useAlert } from 'dashboard/composables';
-import { required } from 'vuelidate/lib/validators';
+import { required } from '@vuelidate/validators';
 import router from '../../../../index';
 import { isPhoneE164OrEmpty, isNumber } from 'shared/helpers/Validators';
 
 export default {
+  setup() {
+    return { v$: useVuelidate() };
+  },
   data() {
     return {
       inboxName: '',
@@ -123,8 +127,8 @@ export default {
   },
   methods: {
     async createChannel() {
-      this.$v.$touch();
+      this.v$.$touch();
-      if (this.$v.$invalid) {
+      if (this.v$.$invalid) {
         return;
       }
 

app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Facebook.vue

@@ -49,7 +49,7 @@
         </div>
         <div class="w-3/5">
           <div class="w-full">
-            <div class="input-wrap" :class="{ error: $v.selectedPage.$error }">
+            <div class="input-wrap" :class="{ error: v$.selectedPage.$error }">
               {{ $t('INBOX_MGMT.ADD.FB.CHOOSE_PAGE') }}
               <multiselect
                 v-model.trim="selectedPage"
@@ -64,21 +64,21 @@
                 selected-label
                 @select="setPageName"
               />
-              <span v-if="$v.selectedPage.$error" class="message">
+              <span v-if="v$.selectedPage.$error" class="message">
                 {{ $t('INBOX_MGMT.ADD.FB.CHOOSE_PLACEHOLDER') }}
               </span>
             </div>
           </div>
           <div class="w-full">
-            <label :class="{ error: $v.pageName.$error }">
+            <label :class="{ error: v$.pageName.$error }">
               {{ $t('INBOX_MGMT.ADD.FB.INBOX_NAME') }}
               <input
                 v-model.trim="pageName"
                 type="text"
                 :placeholder="$t('INBOX_MGMT.ADD.FB.PICK_NAME')"
-                @input="$v.pageName.$touch"
+                @input="v$.pageName.$touch"
               />
-              <span v-if="$v.pageName.$error" class="message">
+              <span v-if="v$.pageName.$error" class="message">
                 {{ $t('INBOX_MGMT.ADD.FB.ADD_NAME') }}
               </span>
             </label>
@@ -94,8 +94,9 @@
 <script>
 /* eslint-env browser */
 /* global FB */
+import { useVuelidate } from '@vuelidate/core';
 import { useAlert } from 'dashboard/composables';
-import { required } from 'vuelidate/lib/validators';
+import { required } from '@vuelidate/validators';
 import LoadingState from 'dashboard/components/widgets/LoadingState.vue';
 import { mapGetters } from 'vuex';
 import ChannelApi from '../../../../../api/channels';
@@ -113,6 +114,9 @@ export default {
     PageHeader,
   },
   mixins: [globalConfigMixin, accountMixin],
+  setup() {
+    return { v$: useVuelidate() };
+  },
   data() {
     return {
       isCreating: false,
@@ -181,7 +185,7 @@ export default {
     },
 
     setPageName({ name }) {
-      this.$v.selectedPage.$touch();
+      this.v$.selectedPage.$touch();
       this.pageName = name;
     },
 
@@ -270,8 +274,8 @@ export default {
     },
 
     createChannel() {
-      this.$v.$touch();
+      this.v$.$touch();
-      if (!this.$v.$error) {
+      if (!this.v$.$error) {
         this.emptyStateMessage = this.$t('INBOX_MGMT.DETAILS.CREATING_CHANNEL');
         this.isCreating = true;
         this.$store

app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Line.vue

@@ -8,7 +8,7 @@
     />
     <form class="flex flex-wrap mx-0" @submit.prevent="createChannel()">
       <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
-        <label :class="{ error: $v.channelName.$error }">
+        <label :class="{ error: v$.channelName.$error }">
           {{ $t('INBOX_MGMT.ADD.LINE_CHANNEL.CHANNEL_NAME.LABEL') }}
           <input
             v-model.trim="channelName"
@@ -16,16 +16,16 @@
             :placeholder="
               $t('INBOX_MGMT.ADD.LINE_CHANNEL.CHANNEL_NAME.PLACEHOLDER')
             "
-            @blur="$v.channelName.$touch"
+            @blur="v$.channelName.$touch"
           />
-          <span v-if="$v.channelName.$error" class="message">{{
+          <span v-if="v$.channelName.$error" class="message">{{
             $t('INBOX_MGMT.ADD.LINE_CHANNEL.CHANNEL_NAME.ERROR')
           }}</span>
         </label>
       </div>
 
       <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
-        <label :class="{ error: $v.lineChannelId.$error }">
+        <label :class="{ error: v$.lineChannelId.$error }">
           {{ $t('INBOX_MGMT.ADD.LINE_CHANNEL.LINE_CHANNEL_ID.LABEL') }}
           <input
             v-model.trim="lineChannelId"
@@ -33,13 +33,13 @@
             :placeholder="
               $t('INBOX_MGMT.ADD.LINE_CHANNEL.LINE_CHANNEL_ID.PLACEHOLDER')
             "
-            @blur="$v.lineChannelId.$touch"
+            @blur="v$.lineChannelId.$touch"
           />
         </label>
       </div>
 
       <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
-        <label :class="{ error: $v.lineChannelSecret.$error }">
+        <label :class="{ error: v$.lineChannelSecret.$error }">
           {{ $t('INBOX_MGMT.ADD.LINE_CHANNEL.LINE_CHANNEL_SECRET.LABEL') }}
           <input
             v-model.trim="lineChannelSecret"
@@ -47,13 +47,13 @@
             :placeholder="
               $t('INBOX_MGMT.ADD.LINE_CHANNEL.LINE_CHANNEL_SECRET.PLACEHOLDER')
             "
-            @blur="$v.lineChannelSecret.$touch"
+            @blur="v$.lineChannelSecret.$touch"
           />
         </label>
       </div>
 
       <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
-        <label :class="{ error: $v.lineChannelToken.$error }">
+        <label :class="{ error: v$.lineChannelToken.$error }">
           {{ $t('INBOX_MGMT.ADD.LINE_CHANNEL.LINE_CHANNEL_TOKEN.LABEL') }}
           <input
             v-model.trim="lineChannelToken"
@@ -61,7 +61,7 @@
             :placeholder="
               $t('INBOX_MGMT.ADD.LINE_CHANNEL.LINE_CHANNEL_TOKEN.PLACEHOLDER')
             "
-            @blur="$v.lineChannelToken.$touch"
+            @blur="v$.lineChannelToken.$touch"
           />
         </label>
       </div>
@@ -78,8 +78,9 @@
 
 <script>
 import { mapGetters } from 'vuex';
+import { useVuelidate } from '@vuelidate/core';
 import { useAlert } from 'dashboard/composables';
-import { required } from 'vuelidate/lib/validators';
+import { required } from '@vuelidate/validators';
 import router from '../../../../index';
 import PageHeader from '../../SettingsSubPageHeader.vue';
 
@@ -87,6 +88,9 @@ export default {
   components: {
     PageHeader,
   },
+  setup() {
+    return { v$: useVuelidate() };
+  },
   data() {
     return {
       channelName: '',
@@ -108,8 +112,8 @@ export default {
   },
   methods: {
     async createChannel() {
-      this.$v.$touch();
+      this.v$.$touch();
-      if (this.$v.$invalid) {
+      if (this.v$.$invalid) {
         return;
       }
 

app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Telegram.vue

@@ -8,7 +8,7 @@
     />
     <form class="flex flex-wrap mx-0" @submit.prevent="createChannel()">
       <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
-        <label :class="{ error: $v.botToken.$error }">
+        <label :class="{ error: v$.botToken.$error }">
           {{ $t('INBOX_MGMT.ADD.TELEGRAM_CHANNEL.BOT_TOKEN.LABEL') }}
           <input
             v-model.trim="botToken"
@@ -16,7 +16,7 @@
             :placeholder="
               $t('INBOX_MGMT.ADD.TELEGRAM_CHANNEL.BOT_TOKEN.PLACEHOLDER')
             "
-            @blur="$v.botToken.$touch"
+            @blur="v$.botToken.$touch"
           />
         </label>
         <p class="help-text">
@@ -36,8 +36,9 @@
 
 <script>
 import { mapGetters } from 'vuex';
+import { useVuelidate } from '@vuelidate/core';
 import { useAlert } from 'dashboard/composables';
-import { required } from 'vuelidate/lib/validators';
+import { required } from '@vuelidate/validators';
 import router from '../../../../index';
 import PageHeader from '../../SettingsSubPageHeader.vue';
 
@@ -45,6 +46,9 @@ export default {
   components: {
     PageHeader,
   },
+  setup() {
+    return { v$: useVuelidate() };
+  },
   data() {
     return {
       botToken: '',
@@ -60,8 +64,8 @@ export default {
   },
   methods: {
     async createChannel() {
-      this.$v.$touch();
+      this.v$.$touch();
-      if (this.$v.$invalid) {
+      if (this.v$.$invalid) {
         return;
       }
 

app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Twilio.vue

@@ -1,16 +1,16 @@
 <!-- Deprecated in favour of separate files for SMS and Whatsapp and also to implement new providers for each platform in the future-->
 <template>
-  <form class="mx-0 flex flex-wrap" @submit.prevent="createChannel()">
+  <form class="flex flex-wrap mx-0" @submit.prevent="createChannel()">
     <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
-      <label :class="{ error: $v.channelName.$error }">
+      <label :class="{ error: v$.channelName.$error }">
         {{ $t('INBOX_MGMT.ADD.TWILIO.CHANNEL_NAME.LABEL') }}
         <input
           v-model.trim="channelName"
           type="text"
           :placeholder="$t('INBOX_MGMT.ADD.TWILIO.CHANNEL_NAME.PLACEHOLDER')"
-          @blur="$v.channelName.$touch"
+          @blur="v$.channelName.$touch"
         />
-        <span v-if="$v.channelName.$error" class="message">{{
+        <span v-if="v$.channelName.$error" class="message">{{
           $t('INBOX_MGMT.ADD.TWILIO.CHANNEL_NAME.ERROR')
         }}</span>
       </label>
@@ -19,7 +19,7 @@
     <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
       <label
         v-if="useMessagingService"
-        :class="{ error: $v.messagingServiceSID.$error }"
+        :class="{ error: v$.messagingServiceSID.$error }"
       >
         {{ $t('INBOX_MGMT.ADD.TWILIO.MESSAGING_SERVICE_SID.LABEL') }}
         <input
@@ -28,9 +28,9 @@
           :placeholder="
             $t('INBOX_MGMT.ADD.TWILIO.MESSAGING_SERVICE_SID.PLACEHOLDER')
           "
-          @blur="$v.messagingServiceSID.$touch"
+          @blur="v$.messagingServiceSID.$touch"
         />
-        <span v-if="$v.messagingServiceSID.$error" class="message">{{
+        <span v-if="v$.messagingServiceSID.$error" class="message">{{
           $t('INBOX_MGMT.ADD.TWILIO.MESSAGING_SERVICE_SID.ERROR')
         }}</span>
       </label>
@@ -40,15 +40,15 @@
       v-if="!useMessagingService"
       class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]"
     >
-      <label :class="{ error: $v.phoneNumber.$error }">
+      <label :class="{ error: v$.phoneNumber.$error }">
         {{ $t('INBOX_MGMT.ADD.TWILIO.PHONE_NUMBER.LABEL') }}
         <input
           v-model.trim="phoneNumber"
           type="text"
           :placeholder="$t('INBOX_MGMT.ADD.TWILIO.PHONE_NUMBER.PLACEHOLDER')"
-          @blur="$v.phoneNumber.$touch"
+          @blur="v$.phoneNumber.$touch"
         />
-        <span v-if="$v.phoneNumber.$error" class="message">{{
+        <span v-if="v$.phoneNumber.$error" class="message">{{
           $t('INBOX_MGMT.ADD.TWILIO.PHONE_NUMBER.ERROR')
         }}</span>
       </label>
@@ -71,15 +71,15 @@
     </div>
 
     <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
-      <label :class="{ error: $v.accountSID.$error }">
+      <label :class="{ error: v$.accountSID.$error }">
         {{ $t('INBOX_MGMT.ADD.TWILIO.ACCOUNT_SID.LABEL') }}
         <input
           v-model.trim="accountSID"
           type="text"
           :placeholder="$t('INBOX_MGMT.ADD.TWILIO.ACCOUNT_SID.PLACEHOLDER')"
-          @blur="$v.accountSID.$touch"
+          @blur="v$.accountSID.$touch"
         />
-        <span v-if="$v.accountSID.$error" class="message">{{
+        <span v-if="v$.accountSID.$error" class="message">{{
           $t('INBOX_MGMT.ADD.TWILIO.ACCOUNT_SID.ERROR')
         }}</span>
       </label>
@@ -96,21 +96,21 @@
       </label>
     </div>
     <div v-if="useAPIKey" class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
-      <label :class="{ error: $v.apiKeySID.$error }">
+      <label :class="{ error: v$.apiKeySID.$error }">
         {{ $t('INBOX_MGMT.ADD.TWILIO.API_KEY.LABEL') }}
         <input
           v-model.trim="apiKeySID"
           type="text"
           :placeholder="$t('INBOX_MGMT.ADD.TWILIO.API_KEY.PLACEHOLDER')"
-          @blur="$v.apiKeySID.$touch"
+          @blur="v$.apiKeySID.$touch"
         />
-        <span v-if="$v.apiKeySID.$error" class="message">{{
+        <span v-if="v$.apiKeySID.$error" class="message">{{
           $t('INBOX_MGMT.ADD.TWILIO.API_KEY.ERROR')
         }}</span>
       </label>
     </div>
     <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
-      <label :class="{ error: $v.authToken.$error }">
+      <label :class="{ error: v$.authToken.$error }">
         {{ $t(`INBOX_MGMT.ADD.TWILIO.${authTokeni18nKey}.LABEL`) }}
         <input
           v-model.trim="authToken"
@@ -118,9 +118,9 @@
           :placeholder="
             $t(`INBOX_MGMT.ADD.TWILIO.${authTokeni18nKey}.PLACEHOLDER`)
           "
-          @blur="$v.authToken.$touch"
+          @blur="v$.authToken.$touch"
         />
-        <span v-if="$v.authToken.$error" class="message">
+        <span v-if="v$.authToken.$error" class="message">
           {{ $t(`INBOX_MGMT.ADD.TWILIO.${authTokeni18nKey}.ERROR`) }}
         </span>
       </label>
@@ -137,8 +137,9 @@
 
 <script>
 import { mapGetters } from 'vuex';
+import { useVuelidate } from '@vuelidate/core';
 import { useAlert } from 'dashboard/composables';
-import { required } from 'vuelidate/lib/validators';
+import { required } from '@vuelidate/validators';
 import router from '../../../../index';
 import { isPhoneE164OrEmpty } from 'shared/helpers/Validators';
 
@@ -149,6 +150,9 @@ export default {
       required: true,
     },
   },
+  setup() {
+    return { v$: useVuelidate() };
+  },
   data() {
     return {
       accountSID: '',
@@ -202,8 +206,8 @@ export default {
   },
   methods: {
     async createChannel() {
-      this.$v.$touch();
+      this.v$.$touch();
-      if (this.$v.$invalid) {
+      if (this.v$.$invalid) {
         return;
       }
 

app/javascript/dashboard/routes/dashboard/settings/inbox/channels/emailChannels/ForwardToOption.vue

@@ -8,7 +8,7 @@
     />
     <form class="flex flex-wrap mx-0" @submit.prevent="createChannel()">
       <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
-        <label :class="{ error: $v.channelName.$error }">
+        <label :class="{ error: v$.channelName.$error }">
           {{ $t('INBOX_MGMT.ADD.EMAIL_CHANNEL.CHANNEL_NAME.LABEL') }}
           <input
             v-model.trim="channelName"
@@ -16,22 +16,22 @@
             :placeholder="
               $t('INBOX_MGMT.ADD.EMAIL_CHANNEL.CHANNEL_NAME.PLACEHOLDER')
             "
-            @blur="$v.channelName.$touch"
+            @blur="v$.channelName.$touch"
           />
-          <span v-if="$v.channelName.$error" class="message">{{
+          <span v-if="v$.channelName.$error" class="message">{{
             $t('INBOX_MGMT.ADD.EMAIL_CHANNEL.CHANNEL_NAME.ERROR')
           }}</span>
         </label>
       </div>
 
       <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
-        <label :class="{ error: $v.email.$error }">
+        <label :class="{ error: v$.email.$error }">
           {{ $t('INBOX_MGMT.ADD.EMAIL_CHANNEL.EMAIL.LABEL') }}
           <input
             v-model.trim="email"
             type="text"
             :placeholder="$t('INBOX_MGMT.ADD.EMAIL_CHANNEL.EMAIL.PLACEHOLDER')"
-            @blur="$v.email.$touch"
+            @blur="v$.email.$touch"
           />
         </label>
         <p class="help-text">
@@ -51,8 +51,9 @@
 
 <script>
 import { mapGetters } from 'vuex';
+import { useVuelidate } from '@vuelidate/core';
 import { useAlert } from 'dashboard/composables';
-import { required, email } from 'vuelidate/lib/validators';
+import { required, email } from '@vuelidate/validators';
 import router from '../../../../../index';
 import PageHeader from '../../../SettingsSubPageHeader.vue';
 
@@ -60,6 +61,9 @@ export default {
   components: {
     PageHeader,
   },
+  setup() {
+    return { v$: useVuelidate() };
+  },
   data() {
     return {
       channelName: '',
@@ -78,8 +82,8 @@ export default {
   },
   methods: {
     async createChannel() {
-      this.$v.$touch();
+      this.v$.$touch();
-      if (this.$v.$invalid) {
+      if (this.v$.$invalid) {
         return;
       }
 

app/javascript/dashboard/routes/dashboard/settings/inbox/settingsPage/CollaboratorsPage.vue

@@ -17,7 +17,7 @@
         selected-label
         :select-label="$t('FORMS.MULTISELECT.ENTER_TO_SELECT')"
         :deselect-label="$t('FORMS.MULTISELECT.ENTER_TO_REMOVE')"
-        @select="$v.selectedAgents.$touch"
+        @select="v$.selectedAgents.$touch"
       />
 
       <woot-submit-button
@@ -56,10 +56,10 @@
         <woot-input
           v-model.trim="maxAssignmentLimit"
           type="number"
-          :class="{ error: $v.maxAssignmentLimit.$error }"
+          :class="{ error: v$.maxAssignmentLimit.$error }"
           :error="maxAssignmentLimitErrors"
           :label="$t('INBOX_MGMT.AUTO_ASSIGNMENT.MAX_ASSIGNMENT_LIMIT')"
-          @blur="$v.maxAssignmentLimit.$touch"
+          @blur="v$.maxAssignmentLimit.$touch"
         />
 
         <p class="pb-1 text-sm not-italic text-slate-600 dark:text-slate-400">
@@ -68,7 +68,7 @@
 
         <woot-submit-button
           :button-text="$t('INBOX_MGMT.SETTINGS_POPUP.UPDATE')"
-          :disabled="$v.maxAssignmentLimit.$invalid"
+          :disabled="v$.maxAssignmentLimit.$invalid"
           @click="updateInbox"
         />
       </div>
@@ -78,7 +78,8 @@
 
 <script>
 import { mapGetters } from 'vuex';
-import { minValue } from 'vuelidate/lib/validators';
+import { useVuelidate } from '@vuelidate/core';
+import { minValue } from '@vuelidate/validators';
 import { useAlert } from 'dashboard/composables';
 import configMixin from 'shared/mixins/configMixin';
 import SettingsSection from '../../../../../components/SettingsSection.vue';
@@ -94,6 +95,9 @@ export default {
       default: () => ({}),
     },
   },
+  setup() {
+    return { v$: useVuelidate() };
+  },
   data() {
     return {
       selectedAgents: [],
@@ -107,7 +111,7 @@ export default {
       agentList: 'agents/getAgents',
     }),
     maxAssignmentLimitErrors() {
-      if (this.$v.maxAssignmentLimit.$error) {
+      if (this.v$.maxAssignmentLimit.$error) {
         return this.$t(
           'INBOX_MGMT.AUTO_ASSIGNMENT.MAX_ASSIGNMENT_LIMIT_RANGE_ERROR'
         );

app/javascript/dashboard/routes/dashboard/settings/inbox/settingsPage/ConfigurationPage.vue

@@ -139,7 +139,7 @@
             "
           />
           <woot-button
-            :disabled="$v.whatsAppInboxAPIKey.$invalid"
+            :disabled="v$.whatsAppInboxAPIKey.$invalid"
             @click="updateWhatsAppInboxAPIKey"
           >
             {{ $t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_SECTION_UPDATE_BUTTON') }}
@@ -156,7 +156,8 @@ import inboxMixin from 'shared/mixins/inboxMixin';
 import SettingsSection from '../../../../../components/SettingsSection.vue';
 import ImapSettings from '../ImapSettings.vue';
 import SmtpSettings from '../SmtpSettings.vue';
-import { required } from 'vuelidate/lib/validators';
+import { useVuelidate } from '@vuelidate/core';
+import { required } from '@vuelidate/validators';
 
 export default {
   components: {
@@ -171,6 +172,9 @@ export default {
       default: () => ({}),
     },
   },
+  setup() {
+    return { v$: useVuelidate() };
+  },
   data() {
     return {
       hmacMandatory: false,

app/javascript/dashboard/routes/dashboard/settings/integrations/DashboardApps/DashboardAppModal.vue

@@ -5,40 +5,40 @@
       <form class="w-full" @submit.prevent="submit">
         <woot-input
           v-model.trim="app.title"
-          :class="{ error: $v.app.title.$error }"
+          :class="{ error: v$.app.title.$error }"
           class="w-full"
           :label="$t('INTEGRATION_SETTINGS.DASHBOARD_APPS.FORM.TITLE_LABEL')"
           :placeholder="
             $t('INTEGRATION_SETTINGS.DASHBOARD_APPS.FORM.TITLE_PLACEHOLDER')
           "
           :error="
-            $v.app.title.$error
+            v$.app.title.$error
               ? $t('INTEGRATION_SETTINGS.DASHBOARD_APPS.FORM.TITLE_ERROR')
               : null
           "
           data-testid="app-title"
-          @input="$v.app.title.$touch"
+          @input="v$.app.title.$touch"
         />
         <woot-input
           v-model.trim="app.content.url"
-          :class="{ error: $v.app.content.url.$error }"
+          :class="{ error: v$.app.content.url.$error }"
           class="w-full"
           :label="$t('INTEGRATION_SETTINGS.DASHBOARD_APPS.FORM.URL_LABEL')"
           :placeholder="
             $t('INTEGRATION_SETTINGS.DASHBOARD_APPS.FORM.URL_PLACEHOLDER')
           "
           :error="
-            $v.app.content.url.$error
+            v$.app.content.url.$error
               ? $t('INTEGRATION_SETTINGS.DASHBOARD_APPS.FORM.URL_ERROR')
               : null
           "
           data-testid="app-url"
-          @input="$v.app.content.url.$touch"
+          @input="v$.app.content.url.$touch"
         />
         <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
           <woot-button
             :is-loading="isLoading"
-            :is-disabled="$v.$invalid"
+            :is-disabled="v$.$invalid"
             data-testid="label-submit"
           >
             {{ submitButtonLabel }}
@@ -53,7 +53,8 @@
 </template>
 
 <script>
-import { required, url } from 'vuelidate/lib/validators';
+import { useVuelidate } from '@vuelidate/core';
+import { required, url } from '@vuelidate/validators';
 import { useAlert } from 'dashboard/composables';
 
 export default {
@@ -71,6 +72,9 @@ export default {
       default: () => ({}),
     },
   },
+  setup() {
+    return { v$: useVuelidate() };
+  },
   validations: {
     app: {
       title: { required },
@@ -119,8 +123,8 @@ export default {
     },
     async submit() {
       try {
-        this.$v.$touch();
+        this.v$.$touch();
-        if (this.$v.$invalid) {
+        if (this.v$.$invalid) {
           return;
         }
 

app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/WebhookForm.vue

@@ -1,20 +1,20 @@
 <template>
   <form class="flex flex-col w-full" @submit.prevent="onSubmit">
     <div class="w-full">
-      <label :class="{ error: $v.url.$error }">
+      <label :class="{ error: v$.url.$error }">
         {{ $t('INTEGRATION_SETTINGS.WEBHOOK.FORM.END_POINT.LABEL') }}
         <input
           v-model.trim="url"
           type="text"
           name="url"
           :placeholder="webhookURLInputPlaceholder"
-          @input="$v.url.$touch"
+          @input="v$.url.$touch"
         />
-        <span v-if="$v.url.$error" class="message">
+        <span v-if="v$.url.$error" class="message">
           {{ $t('INTEGRATION_SETTINGS.WEBHOOK.FORM.END_POINT.ERROR') }}
         </span>
       </label>
-      <label :class="{ error: $v.url.$error }" class="mb-2">
+      <label :class="{ error: v$.url.$error }" class="mb-2">
         {{ $t('INTEGRATION_SETTINGS.WEBHOOK.FORM.SUBSCRIPTIONS.LABEL') }}
       </label>
       <div class="flex flex-col gap-2.5 mb-4">
@@ -41,7 +41,7 @@
     <div class="flex flex-row justify-end gap-2 py-2 px-0 w-full">
       <div class="w-full">
         <woot-button
-          :disabled="$v.$invalid || isSubmitting"
+          :disabled="v$.$invalid || isSubmitting"
           :is-loading="isSubmitting"
         >
           {{ submitLabel }}
@@ -55,7 +55,8 @@
 </template>
 
 <script>
-import { required, url, minLength } from 'vuelidate/lib/validators';
+import { useVuelidate } from '@vuelidate/core';
+import { required, url, minLength } from '@vuelidate/validators';
 import webhookMixin from './webhookMixin';
 import wootConstants from 'dashboard/constants/globals';
 
@@ -88,6 +89,9 @@ export default {
       required: true,
     },
   },
+  setup() {
+    return { v$: useVuelidate() };
+  },
   validations: {
     url: {
       required,

app/javascript/dashboard/routes/dashboard/settings/labels/AddLabel.vue

@@ -7,23 +7,23 @@
     <form class="flex flex-wrap mx-0" @submit.prevent="addLabel">
       <woot-input
         v-model.trim="title"
-        :class="{ error: $v.title.$error }"
+        :class="{ error: v$.title.$error }"
         class="w-full label-name--input"
         :label="$t('LABEL_MGMT.FORM.NAME.LABEL')"
         :placeholder="$t('LABEL_MGMT.FORM.NAME.PLACEHOLDER')"
         :error="labelTitleErrorMessage"
         data-testid="label-title"
-        @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('LABEL_MGMT.FORM.DESCRIPTION.LABEL')"
         :placeholder="$t('LABEL_MGMT.FORM.DESCRIPTION.PLACEHOLDER')"
         data-testid="label-description"
-        @input="$v.description.$touch"
+        @input="v$.description.$touch"
       />
 
       <div class="w-full">
@@ -40,7 +40,7 @@
       </div>
       <div class="flex items-center justify-end w-full gap-2 px-0 py-2">
         <woot-button
-          :is-disabled="$v.title.$invalid || uiFlags.isCreating"
+          :is-disabled="v$.title.$invalid || uiFlags.isCreating"
           :is-loading="uiFlags.isCreating"
           data-testid="label-submit"
         >
@@ -59,6 +59,7 @@ import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
 import validations, { getLabelTitleErrorMessage } from './validations';
 import { getRandomColor } from 'dashboard/helper/labelColor';
+import { useVuelidate } from '@vuelidate/core';
 
 export default {
   props: {
@@ -67,6 +68,9 @@ export default {
       default: '',
     },
   },
+  setup() {
+    return { v$: useVuelidate() };
+  },
   data() {
     return {
       color: '#000',
@@ -81,7 +85,7 @@ export default {
       uiFlags: 'labels/getUIFlags',
     }),
     labelTitleErrorMessage() {
-      const errorMessage = getLabelTitleErrorMessage(this.$v);
+      const errorMessage = getLabelTitleErrorMessage(this.v$);
       return this.$t(errorMessage);
     },
   },

app/javascript/dashboard/routes/dashboard/settings/labels/EditLabel.vue

@@ -4,20 +4,20 @@
     <form class="flex flex-wrap mx-0" @submit.prevent="editLabel">
       <woot-input
         v-model.trim="title"
-        :class="{ error: $v.title.$error }"
+        :class="{ error: v$.title.$error }"
         class="w-full label-name--input"
         :label="$t('LABEL_MGMT.FORM.NAME.LABEL')"
         :placeholder="$t('LABEL_MGMT.FORM.NAME.PLACEHOLDER')"
         :error="labelTitleErrorMessage"
-        @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('LABEL_MGMT.FORM.DESCRIPTION.LABEL')"
         :placeholder="$t('LABEL_MGMT.FORM.DESCRIPTION.PLACEHOLDER')"
-        @input="$v.description.$touch"
+        @input="v$.description.$touch"
       />
 
       <div class="w-full">
@@ -34,7 +34,7 @@
       </div>
       <div class="flex items-center justify-end w-full gap-2 px-0 py-2">
         <woot-button
-          :is-disabled="$v.title.$invalid || uiFlags.isUpdating"
+          :is-disabled="v$.title.$invalid || uiFlags.isUpdating"
           :is-loading="uiFlags.isUpdating"
         >
           {{ $t('LABEL_MGMT.FORM.EDIT') }}
@@ -51,6 +51,7 @@
 import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
 import validations, { getLabelTitleErrorMessage } from './validations';
+import { useVuelidate } from '@vuelidate/core';
 
 export default {
   props: {
@@ -59,6 +60,9 @@ export default {
       default: () => {},
     },
   },
+  setup() {
+    return { v$: useVuelidate() };
+  },
   data() {
     return {
       title: '',
@@ -78,7 +82,7 @@ export default {
       }`;
     },
     labelTitleErrorMessage() {
-      const errorMessage = getLabelTitleErrorMessage(this.$v);
+      const errorMessage = getLabelTitleErrorMessage(this.v$);
       return this.$t(errorMessage);
     },
   },

app/javascript/dashboard/routes/dashboard/settings/labels/validations.js

@@ -1,4 +1,4 @@
-import { required, minLength } from 'vuelidate/lib/validators';
+import { required, minLength } from '@vuelidate/validators';
 
 export const validLabelCharacters = (str = '') => !!str && !str.includes(' ');
 

app/javascript/dashboard/routes/dashboard/settings/macros/MacroForm.vue

@@ -6,6 +6,7 @@
       <macro-nodes
         v-model="macro.actions"
         :files="files"
+        :errors="errors"
         @addNewNode="appendNode"
         @deleteNode="deleteNode"
         @resetAction="resetNode"
@@ -24,29 +25,34 @@
 </template>
 
 <script>
+import { provide } from 'vue';
 import MacroNodes from './MacroNodes.vue';
 import MacroProperties from './MacroProperties.vue';
-import { required, requiredIf } from 'vuelidate/lib/validators';
+import { required } from '@vuelidate/validators';
+import { useVuelidate } from '@vuelidate/core';
+import { validateActions } from 'dashboard/helper/validations';
 
 export default {
   components: {
     MacroNodes,
     MacroProperties,
   },
-  provide() {
-    return {
-      $v: this.$v,
-    };
-  },
   props: {
     macroData: {
       type: Object,
       default: () => ({}),
     },
   },
+  setup() {
+    const v$ = useVuelidate();
+    provide('v$', v$);
+
+    return { v$ };
+  },
   data() {
     return {
       macro: this.macroData,
+      errors: {},
     };
   },
   computed: {
@@ -77,25 +83,14 @@ export default {
       visibility: {
         required,
       },
-      actions: {
-        required,
-        $each: {
-          action_params: {
-            required: requiredIf(prop => {
-              if (prop.action_name === 'send_email_to_team') return true;
-              return !(
-                prop.action_name === 'mute_conversation' ||
-                prop.action_name === 'snooze_conversation' ||
-                prop.action_name === 'resolve_conversation' ||
-                prop.action_name === 'remove_assigned_team'
-              );
-            }),
-          },
-        },
-      },
     },
   },
   methods: {
+    removeObjectProperty(obj, keyToRemove) {
+      return Object.fromEntries(
+        Object.entries(obj).filter(([key]) => key !== keyToRemove)
+      );
+    },
     updateName(value) {
       this.macro.name = value;
     },
@@ -109,19 +104,29 @@ export default {
       });
     },
     deleteNode(index) {
+      // remove that index specifically
+      // so that the next item does not get marked invalid
+      this.errors = this.removeObjectProperty(this.errors, `action_${index}`);
       this.macro.actions.splice(index, 1);
     },
     submit() {
-      this.$v.$touch();
+      this.errors = validateActions(this.macro.actions);
-      if (this.$v.$invalid) return;
+      if (Object.keys(this.errors).length !== 0) return;
+
+      this.v$.$touch();
+      if (this.v$.$invalid) return;
+
       this.$emit('submit', this.macro);
     },
     resetNode(index) {
-      this.$v.macro.actions.$each[index].$reset();
+      // remove that index specifically
+      // so that the next item does not get marked invalid
+      this.errors = this.removeObjectProperty(this.errors, `action_${index}`);
       this.macro.actions[index].action_params = [];
     },
     resetValidation() {
-      this.$v.$reset();
+      this.errors = {};
+      this.v$?.$reset?.();
     },
   },
 };

app/javascript/dashboard/routes/dashboard/settings/macros/MacroNode.vue

@@ -11,7 +11,7 @@
     <div
       class="macro__node-action-item"
       :class="{
-        'has-error': hasError($v.macro.actions.$each[index]),
+        'has-error': errorKey,
       }"
     >
       <action-input
@@ -21,7 +21,7 @@
         :show-action-input="showActionInput"
         :show-remove-button="false"
         :is-macro="true"
-        :v="$v.macro.actions.$each[index]"
+        :error-message="errorMessage"
         :initial-file-name="fileName"
         @resetAction="$emit('resetAction')"
       />
@@ -39,6 +39,7 @@
 </template>
 
 <script>
+import { inject } from 'vue';
 import ActionInput from 'dashboard/components/widgets/AutomationActionInput.vue';
 import macrosMixin from 'dashboard/mixins/macrosMixin';
 import { mapGetters } from 'vuex';
@@ -48,7 +49,6 @@ export default {
     ActionInput,
   },
   mixins: [macrosMixin],
-  inject: ['macroActionTypes', '$v'],
   props: {
     singleNode: {
       type: Boolean,
@@ -58,6 +58,10 @@ export default {
       type: Object,
       default: () => ({}),
     },
+    errorKey: {
+      type: String,
+      default: '',
+    },
     index: {
       type: Number,
       default: 0,
@@ -67,6 +71,10 @@ export default {
       default: '',
     },
   },
+  setup() {
+    const macroActionTypes = inject('macroActionTypes');
+    return { macroActionTypes };
+  },
   computed: {
     ...mapGetters({
       labels: 'labels/getLabels',
@@ -81,6 +89,11 @@ export default {
         this.$emit('input', value);
       },
     },
+    errorMessage() {
+      if (!this.errorKey) return '';
+
+      return this.$t(`MACROS.ERRORS.${this.errorKey}`);
+    },
     showActionInput() {
       if (
         this.actionData.action_name === 'send_email_to_team' ||
@@ -97,9 +110,6 @@ export default {
     dropdownValues() {
       return this.getDropdownValues(this.value.action_name, this.$store);
     },
-    hasError(v) {
-      return !!(v.action_params.$dirty && v.action_params.$error);
-    },
   },
 };
 </script>

app/javascript/dashboard/routes/dashboard/settings/macros/MacroNodes.vue

@@ -22,6 +22,7 @@
           class="macros__node-action"
           type="add"
           :index="i"
+          :error-key="errors[`action_${i}`]"
           :file-name="
             fileName(
               actionData[i].action_params[0],
@@ -64,12 +65,17 @@
 import Draggable from 'vuedraggable';
 import MacroNode from './MacroNode.vue';
 import { getFileName } from './macroHelper';
+
 export default {
   components: {
     Draggable,
     MacroNode,
   },
   props: {
+    errors: {
+      type: Object,
+      default: () => ({}),
+    },
     value: {
       type: Array,
       default: () => [],

app/javascript/dashboard/routes/dashboard/settings/macros/MacroProperties.vue

@@ -7,8 +7,8 @@
         :value="macroName"
         :label="$t('MACROS.ADD.FORM.NAME.LABEL')"
         :placeholder="$t('MACROS.ADD.FORM.NAME.PLACEHOLDER')"
-        :error="$v.macro.name.$error ? $t('MACROS.ADD.FORM.NAME.ERROR') : null"
+        :error="v$.macro.name.$error ? $t('MACROS.ADD.FORM.NAME.ERROR') : null"
-        :class="{ error: $v.macro.name.$error }"
+        :class="{ error: v$.macro.name.$error }"
         @input="onUpdateName($event)"
       />
     </div>
@@ -86,7 +86,7 @@
 
 <script>
 export default {
-  inject: ['$v'],
+  inject: ['v$'],
   props: {
     macroName: {
       type: String,

app/javascript/dashboard/routes/dashboard/settings/profile/ChangePassword.vue

@@ -5,45 +5,45 @@
         v-model="currentPassword"
         type="password"
         :styles="inputStyles"
-        :class="{ error: $v.currentPassword.$error }"
+        :class="{ error: v$.currentPassword.$error }"
         :label="$t('PROFILE_SETTINGS.FORM.CURRENT_PASSWORD.LABEL')"
         :placeholder="$t('PROFILE_SETTINGS.FORM.CURRENT_PASSWORD.PLACEHOLDER')"
         :error="`${
-          $v.currentPassword.$error
+          v$.currentPassword.$error
             ? $t('PROFILE_SETTINGS.FORM.CURRENT_PASSWORD.ERROR')
             : ''
         }`"
-        @input="$v.currentPassword.$touch"
+        @input="v$.currentPassword.$touch"
       />
 
       <woot-input
         v-model="password"
         type="password"
         :styles="inputStyles"
-        :class="{ error: $v.password.$error }"
+        :class="{ error: v$.password.$error }"
         :label="$t('PROFILE_SETTINGS.FORM.PASSWORD.LABEL')"
         :placeholder="$t('PROFILE_SETTINGS.FORM.PASSWORD.PLACEHOLDER')"
         :error="`${
-          $v.password.$error ? $t('PROFILE_SETTINGS.FORM.PASSWORD.ERROR') : ''
+          v$.password.$error ? $t('PROFILE_SETTINGS.FORM.PASSWORD.ERROR') : ''
         }`"
-        @input="$v.password.$touch"
+        @input="v$.password.$touch"
       />
 
       <woot-input
         v-model="passwordConfirmation"
         type="password"
         :styles="inputStyles"
-        :class="{ error: $v.passwordConfirmation.$error }"
+        :class="{ error: v$.passwordConfirmation.$error }"
         :label="$t('PROFILE_SETTINGS.FORM.PASSWORD_CONFIRMATION.LABEL')"
         :placeholder="
           $t('PROFILE_SETTINGS.FORM.PASSWORD_CONFIRMATION.PLACEHOLDER')
         "
         :error="`${
-          $v.passwordConfirmation.$error
+          v$.passwordConfirmation.$error
             ? $t('PROFILE_SETTINGS.FORM.PASSWORD_CONFIRMATION.ERROR')
             : ''
         }`"
-        @input="$v.passwordConfirmation.$touch"
+        @input="v$.passwordConfirmation.$touch"
       />
 
       <form-button
@@ -60,14 +60,19 @@
 </template>
 
 <script>
-import { required, minLength } from 'vuelidate/lib/validators';
+import { useVuelidate } from '@vuelidate/core';
+import { required, minLength } from '@vuelidate/validators';
 import { useAlert } from 'dashboard/composables';
 import { parseAPIErrorResponse } from 'dashboard/store/utils/api';
 import FormButton from 'v3/components/Form/Button.vue';
+
 export default {
   components: {
     FormButton,
   },
+  setup() {
+    return { v$: useVuelidate() };
+  },
   data() {
     return {
       currentPassword: '',
@@ -105,14 +110,14 @@ export default {
       return (
         !this.currentPassword ||
         !this.passwordConfirmation ||
-        !this.$v.passwordConfirmation.isEqPassword
+        !this.v$.passwordConfirmation.isEqPassword
       );
     },
   },
   methods: {
     async changePassword() {
-      this.$v.$touch();
+      this.v$.$touch();
-      if (this.$v.$invalid) {
+      if (this.v$.$invalid) {
         useAlert(this.$t('PROFILE_SETTINGS.FORM.ERROR'));
         return;
       }

app/javascript/dashboard/routes/dashboard/settings/profile/UserBasicDetails.vue

@@ -3,38 +3,38 @@
     <woot-input
       v-model="userName"
       :styles="inputStyles"
-      :class="{ error: $v.userName.$error }"
+      :class="{ error: v$.userName.$error }"
       :label="$t('PROFILE_SETTINGS.FORM.NAME.LABEL')"
       :placeholder="$t('PROFILE_SETTINGS.FORM.NAME.PLACEHOLDER')"
       :error="`${
-        $v.userName.$error ? $t('PROFILE_SETTINGS.FORM.NAME.ERROR') : ''
+        v$.userName.$error ? $t('PROFILE_SETTINGS.FORM.NAME.ERROR') : ''
       }`"
-      @input="$v.userName.$touch"
+      @input="v$.userName.$touch"
     />
     <woot-input
       v-model="userDisplayName"
       :styles="inputStyles"
-      :class="{ error: $v.userDisplayName.$error }"
+      :class="{ error: v$.userDisplayName.$error }"
       :label="$t('PROFILE_SETTINGS.FORM.DISPLAY_NAME.LABEL')"
       :placeholder="$t('PROFILE_SETTINGS.FORM.DISPLAY_NAME.PLACEHOLDER')"
       :error="`${
-        $v.userDisplayName.$error
+        v$.userDisplayName.$error
           ? $t('PROFILE_SETTINGS.FORM.DISPLAY_NAME.ERROR')
           : ''
       }`"
-      @input="$v.userDisplayName.$touch"
+      @input="v$.userDisplayName.$touch"
     />
     <woot-input
       v-if="emailEnabled"
       v-model="userEmail"
       :styles="inputStyles"
-      :class="{ error: $v.userEmail.$error }"
+      :class="{ error: v$.userEmail.$error }"
       :label="$t('PROFILE_SETTINGS.FORM.EMAIL.LABEL')"
       :placeholder="$t('PROFILE_SETTINGS.FORM.EMAIL.PLACEHOLDER')"
       :error="`${
-        $v.userEmail.$error ? $t('PROFILE_SETTINGS.FORM.EMAIL.ERROR') : ''
+        v$.userEmail.$error ? $t('PROFILE_SETTINGS.FORM.EMAIL.ERROR') : ''
       }`"
-      @input="$v.userEmail.$touch"
+      @input="v$.userEmail.$touch"
     />
     <form-button
       type="submit"
@@ -49,7 +49,8 @@
 <script>
 import { useAlert } from 'dashboard/composables';
 import FormButton from 'v3/components/Form/Button.vue';
-import { required, minLength, email } from 'vuelidate/lib/validators';
+import { useVuelidate } from '@vuelidate/core';
+import { required, minLength, email } from '@vuelidate/validators';
 export default {
   components: {
     FormButton,
@@ -72,6 +73,9 @@ export default {
       default: false,
     },
   },
+  setup() {
+    return { v$: useVuelidate() };
+  },
   data() {
     return {
       userName: this.name,
@@ -118,8 +122,8 @@ export default {
   },
   methods: {
     async updateUser() {
-      this.$v.$touch();
+      this.v$.$touch();
-      if (this.$v.$invalid) {
+      if (this.v$.$invalid) {
         useAlert(this.$t('PROFILE_SETTINGS.FORM.ERROR'));
         return;
       }

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="slaNameErrorMessage"
-        @input="$v.name.$touch"
+        @input="v$.name.$touch"
       />
       <woot-input
         v-model="description"
@@ -72,6 +72,7 @@ import { mapGetters } from 'vuex';
 import { convertSecondsToTimeUnit } from '@chatwoot/utils';
 import validations from './validations';
 import SlaTimeInput from './SlaTimeInput.vue';
+import { useVuelidate } from '@vuelidate/core';
 
 export default {
   components: {
@@ -87,6 +88,9 @@ export default {
       required: true,
     },
   },
+  setup() {
+    return { v$: useVuelidate() };
+  },
   data() {
     return {
       name: '',
@@ -123,17 +127,17 @@ export default {
     }),
     isSubmitDisabled() {
       return (
-        this.$v.name.$invalid ||
+        this.v$.name.$invalid ||
         this.isSlaTimeInputsInvalid ||
         this.uiFlags.isUpdating
       );
     },
     slaNameErrorMessage() {
       let errorMessage = '';
-      if (this.$v.name.$error) {
+      if (this.v$.name.$error) {
-        if (!this.$v.name.required) {
+        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');
         }
       }

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',
@@ -35,6 +35,7 @@
 
 <script>
 import validations from './validations';
+import { useVuelidate } from '@vuelidate/core';
 
 export default {
   props: {
@@ -55,6 +56,9 @@ export default {
       default: '',
     },
   },
+  setup() {
+    return { v$: useVuelidate() };
+  },
   data() {
     return {
       thresholdTime: this.threshold || '',
@@ -70,8 +74,8 @@ export default {
   computed: {
     thresholdTimeErrorMessage() {
       let errorMessage = '';
-      if (this.$v.thresholdTime.$error) {
+      if (this.v$.thresholdTime.$error) {
-        if (!this.$v.thresholdTime.numeric || !this.$v.thresholdTime.minValue) {
+        if (!this.v$.thresholdTime.numeric || !this.v$.thresholdTime.minValue) {
           errorMessage = this.$t(
             'SLA.FORM.THRESHOLD_TIME.INVALID_FORMAT_ERROR'
           );
@@ -101,8 +105,8 @@ export default {
       this.$emit('unit', this.thresholdUnitValue);
     },
     onThresholdTimeChange() {
-      this.$v.thresholdTime.$touch();
+      this.v$.thresholdTime.$touch();
-      const isInvalid = this.$v.thresholdTime.$invalid;
+      const isInvalid = this.v$.thresholdTime.$invalid;
       this.$emit('isInValid', isInvalid);
       this.$emit('input', Number(this.thresholdTime));
     },

app/javascript/dashboard/routes/dashboard/settings/sla/validations.js

@@ -1,9 +1,4 @@
-import {
+import { required, minLength, minValue, decimal } from '@vuelidate/validators';
-  required,
-  minLength,
-  minValue,
-  decimal,
-} from 'vuelidate/lib/validators';
 
 export default {
   name: {

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 { useAlert } from 'dashboard/composables';
 import router from '../../../../index';
 import PageHeader from '../../SettingsSubPageHeader.vue';
 import AgentSelector from '../AgentSelector.vue';
+import { useVuelidate } from '@vuelidate/core';
 
 export default {
   components: {
@@ -58,6 +59,10 @@ export default {
     },
   },
 
+  setup() {
+    return { v$: useVuelidate() };
+  },
+
   data() {
     return {
       selectedAgents: [],
@@ -89,7 +94,7 @@ export default {
 
   methods: {
     updateSelectedAgents(newAgentList) {
-      this.$v.selectedAgents.$touch();
+      this.v$.selectedAgents.$touch();
       this.selectedAgents = [...newAgentList];
     },
     selectAllAgents() {

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>
@@ -37,10 +37,11 @@
 
 <script>
 import { mapGetters } from 'vuex';
+import router from '../../../../index';
 import { useAlert } from 'dashboard/composables';
+import { useVuelidate } from '@vuelidate/core';
 
 import Spinner from 'shared/components/Spinner.vue';
-import router from '../../../../index';
 import PageHeader from '../../SettingsSubPageHeader.vue';
 import AgentSelector from '../AgentSelector.vue';
 
@@ -64,7 +65,9 @@ export default {
       },
     },
   },
-
+  setup() {
+    return { v$: useVuelidate() };
+  },
   data() {
     return {
       selectedAgents: [],
@@ -114,7 +117,7 @@ export default {
 
   methods: {
     updateSelectedAgents(newAgentList) {
-      this.$v.selectedAgents.$touch();
+      this.v$.selectedAgents.$touch();
       this.selectedAgents = [...newAgentList];
     },
     async addAgents() {

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();
+      this.v$.$touch();
-      if (this.$v.$invalid) {
+      if (this.v$.$invalid) {
         return;
       }
       this.onSubmit({

app/javascript/dashboard/routes/dashboard/settings/teams/helpers/validations.js

@@ -1,4 +1,4 @@
-import { required, minLength } from 'vuelidate/lib/validators';
+import { required, minLength } from '@vuelidate/validators';
 
 export default {
   title: {

app/javascript/packs/application.js

@@ -9,7 +9,6 @@ import VueFormulate from '@braid/vue-formulate';
 import WootSwitch from 'components/ui/Switch';
 import WootWizard from 'components/ui/Wizard';
 import { sync } from 'vuex-router-sync';
-import Vuelidate from 'vuelidate';
 import VTooltip from 'v-tooltip';
 import WootUiKit from '../dashboard/components';
 import App from '../dashboard/App';
@@ -65,7 +64,6 @@ Vue.use(VueDOMPurifyHTML, domPurifyConfig);
 Vue.use(VueRouter);
 Vue.use(VueI18n);
 Vue.use(WootUiKit);
-Vue.use(Vuelidate);
 Vue.use(VueFormulate, {
   rules: {
     JSON: ({ value }) => isJSONValid(value),

app/javascript/packs/survey.js

@@ -1,5 +1,4 @@
 import Vue from 'vue';
-import Vuelidate from 'vuelidate';
 import VueI18n from 'vue-i18n';
 import App from '../survey/App.vue';
 import i18n from '../survey/i18n';
@@ -7,7 +6,6 @@ import store from '../survey/store';
 import { emitter } from 'shared/helpers/mitt';
 
 Vue.use(VueI18n);
-Vue.use(Vuelidate);
 
 const i18nConfig = new VueI18n({
   locale: 'en',

app/javascript/packs/v3app.js

@@ -1,7 +1,6 @@
 import Vue from 'vue';
 import VueI18n from 'vue-i18n';
 import VueRouter from 'vue-router';
-import Vuelidate from 'vuelidate';
 import i18n from 'dashboard/i18n';
 import * as Sentry from '@sentry/vue';
 import { Integrations } from '@sentry/tracing';
@@ -44,7 +43,7 @@ if (window.errorLoggingConfig) {
 
 Vue.use(VueRouter);
 Vue.use(VueI18n);
-Vue.use(Vuelidate);
+
 Vue.use(AnalyticsPlugin);
 Vue.prototype.$emitter = emitter;
 Vue.component('fluent-icon', FluentIcon);

app/javascript/packs/widget.js

@@ -1,5 +1,4 @@
 import Vue from 'vue';
-import Vuelidate from 'vuelidate';
 import VueI18n from 'vue-i18n';
 import VueDOMPurifyHTML from 'vue-dompurify-html';
 import VueFormulate from '@braid/vue-formulate';
@@ -18,7 +17,7 @@ import { domPurifyConfig } from '../shared/helpers/HTMLSanitizer';
 const PhoneInput = () => import('../widget/components/Form/PhoneInput');
 
 Vue.use(VueI18n);
-Vue.use(Vuelidate);
+
 Vue.use(VueDOMPurifyHTML, domPurifyConfig);
 Vue.directive('on-clickaway', onClickaway);
 

app/javascript/shared/mixins/specs/automationMixin.spec.js

@@ -1,5 +1,4 @@
 import methodsMixin from '../../../dashboard/mixins/automations/methodsMixin';
-import validationsMixin from '../../../dashboard/mixins/automations/validationsMixin';
 import {
   automation,
   customAttributes,
@@ -30,8 +29,6 @@ const localVue = createLocalVue();
 localVue.use(Vuex);
 
 // Vuelidate required to test submit method
-import Vuelidate from 'vuelidate';
-Vue.use(Vuelidate);
 
 const createComponent = (
   mixins,
@@ -451,13 +448,3 @@ describe('automationMethodsMixin', () => {
     );
   });
 });
-
-describe('automationValidationsMixin', () => {
-  it('automationValidationsMixin is present', () => {
-    const data = () => {
-      return {};
-    };
-    const wrapper = createComponent([validationsMixin], data, {}, {});
-    expect(typeof wrapper.vm.$options.validations).toBe('object');
-  });
-});

app/javascript/shared/mixins/specs/whatsappTemplates/whatsappTemplates.spec.js

@@ -3,11 +3,9 @@ import { shallowMount, createLocalVue } from '@vue/test-utils';
 import { templates } from './fixtures';
 const localVue = createLocalVue();
 import VueI18n from 'vue-i18n';
-import Vuelidate from 'vuelidate';
 import i18n from 'dashboard/i18n';
 
 localVue.use(VueI18n);
-localVue.use(Vuelidate);
 
 const i18nConfig = new VueI18n({ locale: 'en', messages: i18n });
 const config = {

app/javascript/v3/views/auth/password/Edit.vue

@@ -18,25 +18,25 @@
           class="mt-3"
           name="password"
           type="password"
-          :has-error="$v.credentials.password.$error"
+          :has-error="v$.credentials.password.$error"
           :error-message="$t('SET_NEW_PASSWORD.PASSWORD.ERROR')"
           :placeholder="$t('SET_NEW_PASSWORD.PASSWORD.PLACEHOLDER')"
-          @blur="$v.credentials.password.$touch"
+          @blur="v$.credentials.password.$touch"
         />
         <form-input
           v-model.trim="credentials.confirmPassword"
           class="mt-3"
           name="confirm_password"
           type="password"
-          :has-error="$v.credentials.confirmPassword.$error"
+          :has-error="v$.credentials.confirmPassword.$error"
           :error-message="$t('SET_NEW_PASSWORD.CONFIRM_PASSWORD.ERROR')"
           :placeholder="$t('SET_NEW_PASSWORD.CONFIRM_PASSWORD.PLACEHOLDER')"
-          @blur="$v.credentials.confirmPassword.$touch"
+          @blur="v$.credentials.confirmPassword.$touch"
         />
         <submit-button
           :disabled="
-            $v.credentials.password.$invalid ||
+            v$.credentials.password.$invalid ||
-            $v.credentials.confirmPassword.$invalid ||
+            v$.credentials.confirmPassword.$invalid ||
             newPasswordAPI.showLoading
           "
           :button-text="$t('SET_NEW_PASSWORD.SUBMIT')"
@@ -48,7 +48,8 @@
 </template>
 
 <script>
-import { required, minLength } from 'vuelidate/lib/validators';
+import { useVuelidate } from '@vuelidate/core';
+import { required, minLength } from '@vuelidate/validators';
 import { useAlert } from 'dashboard/composables';
 import FormInput from '../../../components/Form/Input.vue';
 import SubmitButton from '../../../components/Button/SubmitButton.vue';
@@ -65,6 +66,9 @@ export default {
     redirectUrl: { type: String, default: '' },
     config: { type: String, default: '' },
   },
+  setup() {
+    return { v$: useVuelidate() };
+  },
   data() {
     return {
       // We need to initialize the component with any

app/javascript/v3/views/auth/reset/password/Index.vue

@@ -25,13 +25,13 @@
         <form-input
           v-model.trim="credentials.email"
           name="email_address"
-          :has-error="$v.credentials.email.$error"
+          :has-error="v$.credentials.email.$error"
           :error-message="$t('RESET_PASSWORD.EMAIL.ERROR')"
           :placeholder="$t('RESET_PASSWORD.EMAIL.PLACEHOLDER')"
-          @input="$v.credentials.email.$touch"
+          @input="v$.credentials.email.$touch"
         />
         <SubmitButton
-          :disabled="$v.credentials.email.$invalid || resetPassword.showLoading"
+          :disabled="v$.credentials.email.$invalid || resetPassword.showLoading"
           :button-text="$t('RESET_PASSWORD.SUBMIT')"
           :loading="resetPassword.showLoading"
         />
@@ -47,9 +47,10 @@
 </template>
 
 <script>
+import { useVuelidate } from '@vuelidate/core';
 import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
-import { required, minLength, email } from 'vuelidate/lib/validators';
+import { required, minLength, email } from '@vuelidate/validators';
 import globalConfigMixin from 'shared/mixins/globalConfigMixin';
 import FormInput from '../../../../components/Form/Input.vue';
 import { resetPassword } from '../../../../api/auth';
@@ -58,6 +59,9 @@ import SubmitButton from '../../../../components/Button/SubmitButton.vue';
 export default {
   components: { FormInput, SubmitButton },
   mixins: [globalConfigMixin],
+  setup() {
+    return { v$: useVuelidate() };
+  },
   data() {
     return {
       credentials: { email: '' },

app/javascript/v3/views/auth/signup/components/Signup/Form.vue

@@ -6,46 +6,46 @@
           v-model.trim="credentials.fullName"
           name="full_name"
           class="flex-1"
-          :class="{ error: $v.credentials.fullName.$error }"
+          :class="{ error: v$.credentials.fullName.$error }"
           :label="$t('REGISTER.FULL_NAME.LABEL')"
           :placeholder="$t('REGISTER.FULL_NAME.PLACEHOLDER')"
-          :has-error="$v.credentials.fullName.$error"
+          :has-error="v$.credentials.fullName.$error"
           :error-message="$t('REGISTER.FULL_NAME.ERROR')"
-          @blur="$v.credentials.fullName.$touch"
+          @blur="v$.credentials.fullName.$touch"
         />
         <form-input
           v-model.trim="credentials.accountName"
           name="account_name"
           class="flex-1 ml-2"
-          :class="{ error: $v.credentials.accountName.$error }"
+          :class="{ error: v$.credentials.accountName.$error }"
           :label="$t('REGISTER.COMPANY_NAME.LABEL')"
           :placeholder="$t('REGISTER.COMPANY_NAME.PLACEHOLDER')"
-          :has-error="$v.credentials.accountName.$error"
+          :has-error="v$.credentials.accountName.$error"
           :error-message="$t('REGISTER.COMPANY_NAME.ERROR')"
-          @blur="$v.credentials.accountName.$touch"
+          @blur="v$.credentials.accountName.$touch"
         />
       </div>
       <form-input
         v-model.trim="credentials.email"
         type="email"
         name="email_address"
-        :class="{ error: $v.credentials.email.$error }"
+        :class="{ error: v$.credentials.email.$error }"
         :label="$t('REGISTER.EMAIL.LABEL')"
         :placeholder="$t('REGISTER.EMAIL.PLACEHOLDER')"
-        :has-error="$v.credentials.email.$error"
+        :has-error="v$.credentials.email.$error"
         :error-message="$t('REGISTER.EMAIL.ERROR')"
-        @blur="$v.credentials.email.$touch"
+        @blur="v$.credentials.email.$touch"
       />
       <form-input
         v-model.trim="credentials.password"
         type="password"
         name="password"
-        :class="{ error: $v.credentials.password.$error }"
+        :class="{ error: v$.credentials.password.$error }"
         :label="$t('LOGIN.PASSWORD.LABEL')"
         :placeholder="$t('SET_NEW_PASSWORD.PASSWORD.PLACEHOLDER')"
-        :has-error="$v.credentials.password.$error"
+        :has-error="v$.credentials.password.$error"
         :error-message="passwordErrorText"
-        @blur="$v.credentials.password.$touch"
+        @blur="v$.credentials.password.$touch"
       />
       <div v-if="globalConfig.hCaptchaSiteKey" class="mb-3">
         <vue-hcaptcha
@@ -79,7 +79,8 @@
 </template>
 
 <script>
-import { required, minLength, email } from 'vuelidate/lib/validators';
+import { useVuelidate } from '@vuelidate/core';
+import { required, minLength, email } from '@vuelidate/validators';
 import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
 import globalConfigMixin from 'shared/mixins/globalConfigMixin';
@@ -100,6 +101,9 @@ export default {
     VueHcaptcha,
   },
   mixins: [globalConfigMixin],
+  setup() {
+    return { v$: useVuelidate() };
+  },
   data() {
     return {
       credentials: {
@@ -155,7 +159,7 @@ export default {
       return true;
     },
     passwordErrorText() {
-      const { password } = this.$v.credentials;
+      const { password } = this.v$.credentials;
       if (!password.$error) {
         return '';
       }
@@ -173,8 +177,8 @@ export default {
   },
   methods: {
     async submit() {
-      this.$v.$touch();
+      this.v$.$touch();
-      if (this.$v.$invalid) {
+      if (this.v$.$invalid) {
         this.resetCaptcha();
         return;
       }

app/javascript/v3/views/login/Index.vue

@@ -50,8 +50,8 @@
             required
             :label="$t('LOGIN.EMAIL.LABEL')"
             :placeholder="$t('LOGIN.EMAIL.PLACEHOLDER')"
-            :has-error="$v.credentials.email.$error"
+            :has-error="v$.credentials.email.$error"
-            @input="$v.credentials.email.$touch"
+            @input="v$.credentials.email.$touch"
           />
           <form-input
             v-model.trim="credentials.password"
@@ -62,8 +62,8 @@
             :tabindex="2"
             :label="$t('LOGIN.PASSWORD.LABEL')"
             :placeholder="$t('LOGIN.PASSWORD.PLACEHOLDER')"
-            :has-error="$v.credentials.password.$error"
+            :has-error="v$.credentials.password.$error"
-            @input="$v.credentials.password.$touch"
+            @input="v$.credentials.password.$touch"
           >
             <p v-if="!globalConfig.disableUserProfileUpdate">
               <router-link
@@ -91,8 +91,9 @@
 </template>
 
 <script>
+import { useVuelidate } from '@vuelidate/core';
+import { required, email } from '@vuelidate/validators';
 import { useAlert } from 'dashboard/composables';
-import { required, email } from 'vuelidate/lib/validators';
 import globalConfigMixin from 'shared/mixins/globalConfigMixin';
 import SubmitButton from '../../components/Button/SubmitButton.vue';
 import { mapGetters } from 'vuex';
@@ -122,6 +123,9 @@ export default {
     email: { type: String, default: '' },
     authError: { type: String, default: '' },
   },
+  setup() {
+    return { v$: useVuelidate() };
+  },
   data() {
     return {
       // We need to initialize the component with any
@@ -194,7 +198,7 @@ export default {
       useAlert(this.loginApi.message);
     },
     submitLogin() {
-      if (this.$v.credentials.email.$invalid && !this.email) {
+      if (this.v$.credentials.email.$invalid && !this.email) {
         this.showAlertMessage(this.$t('LOGIN.EMAIL.ERROR'));
         return;
       }

app/javascript/widget/components/template/EmailInput.vue

@@ -10,12 +10,12 @@
         class="form-input"
         :placeholder="$t('EMAIL_PLACEHOLDER')"
         :class="inputHasError"
-        @input="$v.email.$touch"
+        @input="v$.email.$touch"
         @keydown.enter="onSubmit"
       />
       <button
         class="button small"
-        :disabled="$v.email.$invalid"
+        :disabled="v$.email.$invalid"
         :style="{
           background: widgetColor,
           borderColor: widgetColor,
@@ -31,7 +31,8 @@
 
 <script>
 import { mapGetters } from 'vuex';
-import { required, email } from 'vuelidate/lib/validators';
+import { useVuelidate } from '@vuelidate/core';
+import { required, email } from '@vuelidate/validators';
 import { getContrastingTextColor } from '@chatwoot/utils';
 
 import FluentIcon from 'shared/components/FluentIcon/Index.vue';
@@ -54,6 +55,9 @@ export default {
       default: () => {},
     },
   },
+  setup() {
+    return { v$: useVuelidate() };
+  },
   data() {
     return {
       email: '',
@@ -79,7 +83,7 @@ export default {
         ${this.$dm('border-black-200', 'dark:border-black-500')}`;
     },
     inputHasError() {
-      return this.$v.email.$error
+      return this.v$.email.$error
         ? `${this.inputColor} error`
         : `${this.inputColor}`;
     },
@@ -92,7 +96,7 @@ export default {
   },
   methods: {
     async onSubmit() {
-      if (this.$v.$invalid) {
+      if (this.v$.$invalid) {
         return;
       }
       this.isUpdating = true;

package.json

@@ -96,7 +96,6 @@
     "vue-virtual-scroll-list": "^2.3.5",
     "vue2-datepicker": "^3.9.1",
     "vuedraggable": "^2.24.3",
-    "vuelidate": "0.7.7",
     "vuex": "~2.1.1",
     "vuex-router-sync": "~4.1.2",
     "wavesurfer.js": "^6.0.4",

yarn.lock

@@ -18413,16 +18413,7 @@ string-argv@0.3.2:
   resolved "https://registry.yarnpkg.com/string-argv/-/string-argv-0.3.2.tgz#2b6d0ef24b656274d957d54e0a4bbf6153dc02b6"
   integrity sha512-aqD2Q0144Z+/RqG52NeHEkZauTAUWJO8c6yTftGJKO3Tja5tUgIfmIl6kExvhtxSDP7fXB6DvzkfMpCd/F3G+Q==
 
-"string-width-cjs@npm:string-width@^4.2.0":
+"string-width-cjs@npm:string-width@^4.2.0", "string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.0.0, string-width@^4.2.2, string-width@^4.2.3:
-  version "4.2.3"
-  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
-  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
-  dependencies:
-    emoji-regex "^8.0.0"
-    is-fullwidth-code-point "^3.0.0"
-    strip-ansi "^6.0.1"
-
-"string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.0.0, string-width@^4.2.2, string-width@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -18574,7 +18565,7 @@ string_decoder@~1.1.1:
   dependencies:
     safe-buffer "~5.1.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -18602,13 +18593,6 @@ strip-ansi@^6.0.0:
   dependencies:
     ansi-regex "^5.0.0"
 
-strip-ansi@^6.0.1:
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
-  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
-  dependencies:
-    ansi-regex "^5.0.1"
-
 strip-ansi@^7.0.1:
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-7.1.0.tgz#d5b6568ca689d8561370b0707685d22434faff45"
@@ -20126,11 +20110,6 @@ vuedraggable@^2.24.3:
   dependencies:
     sortablejs "1.10.2"
 
-vuelidate@0.7.7:
-  version "0.7.7"
-  resolved "https://registry.yarnpkg.com/vuelidate/-/vuelidate-0.7.7.tgz#5df3930a63ddecf56fde7bdacea9dbaf0c9bf899"
-  integrity sha512-pT/U2lDI67wkIqI4tum7cMSIfGcAMfB+Phtqh2ttdXURwvHRBJEAQ0tVbUsW9Upg83Q5QH59bnCoXI7A9JDGnA==
-
 vuex-router-sync@~4.1.2:
   version "4.1.3"
   resolved "https://registry.yarnpkg.com/vuex-router-sync/-/vuex-router-sync-4.1.3.tgz#f209ec3174de04179bfadd7994437e4c5a81c975"
@@ -20547,7 +20526,7 @@ worker-rpc@^0.1.0:
   dependencies:
     microevent.ts "~0.1.1"
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
@@ -20574,15 +20553,6 @@ wrap-ansi@^6.2.0:
     string-width "^4.1.0"
     strip-ansi "^6.0.0"
 
-wrap-ansi@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
-  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
-  dependencies:
-    ansi-styles "^4.0.0"
-    string-width "^4.1.0"
-    strip-ansi "^6.0.0"
-
 wrap-ansi@^8.0.1, wrap-ansi@^8.1.0:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"