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

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>

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

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"
     >

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>

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')"

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

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')"

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')} - ${

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')"

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">

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')"

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')"

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"

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')"

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

@@ -37,6 +37,7 @@ export default {
       default: () => [],
     },
   },
+  emits: ['input', 'openPopover', 'openModal'],
   computed: {
     hasCategory() {
       return (

app/javascript/dashboard/routes/dashboard/helpcenter/components/Sidebar/SidebarSearch.vue

@@ -1,5 +1,6 @@
 <script>
 export default {
+  emits: ['input'],
   data() {
     return {
       searchValue: '',

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')"

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')"

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')"

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"

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

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

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

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

@@ -10,6 +10,7 @@ export default {
       default: '',
     },
   },
+  emits: ['input'],
   data() {
     return {
       iframeLoading: true,

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')"

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')" />
 

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"

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

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"
     >

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')"

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>

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')"

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()">

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')"

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')"

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"

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')"

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="

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"

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')"

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')"

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')"

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')"

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"