feat: remove usage of .sync and define explicitly emits (#10209)

References - https://v3-migration.vuejs.org/breaking-changes/v-model - https://v3-migration.vuejs.org/breaking-changes/v-on-native-modifier-removed.html
2025-10-30 02:32:29 +00:00 · 2024-10-03 12:44:18 +05:30
parent edc1fe2363
commit b8d0252511
82 changed files with 224 additions and 221 deletions
--- a/app/javascript/dashboard/components/ChatList.vue
+++ b/app/javascript/dashboard/components/ChatList.vue
@@ -785,7 +785,7 @@ watch(conversationFilters, (newVal, oldVal) => {

    <DeleteCustomViews
      v-if="showDeleteFoldersModal"
-      :show-delete-popup.sync="showDeleteFoldersModal"
+      v-model:show="showDeleteFoldersModal"
      :active-custom-view="activeFolder"
      :custom-views-id="foldersId"
      :open-last-item-after-delete="openLastItemAfterDeleteInFolder"
@@ -878,7 +878,7 @@ watch(conversationFilters, (newVal, oldVal) => {
      </DynamicScroller>
    </div>
    <woot-modal
-      :show.sync="showAdvancedFilters"
+      v-model:show="showAdvancedFilters"
      :on-close="closeAdvanceFiltersModal"
      size="medium"
    >
--- a/app/javascript/dashboard/components/Modal.vue
+++ b/app/javascript/dashboard/components/Modal.vue
@@ -3,9 +3,8 @@
 import { ref, computed, defineEmits, onMounted } from 'vue';
 import { useEventListener } from '@vueuse/core';

-const { show, modalType, closeOnBackdropClick, onClose } = defineProps({
+const { modalType, closeOnBackdropClick, onClose } = defineProps({
  closeOnBackdropClick: { type: Boolean, default: true },
-  show: Boolean,
  showCloseButton: { type: Boolean, default: true },
  onClose: { type: Function, required: true },
  fullWidth: { type: Boolean, default: false },
@@ -14,6 +13,7 @@ const { show, modalType, closeOnBackdropClick, onClose } = defineProps({
 });

 const emit = defineEmits(['close']);
+const show = defineModel('show', { type: Boolean, default: false });

 const modalClassName = computed(() => {
  const modalClassNameMap = {
@@ -32,6 +32,7 @@ const handleMouseDown = () => {
 };

 const close = () => {
+  show.value = false;
  emit('close');
  onClose();
 };
@@ -40,14 +41,14 @@ const onMouseUp = () => {
  if (mousedDownOnBackdrop.value) {
    mousedDownOnBackdrop.value = false;
    if (closeOnBackdropClick) {
-      onClose();
+      close();
    }
  }
 };

 const onKeydown = e => {
-  if (show && e.code === 'Escape') {
-    onClose();
+  if (show.value && e.code === 'Escape') {
+    close();
    e.stopPropagation();
  }
 };
--- a/app/javascript/dashboard/components/ui/Switch.vue
+++ b/app/javascript/dashboard/components/ui/Switch.vue
@@ -4,6 +4,7 @@ export default {
    modelValue: { type: Boolean, default: false },
    size: { type: String, default: '' },
  },
+  emits: ['update:modelValue', 'input'],
  methods: {
    onClick() {
      this.$emit('update:modelValue', !this.modelValue);
--- a/app/javascript/dashboard/components/widgets/AIAssistanceButton.vue
+++ b/app/javascript/dashboard/components/widgets/AIAssistanceButton.vue
@@ -137,7 +137,7 @@ export default {
        @click="openAIAssist"
      />
      <woot-modal
-        :show.sync="showAIAssistanceModal"
+        v-model:show="showAIAssistanceModal"
        :on-close="hideAIAssistanceModal"
      >
        <AIAssistanceModal
@@ -149,7 +149,7 @@ export default {
    </div>
    <div v-else-if="shouldShowAIAssistCTAButtonForAdmin" class="relative">
      <AIAssistanceCTAButton @click="openAICta" />
-      <woot-modal :show.sync="showAICtaModal" :on-close="hideAICtaModal">
+      <woot-modal v-model:show="showAICtaModal" :on-close="hideAICtaModal">
        <AICTAModal @close="hideAICtaModal" />
      </woot-modal>
    </div>
--- a/app/javascript/dashboard/components/widgets/AutomationActionInput.vue
+++ b/app/javascript/dashboard/components/widgets/AutomationActionInput.vue
@@ -38,6 +38,7 @@ export default {
      default: false,
    },
  },
+  emits: ['update:modelValue', 'input', 'removeAction', 'resetAction'],
  computed: {
    action_name: {
      get() {
--- a/app/javascript/dashboard/components/widgets/AutomationActionTeamMessageInput.vue
+++ b/app/javascript/dashboard/components/widgets/AutomationActionTeamMessageInput.vue
@@ -3,6 +3,7 @@ export default {
  // The value types are dynamic, hence prop validation removed to work with our action schema
  // eslint-disable-next-line vue/require-prop-types
  props: ['teams', 'value'],
+  emits: ['input'],
  data() {
    return {
      selectedTeams: [],
--- a/app/javascript/dashboard/components/widgets/WootWriter/FullEditor.vue
+++ b/app/javascript/dashboard/components/widgets/WootWriter/FullEditor.vue
@@ -47,6 +47,7 @@ export default {
    placeholder: { type: String, default: '' },
    enabledMenuOptions: { type: Array, default: () => [] },
  },
+  emits: ['blur', 'input', 'update:modelValue', 'keyup', 'focus', 'keydown'],
  setup() {
    const { uiSettings, updateUISettings } = useUISettings();

--- a/app/javascript/dashboard/components/widgets/conversation/EmailTranscriptModal.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/EmailTranscriptModal.vue
@@ -1,20 +1,20 @@
 <script>
+import { defineModel } from 'vue';
 import { useVuelidate } from '@vuelidate/core';
 import { required, minLength, email } from '@vuelidate/validators';
 import { useAlert } from 'dashboard/composables';
+
 export default {
  props: {
-    show: {
-      type: Boolean,
-      default: false,
-    },
    currentChat: {
      type: Object,
      default: () => ({}),
    },
  },
+  emits: ['cancel'],
  setup() {
-    return { v$: useVuelidate() };
+    const show = defineModel('show', { type: Boolean, default: false });
+    return { v$: useVuelidate(), show };
  },
  data() {
    return {
@@ -80,9 +80,8 @@ export default {
 };
 </script>

-<!-- eslint-disable vue/no-mutating-props -->
 <template>
-  <woot-modal :show.sync="show" :on-close="onCancel">
+  <woot-modal v-model:show="show" :on-close="onCancel">
    <div class="flex flex-col h-auto overflow-auto">
      <woot-modal-header
        :header-title="$t('EMAIL_TRANSCRIPT.TITLE')"
--- a/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue
@@ -547,9 +547,9 @@ export default {
        </div>
      </div>
      <ReplyBox
+        v-model:popout-reply-box="isPopOutReplyBox"
        :conversation-id="currentChat.id"
-        :popout-reply-box.sync="isPopOutReplyBox"
-        @togglePopout="showPopOutReplyBox"
+        @toggle-popout="showPopOutReplyBox"
      />
    </div>
  </div>
--- a/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue
@@ -1,5 +1,6 @@
 <script>
-import { defineAsyncComponent } from 'vue';
+// [TODO] The popout events are needlessly complex and should be simplified
+import { defineAsyncComponent, defineModel } from 'vue';
 import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
 import { useUISettings } from 'dashboard/composables/useUISettings';
@@ -65,12 +66,7 @@ export default {
    ArticleSearchPopover,
  },
  mixins: [inboxMixin, fileUploadMixin, keyboardEventListenerMixins],
-  props: {
-    popoutReplyBox: {
-      type: Boolean,
-      default: false,
-    },
-  },
+  emits: ['update:popoutReplyBox', 'togglePopout'],
  setup() {
    const {
      uiSettings,
@@ -79,8 +75,14 @@ export default {
      fetchSignatureFlagFromUISettings,
    } = useUISettings();

+    const popoutReplyBox = defineModel('popoutReplyBox', {
+      type: Boolean,
+      default: false,
+    });
+
    return {
      uiSettings,
+      popoutReplyBox,
      updateUISettings,
      isEditorHotKeyEnabled,
      fetchSignatureFlagFromUISettings,
@@ -1081,15 +1083,15 @@ export default {
      :banner-message="$t('CONVERSATION.NOT_ASSIGNED_TO_YOU')"
      has-action-button
      :action-button-label="$t('CONVERSATION.ASSIGN_TO_ME')"
-      @primaryAction="onClickSelfAssign"
+      @primary-action="onClickSelfAssign"
    />
    <ReplyTopPanel
      :mode="replyType"
      :is-message-length-reaching-threshold="isMessageLengthReachingThreshold"
      :characters-remaining="charactersRemaining"
      :popout-reply-box="popoutReplyBox"
-      @setReplyMode="setReplyMode"
-      @togglePopout="$emit('togglePopout')"
+      @set-reply-mode="setReplyMode"
+      @toggle-popout="$emit('togglePopout')"
    />
    <ArticleSearchPopover
      v-if="showArticleSearchPopover && connectedPortalSlug"
--- a/app/javascript/dashboard/components/widgets/conversation/ReplyEmailHead.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ReplyEmailHead.vue
@@ -17,6 +17,7 @@ export default {
      default: '',
    },
  },
+  emits: ['update:bccEmails', 'update:ccEmails', 'update:toEmails'],
  setup() {
    return { v$: useVuelidate() };
  },
--- a/app/javascript/dashboard/components/widgets/conversation/WhatsappTemplates/Modal.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/WhatsappTemplates/Modal.vue
@@ -1,4 +1,5 @@
 <script>
+import { defineModel } from 'vue';
 import TemplatesPicker from './TemplatesPicker.vue';
 import TemplateParser from './TemplateParser.vue';
 export default {
@@ -11,10 +12,12 @@ export default {
      type: Number,
      default: undefined,
    },
-    show: {
-      type: Boolean,
-      default: true,
-    },
+  },
+  emits: ['onSend', 'cancel'],
+  setup() {
+    const show = defineModel('show', { type: Boolean, default: false });
+
+    return { show };
  },
  data() {
    return {
@@ -47,9 +50,8 @@ export default {
 };
 </script>

-<!-- eslint-disable vue/no-mutating-props -->
 <template>
-  <woot-modal :show.sync="show" :on-close="onClose" size="modal-big">
+  <woot-modal v-model:show="show" :on-close="onClose" size="modal-big">
    <woot-modal-header
      :header-title="$t('WHATSAPP_TEMPLATES.MODAL.TITLE')"
      :header-content="modalHeaderContent"
@@ -58,13 +60,13 @@ export default {
      <TemplatesPicker
        v-if="!selectedWaTemplate"
        :inbox-id="inboxId"
-        @onSelect="pickTemplate"
+        @on-select="pickTemplate"
      />
      <TemplateParser
        v-else
        :template="selectedWaTemplate"
-        @resetTemplate="onResetTemplate"
-        @sendMessage="onSendMessage"
+        @reset-template="onResetTemplate"
+        @send-message="onSendMessage"
      />
    </div>
  </woot-modal>
--- a/app/javascript/dashboard/components/widgets/conversation/bubble/Image.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/bubble/Image.vue
@@ -26,7 +26,7 @@ export default {
 <template>
  <div class="image message-text__wrap">
    <img :src="url" @click="onClick" @error="$emit('error')" />
-    <woot-modal full-width :show.sync="show" :on-close="onClose">
+    <woot-modal v-model:show="show" full-width :on-close="onClose">
      <img :src="url" class="modal-image skip-context-menu" />
    </woot-modal>
  </div>
--- a/app/javascript/dashboard/components/widgets/conversation/bubble/ImageAudioVideo.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/bubble/ImageAudioVideo.vue
@@ -116,7 +116,7 @@ export default {
    </audio>
    <GalleryView
      v-if="show"
-      :show.sync="show"
+      v-model:show="show"
      :attachment="attachment"
      :all-attachments="filteredCurrentChatAttachments"
      @error="onImgError"
--- a/app/javascript/dashboard/components/widgets/conversation/bubble/Text.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/bubble/Text.vue
@@ -106,7 +106,7 @@ export default {
    </button>
    <GalleryView
      v-if="showGalleryViewer"
-      :show.sync="showGalleryViewer"
+      v-model:show="showGalleryViewer"
      :attachment="attachment"
      :all-attachments="availableAttachments"
      @error="onClose"
--- a/app/javascript/dashboard/components/widgets/conversation/bubble/Video.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/bubble/Video.vue
@@ -30,7 +30,7 @@ export default {
 <template>
  <div class="video message-text__wrap">
    <video ref="videoElement" :src="url" muted playsInline @click="onClick" />
-    <woot-modal :show.sync="show" :on-close="onClose">
+    <woot-modal v-model:show="show" :on-close="onClose">
      <video
        :src="url"
        controls
--- a/app/javascript/dashboard/components/widgets/conversation/components/GalleryView.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/components/GalleryView.vue
@@ -7,10 +7,6 @@ import { messageTimestamp } from 'shared/helpers/timeHelper';
 import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';

 const props = defineProps({
-  show: {
-    type: Boolean,
-    required: true,
-  },
  attachment: {
    type: Object,
    required: true,
@@ -22,6 +18,7 @@ const props = defineProps({
 });

 const emit = defineEmits(['close']);
+const show = defineModel('show', { type: Boolean, default: false });

 const getters = useStoreGetters();

@@ -208,11 +205,10 @@ onMounted(() => {
 });
 </script>

-<!-- eslint-disable vue/no-mutating-props -->
 <template>
  <woot-modal
+    v-model:show="show"
    full-width
-    :show.sync="show"
    :show-close-button="false"
    :on-close="onClose"
  >
--- a/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/Index.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/Index.vue
@@ -240,7 +240,7 @@ export default {
      {{ $t('BULK_ACTION.ALL_CONVERSATIONS_SELECTED_ALERT') }}
    </div>
    <woot-modal
-      :show.sync="showCustomTimeSnoozeModal"
+      v-model:show="showCustomTimeSnoozeModal"
      :on-close="hideCustomSnoozeModal"
    >
      <CustomSnoozeModal
--- a/app/javascript/dashboard/components/widgets/conversation/linear/index.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/linear/index.vue
@@ -122,7 +122,7 @@ onMounted(() => {
      @unlinkIssue="unlinkIssue"
    />
    <woot-modal
-      :show.sync="shouldShowPopup"
+      v-model:show="shouldShowPopup"
      :on-close="closePopup"
      :close-on-backdrop-click="false"
      class="!items-start [&>div]:!top-12 [&>div]:sticky"
--- a/app/javascript/dashboard/components/widgets/forms/Input.vue
+++ b/app/javascript/dashboard/components/widgets/forms/Input.vue
@@ -38,7 +38,8 @@ export default {
      default: () => {},
    },
  },
-  created() {
+  emits: ['update:modelValue', 'input', 'blur'],
+  mounted() {
    // eslint-disable-next-line
    console.warn(
      '[DEPRECATED] <WootInput> has be deprecated and will be removed soon. Please use v3/components/Form/Input.vue instead'
--- a/app/javascript/dashboard/components/widgets/forms/PhoneInput.vue
+++ b/app/javascript/dashboard/components/widgets/forms/PhoneInput.vue
@@ -29,6 +29,7 @@ export default {
      default: false,
    },
  },
+  emits: ['blur', 'input', 'setCode'],
  data() {
    return {
      selectedIndex: -1,
--- a/app/javascript/dashboard/components/widgets/modal/ConfirmDeleteModal.vue
+++ b/app/javascript/dashboard/components/widgets/modal/ConfirmDeleteModal.vue
@@ -1,4 +1,5 @@
 <script>
+import { defineModel } from 'vue';
 import { required } from '@vuelidate/validators';
 import { useVuelidate } from '@vuelidate/core';
 import Modal from '../../Modal.vue';
@@ -8,37 +9,17 @@ export default {
    Modal,
  },
  props: {
-    show: {
-      type: Boolean,
-      default: false,
-    },
-    title: {
-      type: String,
-      default: '',
-    },
-    message: {
-      type: String,
-      default: '',
-    },
-    confirmText: {
-      type: String,
-      default: '',
-    },
-    rejectText: {
-      type: String,
-      default: '',
-    },
-    confirmValue: {
-      type: String,
-      default: '',
-    },
-    confirmPlaceHolderText: {
-      type: String,
-      default: '',
-    },
+    title: { type: String, default: '' },
+    message: { type: String, default: '' },
+    confirmText: { type: String, default: '' },
+    rejectText: { type: String, default: '' },
+    confirmValue: { type: String, default: '' },
+    confirmPlaceHolderText: { type: String, default: '' },
  },
+  emits: ['onClose', 'onConfirm'],
  setup() {
-    return { v$: useVuelidate() };
+    const show = defineModel('show', { type: Boolean, default: false });
+    return { v$: useVuelidate(), show };
  },
  data() {
    return {
@@ -65,9 +46,8 @@ export default {
 };
 </script>

-<!-- eslint-disable vue/no-mutating-props -->
 <template>
-  <Modal :show.sync="show" :on-close="closeModal">
+  <Modal v-model:show="show" :on-close="closeModal">
    <woot-modal-header :header-title="title" :header-content="message" />
    <form @submit.prevent="onConfirm">
      <woot-input
--- a/app/javascript/dashboard/components/widgets/modal/ConfirmationModal.vue
+++ b/app/javascript/dashboard/components/widgets/modal/ConfirmationModal.vue
@@ -51,7 +51,7 @@ export default {
 </script>

 <template>
-  <Modal :show.sync="show" :on-close="cancel">
+  <Modal v-model:show="show" :on-close="cancel">
    <div class="h-auto overflow-auto flex flex-col">
      <woot-modal-header :header-title="title" :header-content="description" />
      <div class="flex flex-row justify-end gap-2 py-4 px-6 w-full">
--- a/app/javascript/dashboard/components/widgets/modal/DeleteModal.vue
+++ b/app/javascript/dashboard/components/widgets/modal/DeleteModal.vue
@@ -1,26 +1,21 @@
-<script>
+<script setup>
 import Modal from '../../Modal.vue';

-export default {
-  components: {
-    Modal,
-  },
-  props: {
-    show: Boolean,
-    onClose: { type: Function, default: () => {} },
-    onConfirm: { type: Function, default: () => {} },
-    title: { type: String, default: '' },
-    message: { type: String, default: '' },
-    messageValue: { type: String, default: '' },
-    confirmText: { type: String, default: '' },
-    rejectText: { type: String, default: '' },
-  },
-};
+defineProps({
+  onClose: { type: Function, default: () => {} },
+  onConfirm: { type: Function, default: () => {} },
+  title: { type: String, default: '' },
+  message: { type: String, default: '' },
+  messageValue: { type: String, default: '' },
+  confirmText: { type: String, default: '' },
+  rejectText: { type: String, default: '' },
+});
+
+const show = defineModel('show', { type: Boolean, default: false });
 </script>

-<!-- eslint-disable vue/no-mutating-props -->
 <template>
-  <Modal :show.sync="show" :on-close="onClose">
+  <Modal v-model:show="show" :on-close="onClose">
    <woot-modal-header
      :header-title="title"
      :header-content="message"
--- a/app/javascript/dashboard/modules/contact/ContactMergeModal.vue
+++ b/app/javascript/dashboard/modules/contact/ContactMergeModal.vue
@@ -1,4 +1,5 @@
 <script>
+import { defineModel } from 'vue';
 import { useAlert, useTrack } from 'dashboard/composables';
 import MergeContact from 'dashboard/modules/contact/components/MergeContact.vue';

@@ -14,10 +15,11 @@ export default {
      type: Object,
      required: true,
    },
-    show: {
-      type: Boolean,
-      default: false,
-    },
+  },
+  setup() {
+    const show = defineModel('show', { type: Boolean, default: false });
+
+    return { show };
  },
  data() {
    return {
@@ -69,9 +71,8 @@ export default {
 };
 </script>

-<!-- eslint-disable vue/no-mutating-props -->
 <template>
-  <woot-modal :show.sync="show" :on-close="onClose">
+  <woot-modal v-model:show="show" :on-close="onClose">
    <woot-modal-header
      :header-title="$t('MERGE_CONTACTS.TITLE')"
      :header-content="$t('MERGE_CONTACTS.DESCRIPTION')"
--- a/app/javascript/dashboard/modules/contact/components/AddCustomAttribute.vue
+++ b/app/javascript/dashboard/modules/contact/components/AddCustomAttribute.vue
@@ -1,4 +1,5 @@
 <script>
+import { defineModel } from 'vue';
 import Modal from 'dashboard/components/Modal.vue';
 import { useVuelidate } from '@vuelidate/core';
 import { required, minLength } from '@vuelidate/validators';
@@ -8,17 +9,15 @@ export default {
    Modal,
  },
  props: {
-    show: {
-      type: Boolean,
-      default: true,
-    },
    isCreating: {
      type: Boolean,
      default: false,
    },
  },
+  emits: ['create', 'cancel'],
  setup() {
-    return { v$: useVuelidate() };
+    const show = defineModel('show', { type: Boolean, default: false });
+    return { v$: useVuelidate(), show };
  },
  data() {
    return {
@@ -61,9 +60,8 @@ export default {
 };
 </script>

-<!-- eslint-disable vue/no-mutating-props -->
 <template>
-  <Modal :show.sync="show" :on-close="onClose">
+  <Modal v-model:show="show" :on-close="onClose">
    <woot-modal-header
      :header-title="$t('CUSTOM_ATTRIBUTES.ADD.TITLE')"
      :header-content="$t('CUSTOM_ATTRIBUTES.ADD.DESC')"
--- a/app/javascript/dashboard/modules/conversations/components/MessageContextMenu.vue
+++ b/app/javascript/dashboard/modules/conversations/components/MessageContextMenu.vue
@@ -154,7 +154,7 @@ export default {
    <!-- Add To Canned Responses -->
    <woot-modal
      v-if="isCannedResponseModalOpen && enabledOptions['cannedResponse']"
-      :show.sync="isCannedResponseModalOpen"
+      v-model:show="isCannedResponseModalOpen"
      :on-close="hideCannedResponseModal"
    >
      <AddCannedModal
@@ -172,8 +172,8 @@ export default {
    <!-- Confirm Deletion -->
    <woot-delete-modal
      v-if="showDeleteModal"
+      v-model:show="showDeleteModal"
      class="context-menu--delete-modal"
-      :show.sync="showDeleteModal"
      :on-close="closeDeleteModal"
      :on-confirm="confirmDeletion"
      :title="$t('CONVERSATION.CONTEXT_MENU.DELETE_CONFIRMATION.TITLE')"
--- a/app/javascript/dashboard/modules/notes/components/ContactNote.vue
+++ b/app/javascript/dashboard/modules/notes/components/ContactNote.vue
@@ -102,7 +102,7 @@ export default {
      </div>
      <woot-delete-modal
        v-if="showDeleteModal"
-        :show.sync="showDeleteModal"
+        v-model:show="showDeleteModal"
        :on-close="closeDelete"
        :on-confirm="confirmDeletion"
        :title="$t('DELETE_NOTE.CONFIRM.TITLE')"
--- a/app/javascript/dashboard/routes/dashboard/Dashboard.vue
+++ b/app/javascript/dashboard/routes/dashboard/Dashboard.vue
@@ -178,7 +178,7 @@ export default {
        @closeAccountCreateModal="closeCreateAccountModal"
      />
      <WootKeyShortcutModal
-        :show.sync="showShortcutModal"
+        v-model:show="showShortcutModal"
        @close="closeKeyShortcutModal"
        @clickaway="closeKeyShortcutModal"
      />
@@ -186,7 +186,10 @@ export default {
        v-if="isNotificationPanel"
        @close="closeNotificationPanel"
      />
-      <woot-modal :show.sync="showAddLabelModal" :on-close="hideAddLabelPopup">
+      <woot-modal
+        v-model:show="showAddLabelModal"
+        :on-close="hideAddLabelPopup"
+      >
        <AddLabelModal @close="hideAddLabelPopup" />
      </woot-modal>
    </main>
--- a/app/javascript/dashboard/routes/dashboard/commands/CmdBarConversationSnooze.vue
+++ b/app/javascript/dashboard/routes/dashboard/commands/CmdBarConversationSnooze.vue
@@ -61,7 +61,7 @@ useEmitter(CMD_SNOOZE_CONVERSATION, onCmdSnoozeConversation);

 <template>
  <woot-modal
-    :show.sync="showCustomSnoozeModal"
+    v-model:show="showCustomSnoozeModal"
    :on-close="hideCustomSnoozeModal"
  >
    <CustomSnoozeModal
--- a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsView.vue
+++ b/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsView.vue
@@ -437,7 +437,7 @@ export default {
    />
    <DeleteCustomViews
      v-if="showDeleteSegmentsModal"
-      :show-delete-popup.sync="showDeleteSegmentsModal"
+      v-model:show="showDeleteSegmentsModal"
      :active-custom-view="activeSegment"
      :custom-views-id="segmentsId"
      :active-filter-type="filterType"
@@ -451,11 +451,11 @@ export default {
      :on-close="closeContactInfoPanel"
    />
    <CreateContact :show="showCreateModal" @cancel="onToggleCreate" />
-    <woot-modal :show.sync="showImportModal" :on-close="onToggleImport">
+    <woot-modal v-model:show="showImportModal" :on-close="onToggleImport">
      <ImportContacts v-if="showImportModal" :on-close="onToggleImport" />
    </woot-modal>
    <woot-modal
-      :show.sync="showFiltersModal"
+      v-model:show="showFiltersModal"
      :on-close="closeAdvanceFiltersModal"
      size="medium"
    >
--- a/app/javascript/dashboard/routes/dashboard/contacts/components/ImportContacts.vue
+++ b/app/javascript/dashboard/routes/dashboard/contacts/components/ImportContacts.vue
@@ -53,7 +53,7 @@ export default {
 </script>

 <template>
-  <Modal :show.sync="show" :on-close="onClose">
+  <Modal v-model:show="show" :on-close="onClose">
    <div class="flex flex-col h-auto overflow-auto">
      <woot-modal-header :header-title="$t('IMPORT_CONTACTS.TITLE')">
        <p>
--- a/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue
@@ -321,7 +321,7 @@ export default {
    </div>
    <woot-delete-modal
      v-if="showDeleteModal"
-      :show.sync="showDeleteModal"
+      v-model:show="showDeleteModal"
      :on-close="closeDelete"
      :on-confirm="confirmDeletion"
      :title="$t('DELETE_CONTACT.CONFIRM.TITLE')"
--- a/app/javascript/dashboard/routes/dashboard/conversation/contact/ConversationForm.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/contact/ConversationForm.vue
@@ -440,8 +440,8 @@ export default {
            </label>
            <ReplyEmailHead
              v-if="isAnEmailInbox"
-              :cc-emails.sync="ccEmails"
-              :bcc-emails.sync="bccEmails"
+              v-model:cc-emails="ccEmails"
+              v-model:bcc-emails="bccEmails"
            />
            <div class="editor-wrap">
              <WootMessageEditor
--- a/app/javascript/dashboard/routes/dashboard/conversation/contact/CreateContact.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/contact/CreateContact.vue
@@ -1,4 +1,5 @@
 <script>
+import { defineModel } from 'vue';
 import { mapGetters } from 'vuex';
 import ContactForm from './ContactForm.vue';

@@ -6,13 +7,12 @@ export default {
  components: {
    ContactForm,
  },
-  props: {
-    show: {
-      type: Boolean,
-      default: false,
-    },
-  },
+  emits: ['cancel'],
+  setup() {
+    const show = defineModel('show', { type: Boolean, default: false });

+    return { show };
+  },
  computed: {
    ...mapGetters({
      uiFlags: 'contacts/getUIFlags',
@@ -33,9 +33,12 @@ export default {
 };
 </script>

-<!-- eslint-disable vue/no-mutating-props -->
 <template>
-  <woot-modal :show.sync="show" :on-close="onCancel" modal-type="right-aligned">
+  <woot-modal
+    v-model:show="show"
+    :on-close="onCancel"
+    modal-type="right-aligned"
+  >
    <div class="flex flex-col h-auto overflow-auto">
      <woot-modal-header
        :header-title="$t('CREATE_CONTACT.TITLE')"
--- a/app/javascript/dashboard/routes/dashboard/conversation/contact/EditContact.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/contact/EditContact.vue
@@ -1,4 +1,5 @@
 <script>
+import { defineModel } from 'vue';
 import { mapGetters } from 'vuex';
 import ContactForm from './ContactForm.vue';

@@ -7,16 +8,16 @@ export default {
    ContactForm,
  },
  props: {
-    show: {
-      type: Boolean,
-      default: false,
-    },
    contact: {
      type: Object,
      default: () => ({}),
    },
  },
-
+  emits: ['cancel'],
+  setup() {
+    const show = defineModel('show', { type: Boolean, default: false });
+    return { show };
+  },
  computed: {
    ...mapGetters({
      uiFlags: 'contacts/getUIFlags',
@@ -41,9 +42,12 @@ export default {
 };
 </script>

-<!-- eslint-disable vue/no-mutating-props -->
 <template>
-  <woot-modal :show.sync="show" :on-close="onCancel" modal-type="right-aligned">
+  <woot-modal
+    v-model:show="show"
+    :on-close="onCancel"
+    modal-type="right-aligned"
+  >
    <div class="flex flex-col h-auto overflow-auto">
      <woot-modal-header
        :header-title="`${$t('EDIT_CONTACT.TITLE')} - ${
--- a/app/javascript/dashboard/routes/dashboard/conversation/contact/NewConversation.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/contact/NewConversation.vue
@@ -1,4 +1,5 @@
 <script>
+import { defineModel } from 'vue';
 import ConversationForm from './ConversationForm.vue';

 export default {
@@ -6,15 +7,16 @@ export default {
    ConversationForm,
  },
  props: {
-    show: {
-      type: Boolean,
-      default: false,
-    },
    contact: {
      type: Object,
      default: () => ({}),
    },
  },
+  emits: ['cancel'],
+  setup() {
+    const show = defineModel('show', { type: Boolean, default: false });
+    return { show };
+  },
  watch: {
    'contact.id'(id) {
      this.$store.dispatch('contacts/fetchContactableInbox', id);
@@ -42,9 +44,8 @@ export default {
 };
 </script>

-<!-- eslint-disable vue/no-mutating-props -->
 <template>
-  <woot-modal :show.sync="show" :on-close="onCancel">
+  <woot-modal v-model:show="show" :on-close="onCancel">
    <div class="flex flex-col h-auto overflow-auto">
      <woot-modal-header
        :header-title="$t('NEW_CONVERSATION.TITLE')"
--- a/app/javascript/dashboard/routes/dashboard/customviews/AddCustomViews.vue
+++ b/app/javascript/dashboard/routes/dashboard/customviews/AddCustomViews.vue
@@ -83,7 +83,7 @@ export default {
 </script>

 <template>
-  <woot-modal :show.sync="show" :on-close="onClose">
+  <woot-modal v-model:show="show" :on-close="onClose">
    <woot-modal-header :header-title="$t('FILTER.CUSTOM_VIEWS.ADD.TITLE')" />
    <form class="w-full" @submit.prevent="saveCustomViews">
      <div class="w-full">
--- a/app/javascript/dashboard/routes/dashboard/customviews/DeleteCustomViews.vue
+++ b/app/javascript/dashboard/routes/dashboard/customviews/DeleteCustomViews.vue
@@ -1,14 +1,11 @@
 <script>
+import { defineModel } from 'vue';
 import { useAlert } from 'dashboard/composables';
 import { CONTACTS_EVENTS } from '../../../helper/AnalyticsHelper/events';
 import { useTrack } from 'dashboard/composables';

 export default {
  props: {
-    showDeletePopup: {
-      type: Boolean,
-      default: false,
-    },
    activeCustomView: {
      type: Object,
      default: () => {},
@@ -26,7 +23,11 @@ export default {
      default: () => {},
    },
  },
-
+  emits: ['close'],
+  setup() {
+    const show = defineModel('show', { type: Boolean, default: false });
+    return { show };
+  },
  computed: {
    activeCustomViews() {
      if (this.activeFilterType === 0) {
@@ -89,12 +90,11 @@ export default {
 };
 </script>

-<!-- eslint-disable vue/no-mutating-props -->
 <template>
  <div>
    <woot-delete-modal
-      v-if="showDeletePopup"
-      :show.sync="showDeletePopup"
+      v-if="show"
+      v-model:show="show"
      :on-close="closeDeletePopup"
      :on-confirm="deleteSavedCustomViews"
      :title="$t('FILTER.CUSTOM_VIEWS.DELETE.MODAL.CONFIRM.TITLE')"
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/AddLocale.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/AddLocale.vue
@@ -1,4 +1,5 @@
 <script>
+import { defineModel } from 'vue';
 import Modal from 'dashboard/components/Modal.vue';
 import { required } from '@vuelidate/validators';
 import { useVuelidate } from '@vuelidate/core';
@@ -12,17 +13,15 @@ export default {
    Modal,
  },
  props: {
-    show: {
-      type: Boolean,
-      default: true,
-    },
    portal: {
      type: Object,
      default: () => ({}),
    },
  },
+  emits: ['cancel'],
  setup() {
-    return { v$: useVuelidate() };
+    const show = defineModel('show', { type: Boolean, default: false });
+    return { v$: useVuelidate(), show };
  },
  data() {
    return {
@@ -96,9 +95,8 @@ export default {
 };
 </script>

-<!-- eslint-disable vue/no-mutating-props -->
 <template>
-  <Modal :show.sync="show" :on-close="onClose">
+  <Modal v-model:show="show" :on-close="onClose">
    <woot-modal-header
      :header-title="$t('HELP_CENTER.PORTAL.ADD_LOCALE.TITLE')"
      :header-content="$t('HELP_CENTER.PORTAL.ADD_LOCALE.SUB_TITLE')"
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/HelpCenterLayout.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/HelpCenterLayout.vue
@@ -336,7 +336,7 @@ export default {
      />
      <AddCategory
        v-if="showAddCategoryModal"
-        :show.sync="showAddCategoryModal"
+        v-model:show="showAddCategoryModal"
        :portal-name="selectedPortalName"
        :locale="selectedLocaleInPortal"
        :portal-slug="selectedPortalSlug"
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalListItem.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalListItem.vue
@@ -365,7 +365,7 @@ export default {
      </div>
    </div>
    <woot-delete-modal
-      :show.sync="showDeleteConfirmationPopup"
+      v-model:show="showDeleteConfirmationPopup"
      :on-close="closeDeletePopup"
      :on-confirm="onClickDeletePortal"
      :title="$t('HELP_CENTER.PORTAL.PORTAL_SETTINGS.DELETE_PORTAL.TITLE')"
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/Sidebar/Sidebar.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/Sidebar/Sidebar.vue
@@ -37,6 +37,7 @@ export default {
      default: () => [],
    },
  },
+  emits: ['input', 'openPopover', 'openModal'],
  computed: {
    hasCategory() {
      return (
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/Sidebar/SidebarSearch.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/Sidebar/SidebarSearch.vue
@@ -1,5 +1,6 @@
 <script>
 export default {
+  emits: ['input'],
  data() {
    return {
      searchValue: '',
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/EditArticle.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/EditArticle.vue
@@ -204,7 +204,7 @@ export default {
      @updateMeta="updateMeta"
    />
    <woot-delete-modal
-      :show.sync="showDeleteConfirmationPopup"
+      v-model:show="showDeleteConfirmationPopup"
      :on-close="closeDeletePopup"
      :on-confirm="confirmDeletion"
      :title="$t('HELP_CENTER.DELETE_ARTICLE.MODAL.CONFIRM.TITLE')"
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/AddCategory.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/AddCategory.vue
@@ -1,4 +1,5 @@
 <script>
+import { defineModel } from 'vue';
 import { required, minLength } from '@vuelidate/validators';
 import { useVuelidate } from '@vuelidate/core';
 import { useAlert, useTrack } from 'dashboard/composables';
@@ -9,10 +10,6 @@ import NameEmojiInput from './NameEmojiInput.vue';
 export default {
  components: { NameEmojiInput },
  props: {
-    show: {
-      type: Boolean,
-      default: true,
-    },
    portalName: {
      type: String,
      default: '',
@@ -27,7 +24,8 @@ export default {
    },
  },
  setup() {
-    return { v$: useVuelidate() };
+    const show = defineModel('show', { type: Boolean, default: false });
+    return { v$: useVuelidate(), show };
  },
  data() {
    return {
@@ -111,9 +109,8 @@ export default {
 };
 </script>

-<!-- eslint-disable vue/no-mutating-props -->
 <template>
-  <woot-modal :show.sync="show" :on-close="onClose">
+  <woot-modal v-model:show="show" :on-close="onClose">
    <woot-modal-header
      :header-title="$t('HELP_CENTER.CATEGORY.ADD.TITLE')"
      :header-content="$t('HELP_CENTER.CATEGORY.ADD.SUB_TITLE')"
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/EditCategory.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/EditCategory.vue
@@ -1,4 +1,5 @@
 <script>
+import { defineModel } from 'vue';
 import { required, minLength } from '@vuelidate/validators';
 import { useVuelidate } from '@vuelidate/core';
 import { useAlert, useTrack } from 'dashboard/composables';
@@ -9,10 +10,6 @@ import CategoryNameIconInput from './NameEmojiInput.vue';
 export default {
  components: { CategoryNameIconInput },
  props: {
-    show: {
-      type: Boolean,
-      default: true,
-    },
    portalName: {
      type: String,
      default: '',
@@ -31,7 +28,8 @@ export default {
    },
  },
  setup() {
-    return { v$: useVuelidate() };
+    const show = defineModel('show', { type: Boolean, default: false });
+    return { v$: useVuelidate(), show };
  },
  data() {
    return {
@@ -120,9 +118,8 @@ export default {
 };
 </script>

-<!-- eslint-disable vue/no-mutating-props -->
 <template>
-  <woot-modal :show.sync="show" :on-close="onClose">
+  <woot-modal v-model:show="show" :on-close="onClose">
    <woot-modal-header
      :header-title="$t('HELP_CENTER.CATEGORY.EDIT.TITLE')"
      :header-content="$t('HELP_CENTER.CATEGORY.EDIT.SUB_TITLE')"
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/ListAllCategories.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/ListAllCategories.vue
@@ -141,7 +141,7 @@ function changeCurrentCategory(event) {
    </div>
    <EditCategory
      v-if="showEditCategoryModal"
-      :show.sync="showEditCategoryModal"
+      v-model:show="showEditCategoryModal"
      :portal-name="currentPortalName"
      :locale="selectedCategory.locale"
      :category="selectedCategory"
@@ -150,7 +150,7 @@ function changeCurrentCategory(event) {
    />
    <AddCategory
      v-if="showAddCategoryModal"
-      :show.sync="showAddCategoryModal"
+      v-model:show="showAddCategoryModal"
      :portal-name="currentPortalName"
      :locale="currentLocaleCode"
      @cancel="closeAddCategoryModal"
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/EditPortalLocales.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/EditPortalLocales.vue
@@ -129,7 +129,7 @@ function addLocale() {
      @delete="deletePortalLocale"
    />
    <woot-modal
-      :show.sync="isAddLocaleModalOpen"
+      v-model:show="isAddLocaleModalOpen"
      :on-close="closeAddLocaleModal"
    >
      <AddLocale
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/ListAllPortals.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/ListAllPortals.vue
@@ -92,7 +92,7 @@ export default {
      />
    </div>
    <woot-modal
-      :show.sync="isAddLocaleModalOpen"
+      v-model:show="isAddLocaleModalOpen"
      :on-close="closeAddLocaleModal"
    >
      <AddLocale
--- a/app/javascript/dashboard/routes/dashboard/inbox/components/InboxItemHeader.vue
+++ b/app/javascript/dashboard/routes/dashboard/inbox/components/InboxItemHeader.vue
@@ -147,7 +147,7 @@ export default {
      </woot-button>
    </div>
    <woot-modal
-      :show.sync="showCustomSnoozeModal"
+      v-model:show="showCustomSnoozeModal"
      :on-close="hideCustomSnoozeModal"
    >
      <CustomSnoozeModal
--- a/app/javascript/dashboard/routes/dashboard/settings/agentBots/components/CSMLMonacoEditor.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/agentBots/components/CSMLMonacoEditor.vue
@@ -10,6 +10,7 @@ export default {
      default: '',
    },
  },
+  emits: ['input'],
  data() {
    return {
      iframeLoading: true,
--- a/app/javascript/dashboard/routes/dashboard/settings/agents/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/agents/Index.vue
@@ -255,11 +255,11 @@ const confirmDeletion = () => {
      </table>
    </template>

-    <woot-modal :show.sync="showAddPopup" :on-close="hideAddPopup">
+    <woot-modal v-model:show="showAddPopup" :on-close="hideAddPopup">
      <AddAgent @close="hideAddPopup" />
    </woot-modal>

-    <woot-modal :show.sync="showEditPopup" :on-close="hideEditPopup">
+    <woot-modal v-model:show="showEditPopup" :on-close="hideEditPopup">
      <EditAgent
        v-if="showEditPopup"
        :id="currentAgent.id"
@@ -273,7 +273,7 @@ const confirmDeletion = () => {
    </woot-modal>

    <woot-delete-modal
-      :show.sync="showDeletePopup"
+      v-model:show="showDeletePopup"
      :on-close="closeDeletePopup"
      :on-confirm="confirmDeletion"
      :title="$t('AGENT_MGMT.DELETE.CONFIRM.TITLE')"
--- a/app/javascript/dashboard/routes/dashboard/settings/attributes/AddAttribute.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/attributes/AddAttribute.vue
@@ -158,7 +158,7 @@ export default {
 </script>

 <template>
-  <woot-modal :show.sync="show" :on-close="onClose">
+  <woot-modal v-model:show="show" :on-close="onClose">
    <div class="flex flex-col h-auto overflow-auto">
      <woot-modal-header :header-title="$t('ATTRIBUTES_MGMT.ADD.TITLE')" />

--- a/app/javascript/dashboard/routes/dashboard/settings/attributes/CustomAttribute.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/attributes/CustomAttribute.vue
@@ -145,7 +145,7 @@ const tableHeaders = computed(() => {
        </tr>
      </tbody>
    </table>
-    <woot-modal :show.sync="showEditPopup" :on-close="hideEditPopup">
+    <woot-modal v-model:show="showEditPopup" :on-close="hideEditPopup">
      <EditAttribute
        :selected-attribute="selectedAttribute"
        :is-updating="uiFlags.isUpdating"
@@ -154,7 +154,7 @@ const tableHeaders = computed(() => {
    </woot-modal>
    <woot-confirm-delete-modal
      v-if="showDeletePopup"
-      :show.sync="showDeletePopup"
+      v-model:show="showDeletePopup"
      :title="confirmDeleteTitle"
      :message="$t('ATTRIBUTES_MGMT.DELETE.CONFIRM.MESSAGE')"
      :confirm-text="deleteConfirmText"
--- a/app/javascript/dashboard/routes/dashboard/settings/attributes/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/attributes/Index.vue
@@ -101,7 +101,7 @@ const onClickTabChange = index => {
    </template>
    <woot-modal
      v-if="showAddPopup"
-      :show.sync="showAddPopup"
+      v-model:show="showAddPopup"
      :on-close="hideAddPopup"
    >
      <AddAttribute
--- a/app/javascript/dashboard/routes/dashboard/settings/automation/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/automation/Index.vue
@@ -224,7 +224,7 @@ const tableHeaders = computed(() => {
    </template>

    <woot-modal
-      :show.sync="showAddPopup"
+      v-model:show="showAddPopup"
      size="medium"
      :on-close="hideAddPopup"
    >
@@ -236,7 +236,7 @@ const tableHeaders = computed(() => {
    </woot-modal>

    <woot-delete-modal
-      :show.sync="showDeleteConfirmationPopup"
+      v-model:show="showDeleteConfirmationPopup"
      :on-close="closeDeletePopup"
      :on-confirm="confirmDeletion"
      :title="$t('LABEL_MGMT.DELETE.CONFIRM.TITLE')"
@@ -247,7 +247,7 @@ const tableHeaders = computed(() => {
    />

    <woot-modal
-      :show.sync="showEditPopup"
+      v-model:show="showEditPopup"
      size="medium"
      :on-close="hideEditPopup"
    >
--- a/app/javascript/dashboard/routes/dashboard/settings/campaigns/Campaign.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/campaigns/Campaign.vue
@@ -81,14 +81,14 @@ export default {
      @edit="openEditPopup"
      @delete="openDeletePopup"
    />
-    <woot-modal :show.sync="showEditPopup" :on-close="hideEditPopup">
+    <woot-modal v-model:show="showEditPopup" :on-close="hideEditPopup">
      <EditCampaign
        :selected-campaign="selectedCampaign"
        @onClose="hideEditPopup"
      />
    </woot-modal>
    <woot-delete-modal
-      :show.sync="showDeleteConfirmationPopup"
+      v-model:show="showDeleteConfirmationPopup"
      :on-close="closeDeletePopup"
      :on-confirm="confirmDeletion"
      :title="$t('CAMPAIGN.DELETE.CONFIRM.TITLE')"
--- a/app/javascript/dashboard/routes/dashboard/settings/campaigns/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/campaigns/Index.vue
@@ -48,7 +48,7 @@ export default {
      {{ buttonText }}
    </woot-button>
    <Campaign />
-    <woot-modal :show.sync="showAddPopup" :on-close="hideAddPopup">
+    <woot-modal v-model:show="showAddPopup" :on-close="hideAddPopup">
      <AddCampaign @onClose="hideAddPopup" />
    </woot-modal>
  </div>
--- a/app/javascript/dashboard/routes/dashboard/settings/canned/AddCanned.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/canned/AddCanned.vue
@@ -82,7 +82,7 @@ export default {
 </script>

 <template>
-  <Modal :show.sync="show" :on-close="onClose">
+  <Modal v-model:show="show" :on-close="onClose">
    <div class="flex flex-col h-auto overflow-auto">
      <woot-modal-header
        :header-title="$t('CANNED_MGMT.ADD.TITLE')"
--- a/app/javascript/dashboard/routes/dashboard/settings/canned/EditCanned.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/canned/EditCanned.vue
@@ -89,7 +89,7 @@ export default {
 </script>

 <template>
-  <Modal :show.sync="show" :on-close="onClose">
+  <Modal v-model:show="show" :on-close="onClose">
    <div class="flex flex-col h-auto overflow-auto">
      <woot-modal-header :header-title="pageTitle" />
      <form class="flex flex-col w-full" @submit.prevent="editCannedResponse()">
--- a/app/javascript/dashboard/routes/dashboard/settings/canned/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/canned/Index.vue
@@ -214,11 +214,11 @@ const tableHeaders = computed(() => {
      </table>
    </div>

-    <woot-modal :show.sync="showAddPopup" :on-close="hideAddPopup">
+    <woot-modal v-model:show="showAddPopup" :on-close="hideAddPopup">
      <AddCanned :on-close="hideAddPopup" />
    </woot-modal>

-    <woot-modal :show.sync="showEditPopup" :on-close="hideEditPopup">
+    <woot-modal v-model:show="showEditPopup" :on-close="hideEditPopup">
      <EditCanned
        v-if="showEditPopup"
        :id="activeResponse.id"
@@ -229,7 +229,7 @@ const tableHeaders = computed(() => {
    </woot-modal>

    <woot-delete-modal
-      :show.sync="showDeleteConfirmationPopup"
+      v-model:show="showDeleteConfirmationPopup"
      :on-close="closeDeletePopup"
      :on-confirm="confirmDeletion"
      :title="$t('CANNED_MGMT.DELETE.CONFIRM.TITLE')"
--- a/app/javascript/dashboard/routes/dashboard/settings/customRoles/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/customRoles/Index.vue
@@ -174,7 +174,7 @@ const confirmDeletion = () => {
    </template>

    <woot-modal
-      :show.sync="showCustomRoleModal"
+      v-model:show="showCustomRoleModal"
      :on-close="hideCustomRoleModal"
    >
      <CustomRoleModal
@@ -185,7 +185,7 @@ const confirmDeletion = () => {
    </woot-modal>

    <woot-delete-modal
-      :show.sync="showDeleteConfirmationPopup"
+      v-model:show="showDeleteConfirmationPopup"
      :on-close="closeDeletePopup"
      :on-confirm="confirmDeletion"
      :title="$t('CUSTOM_ROLE.DELETE.CONFIRM.TITLE')"
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/Index.vue
@@ -175,7 +175,7 @@ const openDelete = inbox => {

    <woot-confirm-delete-modal
      v-if="showDeletePopup"
-      :show.sync="showDeletePopup"
+      v-model:show="showDeletePopup"
      :title="$t('INBOX_MGMT.DELETE.CONFIRM.TITLE')"
      :message="confirmDeleteMessage"
      :confirm-text="deleteConfirmText"
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/DashboardApps/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/DashboardApps/Index.vue
@@ -148,7 +148,7 @@ export default {
    />

    <woot-delete-modal
-      :show.sync="showDeleteConfirmationPopup"
+      v-model:show="showDeleteConfirmationPopup"
      :on-close="closeDeletePopup"
      :on-confirm="confirmDeletion"
      :title="$t('INTEGRATION_SETTINGS.DASHBOARD_APPS.DELETE.TITLE')"
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/Integration.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/Integration.vue
@@ -116,7 +116,7 @@ export default {
      </div>
    </div>
    <woot-delete-modal
-      :show.sync="showDeleteConfirmationPopup"
+      v-model:show="showDeleteConfirmationPopup"
      :on-close="closeDeletePopup"
      :on-confirm="confirmDeletion"
      :title="
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/IntegrationHooks.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/IntegrationHooks.vue
@@ -135,12 +135,12 @@ export default {
      </div>
    </div>

-    <woot-modal :show.sync="showAddHookModal" :on-close="hideAddHookModal">
+    <woot-modal v-model:show="showAddHookModal" :on-close="hideAddHookModal">
      <NewHook :integration-id="integrationId" @close="hideAddHookModal" />
    </woot-modal>

    <woot-delete-modal
-      :show.sync="showDeleteConfirmationPopup"
+      v-model:show="showDeleteConfirmationPopup"
      :on-close="closeDeletePopup"
      :on-confirm="confirmDeletion"
      :title="deleteTitle"
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/Index.vue
@@ -138,11 +138,11 @@ export default {
        </tbody>
      </table>
    </template>
-    <woot-modal :show.sync="showAddPopup" :on-close="hideAddPopup">
+    <woot-modal v-model:show="showAddPopup" :on-close="hideAddPopup">
      <NewWebhook v-if="showAddPopup" :on-close="hideAddPopup" />
    </woot-modal>

-    <woot-modal :show.sync="showEditPopup" :on-close="hideEditPopup">
+    <woot-modal v-model:show="showEditPopup" :on-close="hideEditPopup">
      <EditWebhook
        v-if="showEditPopup"
        :id="selectedWebHook.id"
@@ -151,7 +151,7 @@ export default {
      />
    </woot-modal>
    <woot-delete-modal
-      :show.sync="showDeleteConfirmationPopup"
+      v-model:show="showDeleteConfirmationPopup"
      :on-close="closeDeletePopup"
      :on-confirm="confirmDeletion"
      :title="$t('INTEGRATION_SETTINGS.WEBHOOK.DELETE.CONFIRM.TITLE')"
--- a/app/javascript/dashboard/routes/dashboard/settings/labels/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/labels/Index.vue
@@ -167,16 +167,16 @@ onBeforeMount(() => {
      </table>
    </template>

-    <woot-modal :show.sync="showAddPopup" :on-close="hideAddPopup">
+    <woot-modal v-model:show="showAddPopup" :on-close="hideAddPopup">
      <AddLabel @close="hideAddPopup" />
    </woot-modal>

-    <woot-modal :show.sync="showEditPopup" :on-close="hideEditPopup">
+    <woot-modal v-model:show="showEditPopup" :on-close="hideEditPopup">
      <EditLabel :selected-response="selectedLabel" @close="hideEditPopup" />
    </woot-modal>

    <woot-delete-modal
-      :show.sync="showDeleteConfirmationPopup"
+      v-model:show="showDeleteConfirmationPopup"
      :on-close="closeDeletePopup"
      :on-confirm="confirmDeletion"
      :title="$t('LABEL_MGMT.DELETE.CONFIRM.TITLE')"
--- a/app/javascript/dashboard/routes/dashboard/settings/macros/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/macros/Index.vue
@@ -107,7 +107,7 @@ const tableHeaders = computed(() => {
        </tbody>
      </table>
      <woot-delete-modal
-        :show.sync="showDeleteConfirmationPopup"
+        v-model:show="showDeleteConfirmationPopup"
        :on-close="closeDeletePopup"
        :on-confirm="confirmDeletion"
        :title="$t('LABEL_MGMT.DELETE.CONFIRM.TITLE')"
--- a/app/javascript/dashboard/routes/dashboard/settings/sla/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/sla/Index.vue
@@ -148,12 +148,12 @@ export default {
        />
      </div>

-      <woot-modal :show.sync="showAddPopup" :on-close="hideAddPopup">
+      <woot-modal v-model:show="showAddPopup" :on-close="hideAddPopup">
        <AddSLA @close="hideAddPopup" />
      </woot-modal>

      <woot-delete-modal
-        :show.sync="showDeleteConfirmationPopup"
+        v-model:show="showDeleteConfirmationPopup"
        :on-close="closeDeletePopup"
        :on-confirm="confirmDeletion"
        :title="$t('SLA.DELETE.CONFIRM.TITLE')"
--- a/app/javascript/dashboard/routes/dashboard/settings/teams/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/teams/Index.vue
@@ -144,7 +144,7 @@ const confirmPlaceHolderText = computed(() =>
    </div>
    <woot-confirm-delete-modal
      v-if="showDeletePopup"
-      :show.sync="showDeletePopup"
+      v-model:show="showDeletePopup"
      :title="confirmDeleteTitle"
      :message="$t('TEAMS_SETTINGS.DELETE.CONFIRM.MESSAGE')"
      :confirm-text="deleteConfirmText"
--- a/app/javascript/portal/components/PublicArticleSearch.vue
+++ b/app/javascript/portal/components/PublicArticleSearch.vue
@@ -9,6 +9,7 @@ export default {
    PublicSearchInput,
    SearchSuggestions,
  },
+  emits: ['input', 'blur'],
  data() {
    return {
      searchTerm: '',
--- a/app/javascript/shared/components/GreetingsEditor.vue
+++ b/app/javascript/shared/components/GreetingsEditor.vue
@@ -25,6 +25,7 @@ export default {
      default: '',
    },
  },
+  emits: ['input'],
  data() {
    return {
      greetingsMessage: this.value,
--- a/app/javascript/shared/components/ResizableTextArea.vue
+++ b/app/javascript/shared/components/ResizableTextArea.vue
@@ -40,6 +40,14 @@ export default {
      default: false,
    },
  },
+  emits: [
+    'input',
+    'update:modelValue',
+    'typingOn',
+    'typingOff',
+    'focus',
+    'blur',
+  ],
  data() {
    return {
      typingIndicator: createTypingIndicator(
--- a/app/javascript/shared/components/ui/label/LabelDropdown.vue
+++ b/app/javascript/shared/components/ui/label/LabelDropdown.vue
@@ -170,7 +170,7 @@ export default {
          </woot-button>

          <woot-modal
-            :show.sync="createModalVisible"
+            v-model:show="createModalVisible"
            :on-close="hideCreateModal"
          >
            <AddLabelModal
--- a/app/javascript/v3/components/Form/RadioTags.vue
+++ b/app/javascript/v3/components/Form/RadioTags.vue
@@ -30,6 +30,7 @@ export default {
      default: '',
    },
  },
+  emits: ['input'],
 };
 </script>

--- a/app/javascript/v3/components/Form/Select.vue
+++ b/app/javascript/v3/components/Form/Select.vue
@@ -42,6 +42,7 @@ export default {
      default: '',
    },
  },
+  emits: ['input'],
  methods: {
    onInput(e) {
      this.$emit('input', e.target.value);
--- a/app/javascript/v3/components/Form/Switch.vue
+++ b/app/javascript/v3/components/Form/Switch.vue
@@ -3,6 +3,7 @@ export default {
  props: {
    value: { type: Boolean, default: false },
  },
+  emits: ['input'],
  methods: {
    onClick() {
      this.$emit('input', !this.value);
--- a/app/javascript/v3/components/Form/Textarea.vue
+++ b/app/javascript/v3/components/Form/Textarea.vue
@@ -46,6 +46,7 @@ export default {
      default: '',
    },
  },
+  emits: ['input'],
  methods: {
    onInput(e) {
      this.$emit('input', e.target.value);
--- a/app/javascript/widget/components/Form/Input.vue
+++ b/app/javascript/widget/components/Form/Input.vue
@@ -27,6 +27,7 @@ export default {
      default: '',
    },
  },
+  emits: ['input'],
  setup() {
    const { getThemeClass } = useDarkMode();
    return { getThemeClass };
--- a/app/javascript/widget/components/Form/TextArea.vue
+++ b/app/javascript/widget/components/Form/TextArea.vue
@@ -19,6 +19,7 @@ export default {
      default: '',
    },
  },
+  emits: ['input'],
  setup() {
    const { getThemeClass } = useDarkMode();
    return { getThemeClass };