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>
2025-11-02 03:57:52 +00:00 · 2024-07-30 15:08:22 +05:30
parent dc9da4bb24
commit ce8e1ec93d
86 changed files with 1275 additions and 847 deletions
--- a/app/javascript/dashboard/components/widgets/AICTAModal.vue
+++ b/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 {
-      updateUISettings,
-    };
+    return { updateUISettings, v$ };
  },
  data() {
    return {
--- a/app/javascript/dashboard/components/widgets/AutomationActionInput.vue
+++ b/app/javascript/dashboard/components/widgets/AutomationActionInput.vue
@@ -96,11 +96,8 @@
      :placeholder="$t('AUTOMATION.ACTION.TEAM_MESSAGE_INPUT_PLACEHOLDER')"
      class="action-message"
    />
-    <p
-      v-if="v.action_params.$dirty && v.action_params.$error"
-      class="filter-error"
-    >
-      {{ $t('FILTER.EMPTY_VALUE_ERROR') }}
+    <p v-if="errorMessage" class="filter-error">
+      {{ errorMessage }}
    </p>
  </div>
 </template>
@@ -128,9 +125,9 @@ export default {
      type: Array,
      default: () => [],
    },
-    v: {
-      type: Object,
-      default: () => null,
+    errorMessage: {
+      type: String,
+      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,
      };
    },
--- a/app/javascript/dashboard/components/widgets/FilterInput/Index.vue
+++ b/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">
-        {{ $t('FILTER.EMPTY_VALUE_ERROR') }}
+      <p v-if="errorMessage" class="filter-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) {
-      return isDirty && hasError
+    getInputErrorClass(errorMessage) {
+      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';
    },
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationAdvancedFilter.vue
+++ b/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();
-      if (this.$v.$invalid) return;
-      this.$store.dispatch(
-        'setConversationFilters',
-        JSON.parse(JSON.stringify(this.appliedFilters))
+      this.validationErrors = validateConversationOrContactFilters(
+        this.appliedFilters
      );
-      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,
-        })),
-      });
+      if (Object.keys(this.validationErrors).length === 0) {
+        this.$store.dispatch(
+          'setConversationFilters',
+          JSON.parse(JSON.stringify(this.appliedFilters))
+        );
+        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);
--- a/app/javascript/dashboard/components/widgets/conversation/EmailTranscriptModal.vue
+++ b/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;
      }
--- a/app/javascript/dashboard/components/widgets/conversation/ReplyEmailHead.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ReplyEmailHead.vue
@@ -1,16 +1,16 @@
 <template>
  <div>
    <div v-if="toEmails">
-      <div class="input-group small" :class="{ error: $v.toEmailsVal.$error }">
+      <div class="input-group small" :class="{ error: v$.toEmailsVal.$error }">
        <label class="input-group-label">
          {{ $t('CONVERSATION.REPLYBOX.EMAIL_HEAD.TO') }}
        </label>
        <div class="rounded-none flex-1 min-w-0 m-0 whitespace-nowrap">
          <woot-input
-            v-model.trim="$v.toEmailsVal.$model"
+            v-model.trim="v$.toEmailsVal.$model"
            type="text"
            class="[&>input]:!mb-0 [&>input]:border-transparent [&>input]:h-8 [&>input]:text-sm [&>input]:!border-0 [&>input]:border-none"
-            :class="{ error: $v.toEmailsVal.$error }"
+            :class="{ error: v$.toEmailsVal.$error }"
            :placeholder="$t('CONVERSATION.REPLYBOX.EMAIL_HEAD.CC.PLACEHOLDER')"
            @blur="onBlur"
          />
@@ -18,16 +18,16 @@
      </div>
    </div>
    <div class="input-group-wrap">
-      <div class="input-group small" :class="{ error: $v.ccEmailsVal.$error }">
+      <div class="input-group small" :class="{ error: v$.ccEmailsVal.$error }">
        <label class="input-group-label">
          {{ $t('CONVERSATION.REPLYBOX.EMAIL_HEAD.CC.LABEL') }}
        </label>
        <div class="rounded-none flex-1 min-w-0 m-0 whitespace-nowrap">
          <woot-input
