Initial version of main component, Vuex store and service of issue discussions refactor.

app/assets/javascripts/notes/components/issue_notes.vue

+<script>
+import Vue from 'vue';
+import Vuex from 'vuex';
+import storeOptions from '../stores/issue_notes_store';
+
+Vue.use(Vuex);
+const store = new Vuex.Store(storeOptions);
+
+export default {
+  name: 'IssueNotes',
+  store,
+  data() {
+    return {
+      isLoading: true,
+    };
+  },
+  mounted() {
+    const path = this.$el.parentNode.dataset.discussionsPath;
+    this.$store.dispatch('fetchNotes', path)
+      .finally(() => {
+        this.isLoading = false;
+      });
+  },
+};
+</script>
+
+<template>
+  <div id="notes">
+    <div
+      v-if="isLoading"
+      class="loading">
+      <i
+        aria-hidden="true"
+        class="fa fa-spinner fa-spin" />
+    </div>
+  </div>
+</template>

app/assets/javascripts/notes/index.js

 import Vue from 'vue';
-import Vuex from 'vuex';
+import IssueNotes from './components/issue_notes.vue';
 
-Vue.use(Vuex);
-
-document.addEventListener('DOMContentLoaded', () => {
-  // instantiate Vue here...
-});
+document.addEventListener('DOMContentLoaded', () => new Vue({
+  el: '#js-notes',
+  components: { IssueNotes },
+  template: `
+    <issue-notes />
+  `,
+}));

app/assets/javascripts/notes/services/issue_notes_service.js

+import Vue from 'vue';
+import VueResource from 'vue-resource';
+
+Vue.use(VueResource);
+
+export default {
+  fetchNotes(endpoint) {
+    return Vue.http.get(endpoint);
+  },
+};

app/assets/javascripts/notes/stores/issue_notes_store.js

+/* global Flash */
+/* eslint-disable no-param-reassign */
+
+import service from '../services/issue_notes_service';
+
+const state = {
+  notes: [],
+};
+
+const getters = {};
+
+const mutations = {
+  setNotes(vmState, notes) {
+    vmState.notes = notes;
+  },
+};
+
+const actions = {
+  fetchNotes(context, path) {
+    return service
+      .fetchNotes(path)
+      .then(res => res.json())
+      .then((res) => {
+        context.commit('setNotes', res);
+      })
+      .catch(() => {
+        new Flash('Something went while fetching issue comments. Please try again.'); // eslint-disable-line
+      });
+  },
+};
+
+export default {
+  state,
+  getters,
+  mutations,
+  actions,
+};

app/views/projects/issues/_discussion.html.haml

@@ -3,10 +3,11 @@
     = link_to 'Reopen issue', issue_path(@issue, issue: {state_event: :reopen}, format: 'json'), data: {original_text: "Reopen issue", alternative_text: "Comment & reopen issue"}, class: "btn btn-nr btn-reopen btn-comment js-note-target-reopen #{issue_button_visibility(@issue, false)}", title: 'Reopen issue'
     = link_to 'Close issue', issue_path(@issue, issue: {state_event: :close}, format: 'json'), data: {original_text: "Close issue", alternative_text: "Comment & close issue"}, class: "btn btn-nr btn-close btn-comment js-note-target-close #{issue_button_visibility(@issue, true)}", title: 'Close issue'
 
-#js-notes
+%section{ data: { discussions_path: discussions_namespace_project_issue_path(@project.namespace, @project, @issue, format: :json) } }
+  #js-notes
   - content_for :page_specific_javascripts do
     = webpack_bundle_tag 'common_vue'
     = webpack_bundle_tag 'notes'
 
-#notes{ data: { discussions_path: discussions_namespace_project_issue_path(@project.namespace, @project, @issue, format: :json) } }
+#notes
   = render 'shared/notes/notes_with_form', :autocomplete => true