Remove unnecessary reactive properties in view mount.

app/assets/javascripts/mr_notes/init_notes.js

@@ -15,19 +15,6 @@ export default () => {
       notesApp,
     },
     store,
-    data() {
-      const notesDataset = document.getElementById('js-vue-mr-discussions').dataset;
-      const noteableData = JSON.parse(notesDataset.noteableData);
-      noteableData.noteableType = notesDataset.noteableType;
-      noteableData.targetType = notesDataset.targetType;
-
-      return {
-        noteableData,
-        currentUserData: JSON.parse(notesDataset.currentUserData),
-        notesData: JSON.parse(notesDataset.notesData),
-        helpPagePath: notesDataset.helpPagePath,
-      };
-    },
     computed: {
       ...mapGetters(['discussionTabCounter']),
       ...mapState({
@@ -67,6 +54,19 @@ export default () => {
       updateDiscussionTabCounter() {
         this.notesCountBadge.text(this.discussionTabCounter);
       },
+      dataset() {
+        const data = this.$el.dataset;
+        const noteableData = JSON.parse(data.noteableData);
+        noteableData.noteableType = data.noteableType;
+        noteableData.targetType = data.targetType;
+
+        return {
+          noteableData,
+          notesData: JSON.parse(data.notesData),
+          userData: JSON.parse(data.currentUserData),
+          helpPagePath: data.helpPagePath,
+        };
+      },
     },
     render(createElement) {
       // NOTE: Even though `discussionKeyboardNavigator` is added to the `notes-app`,
@@ -76,11 +76,8 @@ export default () => {
       return createElement(discussionKeyboardNavigator, [
         createElement('notes-app', {
           props: {
-            noteableData: this.noteableData,
-            notesData: this.notesData,
-            userData: this.currentUserData,
+            ...this.dataset(),
             shouldShow: this.isShowTabActive,
-            helpPagePath: this.helpPagePath,
           },
         }),
       ]);

app/assets/javascripts/notes/index.js

@@ -14,38 +14,36 @@ document.addEventListener('DOMContentLoaded', () => {
       notesApp,
     },
     store,
-    data() {
-      const notesDataset = document.getElementById('js-vue-notes').dataset;
-      const parsedUserData = JSON.parse(notesDataset.currentUserData);
-      const noteableData = JSON.parse(notesDataset.noteableData);
-      let currentUserData = {};
+    methods: {
+      setData() {
+        const notesDataset = this.$el.dataset;
+        const parsedUserData = JSON.parse(notesDataset.currentUserData);
+        const noteableData = JSON.parse(notesDataset.noteableData);
+        let currentUserData = {};
 
-      noteableData.noteableType = notesDataset.noteableType;
-      noteableData.targetType = notesDataset.targetType;
+        noteableData.noteableType = notesDataset.noteableType;
+        noteableData.targetType = notesDataset.targetType;
 
-      if (parsedUserData) {
-        currentUserData = {
-          id: parsedUserData.id,
-          name: parsedUserData.name,
-          username: parsedUserData.username,
-          avatar_url: parsedUserData.avatar_path || parsedUserData.avatar_url,
-          path: parsedUserData.path,
-        };
-      }
+        if (parsedUserData) {
+          currentUserData = {
+            id: parsedUserData.id,
+            name: parsedUserData.name,
+            username: parsedUserData.username,
+            avatar_url: parsedUserData.avatar_path || parsedUserData.avatar_url,
+            path: parsedUserData.path,
+          };
+        }
 
-      return {
-        noteableData,
-        currentUserData,
-        notesData: JSON.parse(notesDataset.notesData),
-      };
+        return {
+          noteableData,
+          userData: currentUserData,
+          notesData: JSON.parse(notesDataset.notesData),
+        };
+      },
     },
     render(createElement) {
       return createElement('notes-app', {
-        props: {
-          noteableData: this.noteableData,
-          notesData: this.notesData,
-          userData: this.currentUserData,
-        },
+        props: { ...this.setData() },
       });
     },
   });