-            v-model.trim="$v.ccEmailsVal.$model"
+            v-model.trim="v$.ccEmailsVal.$model"
            class="[&>input]:!mb-0 [&>input]:border-transparent [&>input]:h-8 [&>input]:text-sm [&>input]:!border-0 [&>input]:border-none"
            type="text"
-            :class="{ error: $v.ccEmailsVal.$error }"
+            :class="{ error: v$.ccEmailsVal.$error }"
            :placeholder="$t('CONVERSATION.REPLYBOX.EMAIL_HEAD.CC.PLACEHOLDER')"
            @blur="onBlur"
          />
@@ -41,21 +41,21 @@
          {{ $t('CONVERSATION.REPLYBOX.EMAIL_HEAD.ADD_BCC') }}
        </woot-button>
      </div>
-      <span v-if="$v.ccEmailsVal.$error" class="message">
+      <span v-if="v$.ccEmailsVal.$error" class="message">
        {{ $t('CONVERSATION.REPLYBOX.EMAIL_HEAD.CC.ERROR') }}
      </span>
    </div>
    <div v-if="showBcc" class="input-group-wrap">
-      <div class="input-group small" :class="{ error: $v.bccEmailsVal.$error }">
+      <div class="input-group small" :class="{ error: v$.bccEmailsVal.$error }">
        <label class="input-group-label">
          {{ $t('CONVERSATION.REPLYBOX.EMAIL_HEAD.BCC.LABEL') }}
        </label>
        <div class="rounded-none flex-1 min-w-0 m-0 whitespace-nowrap">
          <woot-input
-            v-model.trim="$v.bccEmailsVal.$model"
+            v-model.trim="v$.bccEmailsVal.$model"
            type="text"
            class="[&>input]:!mb-0 [&>input]:border-transparent [&>input]:h-8 [&>input]:text-sm [&>input]:!border-0 [&>input]:border-none"
-            :class="{ error: $v.bccEmailsVal.$error }"
+            :class="{ error: v$.bccEmailsVal.$error }"
            :placeholder="
              $t('CONVERSATION.REPLYBOX.EMAIL_HEAD.BCC.PLACEHOLDER')
            "
@@ -63,7 +63,7 @@
          />
        </div>
      </div>
-      <span v-if="$v.bccEmailsVal.$error" class="message">
+      <span v-if="v$.bccEmailsVal.$error" class="message">
        {{ $t('CONVERSATION.REPLYBOX.EMAIL_HEAD.BCC.ERROR') }}
      </span>
    </div>
@@ -72,6 +72,7 @@

 <script>
 import { validEmailsByComma } from './helpers/emailHeadHelper';
+import { useVuelidate } from '@vuelidate/core';

 export default {
  props: {
@@ -88,6 +89,9 @@ export default {
      default: '',
    },
  },
+  setup() {
+    return { v$: useVuelidate() };
+  },
  data() {
    return {
      showBcc: false,
@@ -140,7 +144,7 @@ export default {
      this.showBcc = true;
    },
    onBlur() {
-      this.$v.$touch();
+      this.v$.$touch();
      this.$emit('update:bccEmails', this.bccEmailsVal);
      this.$emit('update:ccEmails', this.ccEmailsVal);
      this.$emit('update:toEmails', this.toEmailsVal);
--- a/app/javascript/dashboard/components/widgets/conversation/WhatsappTemplates/TemplateParser.vue
+++ b/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();
-      if (this.$v.$invalid) return;
+      this.v$.$touch();
+      if (this.v$.$invalid) return;
      const payload = {
        message: this.processedString,
        templateParams: {
--- a/app/javascript/dashboard/components/widgets/conversation/helpers/emailHeadHelper.js
+++ b/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));
 };
--- a/app/javascript/dashboard/components/widgets/modal/ConfirmDeleteModal.vue
+++ b/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: '',