diff --git a/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue b/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue
index 952b81bbc..03ed5d260 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue
@@ -22,8 +22,8 @@
       />
       <reply-email-head
         v-if="showReplyHead"
-        :clear-mails="clearMails"
-        @set-emails="setCcEmails"
+        :cc-emails.sync="ccEmails"
+        :bcc-emails.sync="bccEmails"
       />
       <resizable-text-area
         v-if="!showRichContentEditor"
@@ -142,7 +142,8 @@ export default {
       mentionSearchKey: '',
       hasUserMention: false,
       hasSlashCommand: false,
-      clearMails: false,
+      bccEmails: '',
+      ccEmails: '',
     };
   },
   computed: {
@@ -377,7 +378,6 @@ export default {
           this.showAlert(errorMessage);
         }
         this.hideEmojiPicker();
-        this.clearMails = false;
       }
     },
     replaceText(message) {
@@ -400,7 +400,8 @@ export default {
     clearMessage() {
       this.message = '';
       this.attachedFiles = [];
-      this.clearMails = true;
+      this.ccEmails = '';
+      this.bccEmails = '';
     },
     toggleEmojiPicker() {
       this.showEmojiPicker = !this.showEmojiPicker;
diff --git a/app/javascript/dashboard/components/widgets/conversation/ReplyEmailHead.vue b/app/javascript/dashboard/components/widgets/conversation/ReplyEmailHead.vue
index b8e193783..e82fb2ecc 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ReplyEmailHead.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ReplyEmailHead.vue
@@ -55,9 +55,13 @@
 import { validEmailsByComma } from './helpers/emailHeadHelper';
 export default {
   props: {
-    clearMails: {
-      type: Boolean,
-      default: false,
+    ccEmails: {
+      type: String,
+      default: '',
+    },
+    bccEmails: {
+      type: String,
+      default: '',
     },
   },
   data() {
@@ -67,6 +71,18 @@ export default {
       bccEmailsVal: '',
     };
   },
+  watch: {
+    bccEmails(newVal) {
+      if (newVal !== this.bccEmailsVal) {
+        this.bccEmailsVal = newVal;
+      }
+    },
+    ccEmails(newVal) {
+      if (newVal !== this.ccEmailsVal) {
+        this.ccEmailsVal = newVal;
+      }
+    },
+  },
   validations: {
     ccEmailsVal: {
       hasValidEmails(value) {
@@ -85,18 +101,10 @@ export default {
     },
     onBlur() {
       this.$v.$touch();
-      this.$emit("set-emails", { bccEmails: this.bccEmailsVal, ccEmails: this.ccEmailsVal });
+      this.$emit('update:bccEmails', this.bccEmailsVal);
+      this.$emit('update:ccEmails', this.ccEmailsVal);
     },
   },
-  watch: {
-    clearMails: function(value){
-      if(value) {
-        this.ccEmailsVal = '';
-        this.bccEmailsVal = '';
-        this.clearMails = false;
-      }
-    }
-  }
 };
 </script>
 <style lang="scss" scoped>