fix: vue 3 followup fixes (#10213)

Fixes: CW-3602,  CW-3606, CW-3605, CW-3601, CW-3603, CW-3600, CW-3598

-
[CW-3602](https://linear.app/chatwoot/issue/CW-3602/chat-list-infinite-loader-fetching-only-odd-numbered-pages)
Chat list pagination broken
-
[CW-3606](https://linear.app/chatwoot/issue/CW-3606/saving-greeting-message-is-not-working-in-inbox-settings)
Greetings message not getting saved
-
[CW-3605](https://linear.app/chatwoot/issue/CW-3605/copy-and-paste-image-attachment-not-working-in-widget)
Paste not working on widget
-
[CW-3601](https://linear.app/chatwoot/issue/CW-3601/edit-category-is-not-working-properly)
Edit category not updating
-
[CW-3603](https://linear.app/chatwoot/issue/CW-3603/delete-filter-is-not-working)
Delete filter modal not toggling
-
[CW-3600](https://linear.app/chatwoot/issue/CW-3600/portal-editor-is-not-working-properly)
Portal editor events were flaky
-
[CW-3598](https://linear.app/chatwoot/issue/CW-3598/rearrange-of-pre-chat-form-fields-throws-an-error)
Prechat form re-order bug

---------

Co-authored-by: Vishnu Narayanan <iamwishnu@gmail.com>

app/javascript/dashboard/components/ChatList.vue

@@ -537,12 +537,6 @@ function loadMoreConversations() {
     return;
   }
 
-  // Increment the current page
-  store.dispatch('conversationPage/setCurrentPage', {
-    filter: currentPageFilterKey.value,
-    page: currentFiltersPage.value + 1,
-  });
-
   if (!hasAppliedFiltersOrActiveFolders.value) {
     fetchConversations();
   } else if (hasActiveFolders.value) {

app/javascript/dashboard/components/widgets/WootWriter/FullEditor.vue

@@ -61,17 +61,9 @@ export default {
       plugins: [imagePastePlugin(this.handleImageUpload)],
     };
   },
-  computed: {
-    contentFromEditor() {
-      if (editorView) {
-        return ArticleMarkdownSerializer.serialize(editorView.state.doc);
-      }
-      return '';
-    },
-  },
   watch: {
     modelValue(newValue = '') {
-      if (newValue !== this.contentFromEditor) {
+      if (newValue !== this.contentFromEditor()) {
         this.reloadState();
       }
     },
@@ -96,6 +88,12 @@ export default {
     this.focusEditorInputField();
   },
   methods: {
+    contentFromEditor() {
+      if (editorView) {
+        return ArticleMarkdownSerializer.serialize(editorView.state.doc);
+      }
+      return '';
+    },
     openFileBrowser() {
       this.$refs.imageUploadInput.click();
     },
@@ -213,8 +211,8 @@ export default {
       editorView.focus();
     },
     emitOnChange() {
-      this.$emit('update:modelValue', this.contentFromEditor);
-      this.$emit('input', this.contentFromEditor);
+      this.$emit('update:modelValue', this.contentFromEditor());
+      this.$emit('input', this.contentFromEditor());
     },
     onKeyup() {
       this.$emit('keyup');

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

@@ -1,20 +1,22 @@
 <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'],
+  emits: ['cancel', 'update:show'],
   setup() {
-    const show = defineModel('show', { type: Boolean, default: false });
-    return { v$: useVuelidate(), show };
+    return { v$: useVuelidate() };
   },
   data() {
     return {
@@ -31,6 +33,14 @@ export default {
     },
   },
   computed: {
+    localShow: {
+      get() {
+        return this.show;
+      },
+      set(value) {
+        this.$emit('update:show', value);
+      },
+    },
     sentToOtherEmailAddress() {
       return this.selectedType === 'other_email_address';
     },
@@ -81,7 +91,7 @@ export default {
 </script>
 
 <template>
-  <woot-modal v-model:show="show" :on-close="onCancel">
+  <woot-modal v-model:show="localShow" :on-close="onCancel">
     <div class="flex flex-col h-auto overflow-auto">
       <woot-modal-header
         :header-title="$t('EMAIL_TRANSCRIPT.TITLE')"

app/javascript/dashboard/components/widgets/conversation/WhatsappTemplates/Modal.vue

@@ -1,5 +1,4 @@
 <script>
-import { defineModel } from 'vue';
 import TemplatesPicker from './TemplatesPicker.vue';
 import TemplateParser from './TemplateParser.vue';
 export default {
@@ -8,23 +7,30 @@ export default {
     TemplateParser,
   },
   props: {
+    show: {
+      type: Boolean,
+      default: false,
+    },
     inboxId: {
       type: Number,
       default: undefined,
     },
   },
-  emits: ['onSend', 'cancel'],
-  setup() {
-    const show = defineModel('show', { type: Boolean, default: false });
-
-    return { show };
-  },
+  emits: ['onSend', 'cancel', 'update:show'],
   data() {
     return {
       selectedWaTemplate: null,
     };
   },
   computed: {
+    localShow: {
+      get() {
+        return this.show;
+      },
+      set(value) {
+        this.$emit('update:show', value);
+      },
+    },
     modalHeaderContent() {
       return this.selectedWaTemplate
         ? this.$t('WHATSAPP_TEMPLATES.MODAL.TEMPLATE_SELECTED_SUBTITLE', {
@@ -51,7 +57,7 @@ export default {
 </script>
 
 <template>
-  <woot-modal v-model:show="show" :on-close="onClose" size="modal-big">
+  <woot-modal v-model:show="localShow" :on-close="onClose" size="modal-big">
     <woot-modal-header
       :header-title="$t('WHATSAPP_TEMPLATES.MODAL.TITLE')"
       :header-content="modalHeaderContent"

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

@@ -1,5 +1,4 @@
 <script>
-import { defineModel } from 'vue';
 import { required } from '@vuelidate/validators';
 import { useVuelidate } from '@vuelidate/core';
 import Modal from '../../Modal.vue';
@@ -9,6 +8,7 @@ export default {
     Modal,
   },
   props: {
+    show: { type: Boolean, default: false },
     title: { type: String, default: '' },
     message: { type: String, default: '' },
     confirmText: { type: String, default: '' },
@@ -16,10 +16,9 @@ export default {
     confirmValue: { type: String, default: '' },
     confirmPlaceHolderText: { type: String, default: '' },
   },
-  emits: ['onClose', 'onConfirm'],
+  emits: ['onClose', 'onConfirm', 'update:show'],
   setup() {
-    const show = defineModel('show', { type: Boolean, default: false });
-    return { v$: useVuelidate(), show };
+    return { v$: useVuelidate() };
   },
   data() {
     return {
@@ -34,6 +33,16 @@ export default {
       },
     },
   },
+  computed: {
+    localShow: {
+      get() {
+        return this.show;
+      },
+      set(value) {
+        this.$emit('update:show', value);
+      },
+    },
+  },
   methods: {
     closeModal() {
       this.value = '';
@@ -47,7 +56,7 @@ export default {
 </script>
 
 <template>
-  <Modal v-model:show="show" :on-close="closeModal">
+  <Modal v-model:show="localShow" :on-close="closeModal">
     <woot-modal-header :header-title="title" :header-content="message" />
     <form @submit.prevent="onConfirm">
       <woot-input