3 files changed, 29 insertions, 19 deletions
diff --git a/app/assets/javascripts/repo/components/repo_edit_button.vue b/app/assets/javascripts/repo/components/repo_edit_button.vue
index 2616ef6c7e8..91ad7835b28 100644
--- a/app/assets/javascripts/repo/components/repo_edit_button.vue
+++ b/app/assets/javascripts/repo/components/repo_edit_button.vue
@@ -24,6 +24,20 @@ export default {
       Store.toggleBlobView();
     },
   },
+
+  watch: {
+    editMode() {
+      if (this.editMode) {
+        $('.project-refs-form').addClass('disabled');
+        $('.fa-long-arrow-right').show();
+        $('.project-refs-target-form').show();
+      } else {
+        $('.project-refs-form').removeClass('disabled');
+        $('.fa-long-arrow-right').hide();
+        $('.project-refs-target-form').hide();
+      }
+    },
+  }
 }
 </script>
 
diff --git a/app/assets/javascripts/repo/components/repo_editor.vue b/app/assets/javascripts/repo/components/repo_editor.vue
index d6350cdf152..1bd25a5b655 100644
--- a/app/assets/javascripts/repo/components/repo_editor.vue
+++ b/app/assets/javascripts/repo/components/repo_editor.vue
@@ -7,6 +7,13 @@ import Helper from '../helpers/repo_helper';
 const RepoEditor = {
   data: () => Store,
 
+  destroyed() {
+    // this.monacoInstance.getModels().forEach((m) => {
+    //   m.dispose();
+    // });
+    this.monacoInstance.destroy();
+  },
+
   mounted() {
     Service.getRaw(this.activeFile.raw_path)
     .then((rawResponse) => {
@@ -67,26 +74,15 @@ const RepoEditor = {
       });
     },
 
-    editMode() {
-      if (this.editMode) {
-        $('.project-refs-form').addClass('disabled');
-        $('.fa-long-arrow-right').show();
-        $('.project-refs-target-form').show();
-      } else {
-        $('.project-refs-form').removeClass('disabled');
-        $('.fa-long-arrow-right').hide();
-        $('.project-refs-target-form').hide();
-      }
-    },
-
     activeFileLabel() {
       this.showHide();
     },
 
     dialog: {
       handler(obj) {
-        if (obj.status) {
-          obj.status = false; // eslint-disable-line no-param-reassign
+        let newObj = obj;
+        if (newObj.status) {
+          newObj.status = false;
           this.openedFiles.map((file) => {
             const f = file;
             if (f.active) {
diff --git a/app/assets/javascripts/repo/components/repo_preview.vue b/app/assets/javascripts/repo/components/repo_preview.vue
index fb2724379d6..edeeb9ec3a8 100644
--- a/app/assets/javascripts/repo/components/repo_preview.vue
+++ b/app/assets/javascripts/repo/components/repo_preview.vue
@@ -1,9 +1,11 @@
 <script>
-import RepoStore from '../stores/repo_store';
+import Store from '../stores/repo_store';
 
 export default {
-  data: () => RepoStore,
-  
+  data: () => Store,
+  mounted() {
+    $(this.$el).find('.file-content').syntaxHighlight();
+  },
   computed: {
     html() {
       return this.activeFile.html;
@@ -11,13 +13,11 @@ export default {
   },
 
   watch: {
-
     html() {
       this.$nextTick(() => {
         $(this.$el).find('.file-content').syntaxHighlight();
       });
     }
-
   }
 }
 </script>