move edit button to its own view model abstract object

app/assets/javascripts/repo/index.js

 import $ from 'jquery';
-import Vue from 'vue';
-import Translate from '../vue_shared/translate';
-import EditButton from './repo_edit_button';
 import Service from './services/repo_service';
 import Store from './stores/repo_store';
 import { initRepoViewModel } from './view_models/repo_view_model';
-
-Vue.use(Translate);
+import { initRepoEditButtonViewModel } from './view_models/repo_edit_button_view_model';
 
 function initDropdowns() {
   $('.project-refs-target-form').hide();
@@ -42,15 +38,14 @@ function setInitialStore(data) {
 
 function initRepo() {
   const repo = document.getElementById('repo');
+  const editButton = document.getElementById('editable-mode');
 
   setInitialStore(repo.dataset);
   addEventsForNonVueEls();
   initDropdowns();
 
   initRepoViewModel(repo);
-
-  const editButton = document.getElementById('editable-mode');
-  Store.editButton = new EditButton(editButton);
+  initRepoEditButtonViewModel(editButton);
 }
 
 $(initRepo);

app/assets/javascripts/repo/repo_edit_button.js

-import Vue from 'vue';
-import Store from './stores/repo_store';
-import RepoMixin from './mixins/repo_mixin';
-import { __ } from '../locale';
-
-export default class RepoEditButton {
-  constructor(el) {
-    this.initVue(el);
-  }
-
-  initVue(el) {
-    this.vue = new Vue({
-      el,
-      mixins: [RepoMixin],
-      data: () => Store,
-      computed: {
-        buttonLabel() {
-          return this.editMode ? __('Cancel edit') : __('Edit');
-        },
-
-        buttonIcon() {
-          return this.editMode ? [] : ['fa', 'fa-pencil'];
-        },
-      },
-      methods: {
-        editClicked() {
-          if (this.changedFiles.length) {
-            this.dialog.open = true;
-            return;
-          }
-          this.editMode = !this.editMode;
-        },
-      },
-    });
-  }
-}

app/assets/javascripts/repo/stores/repo_store.js

@@ -8,7 +8,6 @@ const RepoStore = {
   service: '',
   editor: '',
   sidebar: '',
-  editButton: '',
   editMode: false,
   isTree: false,
   isRoot: false,

app/assets/javascripts/repo/view_models/repo_edit_button_view_model.js

+import Vue from 'vue';
+import Store from '../stores/repo_store';
+import RepoMixin from '../mixins/repo_mixin';
+import Translate from '../../vue_shared/translate';
+import { __ } from '../../locale';
+
+Vue.use(Translate);
+
+const RepoEditButton = {
+  el: undefined,
+  mixins: [RepoMixin],
+  data: () => Store,
+  computed: {
+    buttonLabel() {
+      return this.editMode ? __('Cancel edit') : __('Edit');
+    },
+
+    buttonIcon() {
+      return this.editMode ? [] : ['fa', 'fa-pencil'];
+    },
+  },
+  methods: {
+    editClicked() {
+      if (this.changedFiles.length) {
+        this.dialog.open = true;
+        return;
+      }
+      this.editMode = !this.editMode;
+    },
+  },
+};
+
+function initRepoEditButtonViewModel(el) {
+  RepoEditButton.el = el;
+
+  return new Vue(RepoEditButton);
+}
+
+export {
+  RepoEditButton as default,
+  initRepoEditButtonViewModel,
+};

app/assets/javascripts/repo/view_models/repo_view_model.js

@@ -8,6 +8,9 @@ import RepoMixin from '../mixins/repo_mixin';
 import PopupDialog from '../../vue_shared/components/popup_dialog.vue';
 import Store from '../stores/repo_store';
 import MonacoLoaderHelper from '../helpers/monaco_loader_helper';
+import Translate from '../../vue_shared/translate';
+
+Vue.use(Translate);
 
 const Repo = {
   el: undefined,