diff --git a/app/assets/javascripts/autosave.js b/app/assets/javascripts/autosave.js
index e8c59fab609..fa00a3cf386 100644
--- a/app/assets/javascripts/autosave.js
+++ b/app/assets/javascripts/autosave.js
@@ -53,8 +53,4 @@ export default class Autosave {
 
     return window.localStorage.removeItem(this.key);
   }
-
-  dispose() {
-    this.field.off('input');
-  }
 }
diff --git a/app/assets/javascripts/diffs/components/diff_line_note_form.vue b/app/assets/javascripts/diffs/components/diff_line_note_form.vue
index cbe4551d06b..32f9516d332 100644
--- a/app/assets/javascripts/diffs/components/diff_line_note_form.vue
+++ b/app/assets/javascripts/diffs/components/diff_line_note_form.vue
@@ -1,17 +1,17 @@
 <script>
+import $ from 'jquery';
 import { mapState, mapGetters, mapActions } from 'vuex';
 import createFlash from '~/flash';
 import { s__ } from '~/locale';
 import noteForm from '../../notes/components/note_form.vue';
 import { getNoteFormData } from '../store/utils';
-import autosave from '../../notes/mixins/autosave';
-import { DIFF_NOTE_TYPE } from '../constants';
+import Autosave from '../../autosave';
+import { DIFF_NOTE_TYPE, NOTE_TYPE } from '../constants';
 
 export default {
   components: {
     noteForm,
   },
-  mixins: [autosave],
   props: {
     diffFileHash: {
       type: String,
@@ -41,35 +41,28 @@ export default {
   },
   mounted() {
     if (this.isLoggedIn) {
+      const noteableData = this.getNoteableData;
       const keys = [
-        this.noteableData.diff_head_sha,
+        NOTE_TYPE,
+        this.noteableType,
+        noteableData.id,
+        noteableData.diff_head_sha,
         DIFF_NOTE_TYPE,
-        this.noteableData.source_project_id,
+        noteableData.source_project_id,
         this.line.lineCode,
       ];
 
-      this.initAutoSave(this.noteableData, keys);
+      this.autosave = new Autosave($(this.$refs.noteForm.$refs.textarea), keys);
     }
   },
   methods: {
     ...mapActions('diffs', ['cancelCommentForm']),
     ...mapActions(['saveNote', 'refetchDiscussionById']),
-    handleCancelCommentForm(shouldConfirm, isDirty) {
-      if (shouldConfirm && isDirty) {
-        const msg = s__('Notes|Are you sure you want to cancel creating this comment?');
-
-        // eslint-disable-next-line no-alert
-        if (!window.confirm(msg)) {
-          return;
-        }
-      }
-
+    handleCancelCommentForm() {
+      this.autosave.reset();
       this.cancelCommentForm({
         lineCode: this.line.lineCode,
       });
-      this.$nextTick(() => {
-        this.resetAutoSave();
-      });
     },
     handleSaveNote(note) {
       const selectedDiffFile = this.getDiffFileByHash(this.diffFileHash);
diff --git a/app/assets/javascripts/notes/components/note_form.vue b/app/assets/javascripts/notes/components/note_form.vue
index abcd4422d7c..26482a02e00 100644
--- a/app/assets/javascripts/notes/components/note_form.vue
+++ b/app/assets/javascripts/notes/components/note_form.vue
@@ -7,7 +7,7 @@ import issuableStateMixin from '../mixins/issuable_state';
 import resolvable from '../mixins/resolvable';
 
 export default {
-  name: 'NoteForm',
+  name: 'IssueNoteForm',
   components: {
     issueWarning,
     markdownField,
diff --git a/app/assets/javascripts/notes/components/noteable_discussion.vue b/app/assets/javascripts/notes/components/noteable_discussion.vue
index 2f1a68731c7..bee635398b3 100644
--- a/app/assets/javascripts/notes/components/noteable_discussion.vue
+++ b/app/assets/javascripts/notes/components/noteable_discussion.vue
@@ -6,7 +6,6 @@ import nextDiscussionsSvg from 'icons/_next_discussion.svg';
 import { convertObjectPropsToCamelCase, scrollToElement } from '~/lib/utils/common_utils';
 import { truncateSha } from '~/lib/utils/text_utility';
 import systemNote from '~/vue_shared/components/notes/system_note.vue';
-import { s__ } from '~/locale';
 import Flash from '../../flash';
 import { SYSTEM_NOTE } from '../constants';
 import userAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue';
@@ -145,17 +144,19 @@ export default {
       return this.isDiffDiscussion ? '' : 'card discussion-wrapper';
     },
   },
-  watch: {
-    isReplying() {
-      if (this.isReplying) {
-        this.$nextTick(() => {
-          // Pass an extra key to separate reply and note edit forms
-          this.initAutoSave(this.transformedDiscussion, ['Reply']);
-        });
+  mounted() {
+    if (this.isReplying) {
+      this.initAutoSave(this.transformedDiscussion);
+    }
+  },
+  updated() {
+    if (this.isReplying) {
+      if (!this.autosave) {
+        this.initAutoSave(this.transformedDiscussion);
       } else {
-        this.disposeAutoSave();
+        this.setAutoSave();
       }
-    },
+    }
   },
   created() {
     this.resolveDiscussionsSvg = resolveDiscussionsSvg;
@@ -193,18 +194,16 @@ export default {
     showReplyForm() {
       this.isReplying = true;
     },
-    cancelReplyForm(shouldConfirm, isDirty) {
-      if (shouldConfirm && isDirty) {
-        const msg = s__('Notes|Are you sure you want to cancel creating this comment?');
-
+    cancelReplyForm(shouldConfirm) {
+      if (shouldConfirm && this.$refs.noteForm.isDirty) {
         // eslint-disable-next-line no-alert
-        if (!window.confirm(msg)) {
+        if (!window.confirm('Are you sure you want to cancel creating this comment?')) {
           return;
         }
       }
 
-      this.isReplying = false;
       this.resetAutoSave();
+      this.isReplying = false;
     },
     saveReply(noteText, form, callback) {
       const postData = {
@@ -421,8 +420,7 @@ Please check your network connection and try again.`;
                     :is-editing="false"
                     save-button-title="Comment"
                     @handleFormUpdate="saveReply"
-                    @cancelForm="cancelReplyForm"
-                  />
+                    @cancelForm="cancelReplyForm" />
                   <note-signed-out-widget v-if="!canReply" />
                 </div>
               </div>
diff --git a/app/assets/javascripts/notes/mixins/autosave.js b/app/assets/javascripts/notes/mixins/autosave.js
index 4f45f912479..36cc8d5d056 100644
--- a/app/assets/javascripts/notes/mixins/autosave.js
+++ b/app/assets/javascripts/notes/mixins/autosave.js
@@ -4,18 +4,12 @@ import { capitalizeFirstCharacter } from '../../lib/utils/text_utility';
 
 export default {
   methods: {
-    initAutoSave(noteable, extraKeys = []) {
-      let keys = [
+    initAutoSave(noteable) {
+      this.autosave = new Autosave($(this.$refs.noteForm.$refs.textarea), [
         'Note',
-        capitalizeFirstCharacter(noteable.noteable_type || noteable.noteableType),
+        capitalizeFirstCharacter(noteable.noteable_type),
         noteable.id,
-      ];
-
-      if (extraKeys) {
-        keys = keys.concat(extraKeys);
-      }
-
-      this.autosave = new Autosave($(this.$refs.noteForm.$refs.textarea), keys);
+      ]);
     },
     resetAutoSave() {
       this.autosave.reset();
@@ -23,8 +17,5 @@ export default {
     setAutoSave() {
       this.autosave.save();
     },
-    disposeAutoSave() {
-      this.autosave.dispose();
-    },
   },
 };
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 5ac5d0535ad..e63a1f129d6 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -3610,9 +3610,6 @@ msgstr ""
 msgid "Note: Consider asking your GitLab administrator to configure %{github_integration_link}, which will allow login via GitHub and allow importing repositories without generating a Personal Access Token."
 msgstr ""
 
-msgid "Notes|Are you sure you want to cancel creating this comment?"
-msgstr ""
-
 msgid "Notification events"
 msgstr ""
 
diff --git a/spec/javascripts/autosave_spec.js b/spec/javascripts/autosave_spec.js
index dcb1c781591..38ae5b7e00c 100644
--- a/spec/javascripts/autosave_spec.js
+++ b/spec/javascripts/autosave_spec.js
@@ -59,10 +59,12 @@ describe('Autosave', () => {
 
         Autosave.prototype.restore.call(autosave);
 
-        expect(field.trigger).toHaveBeenCalled();
+        expect(
+          field.trigger,
+        ).toHaveBeenCalled();
       });
 
-      it('triggers native event', done => {
+      it('triggers native event', (done) => {
         autosave.field.get(0).addEventListener('change', () => {
           done();
         });
@@ -79,7 +81,9 @@ describe('Autosave', () => {
       it('does not trigger event', () => {
         spyOn(field, 'trigger').and.callThrough();
 
-        expect(field.trigger).not.toHaveBeenCalled();
+        expect(
+          field.trigger,
+        ).not.toHaveBeenCalled();
       });
     });
   });
diff --git a/spec/javascripts/diffs/components/diff_line_note_form_spec.js b/spec/javascripts/diffs/components/diff_line_note_form_spec.js
index 6fe5fdaf7f9..4600aaea70b 100644
--- a/spec/javascripts/diffs/components/diff_line_note_form_spec.js
+++ b/spec/javascripts/diffs/components/diff_line_note_form_spec.js
@@ -3,7 +3,6 @@ import DiffLineNoteForm from '~/diffs/components/diff_line_note_form.vue';
 import store from '~/mr_notes/stores';
 import { createComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
 import diffFileMockData from '../mock_data/diff_file';
-import { noteableDataMock } from '../../notes/mock_data';
 
 describe('DiffLineNoteForm', () => {
   let component;
@@ -22,9 +21,10 @@ describe('DiffLineNoteForm', () => {
       noteTargetLine: diffLines[0],
     });
 
-    Object.defineProperties(component, {
-      noteableData: { value: noteableDataMock },
-      isLoggedIn: { value: true },
+    Object.defineProperty(component, 'isLoggedIn', {
+      get() {
+        return true;
+      },
     });
 
     component.$mount();
@@ -32,37 +32,12 @@ describe('DiffLineNoteForm', () => {
 
   describe('methods', () => {
     describe('handleCancelCommentForm', () => {
-      it('should ask for confirmation when shouldConfirm and isDirty passed as truthy', () => {
-        spyOn(window, 'confirm').and.returnValue(false);
-
-        component.handleCancelCommentForm(true, true);
-        expect(window.confirm).toHaveBeenCalled();
-      });
-
-      it('should ask for confirmation when one of the params false', () => {
-        spyOn(window, 'confirm').and.returnValue(false);
-
-        component.handleCancelCommentForm(true, false);
-        expect(window.confirm).not.toHaveBeenCalled();
-
-        component.handleCancelCommentForm(false, true);
-        expect(window.confirm).not.toHaveBeenCalled();
-      });
-
-      it('should call cancelCommentForm with lineCode', done => {
-        spyOn(window, 'confirm');
+      it('should call cancelCommentForm with lineCode', () => {
         spyOn(component, 'cancelCommentForm');
-        spyOn(component, 'resetAutoSave');
         component.handleCancelCommentForm();
 
-        expect(window.confirm).not.toHaveBeenCalled();
-        component.$nextTick(() => {
-          expect(component.cancelCommentForm).toHaveBeenCalledWith({
-            lineCode: diffLines[0].lineCode,
-          });
-          expect(component.resetAutoSave).toHaveBeenCalled();
-
-          done();
+        expect(component.cancelCommentForm).toHaveBeenCalledWith({
+          lineCode: diffLines[0].lineCode,
         });
       });
     });
@@ -91,7 +66,7 @@ describe('DiffLineNoteForm', () => {
 
   describe('mounted', () => {
     it('should init autosave', () => {
-      const key = 'autosave/Note/Issue/98//DiffNote//1c497fbb3a46b78edf04cc2a2fa33f67e3ffbe2a_1_1';
+      const key = 'autosave/Note/issue///DiffNote//1c497fbb3a46b78edf04cc2a2fa33f67e3ffbe2a_1_1';
 
       expect(component.autosave).toBeDefined();
       expect(component.autosave.key).toEqual(key);
diff --git a/spec/javascripts/notes/components/noteable_discussion_spec.js b/spec/javascripts/notes/components/noteable_discussion_spec.js
index f3f50aed232..7da931fd9cb 100644
--- a/spec/javascripts/notes/components/noteable_discussion_spec.js
+++ b/spec/javascripts/notes/components/noteable_discussion_spec.js
@@ -46,15 +46,10 @@ describe('noteable_discussion component', () => {
 
     it('should toggle reply form', done => {
       vm.$el.querySelector('.js-vue-discussion-reply').click();
-
       Vue.nextTick(() => {
+        expect(vm.$refs.noteForm).not.toBeNull();
         expect(vm.isReplying).toEqual(true);
-
-        // There is a watcher for `isReplying` which will init autosave in the next tick
-        Vue.nextTick(() => {
-          expect(vm.$refs.noteForm).not.toBeNull();
-          done();
-        });
+        done();
       });
     });