1 files changed, 16 insertions, 18 deletions
diff --git a/app/assets/javascripts/groups/members/index.js b/app/assets/javascripts/groups/members/index.js
index 68fab42b543..4ca1756f10c 100644
--- a/app/assets/javascripts/groups/members/index.js
+++ b/app/assets/javascripts/groups/members/index.js
@@ -1,5 +1,7 @@
 import Vue from 'vue';
+import Vuex from 'vuex';
 import App from './components/app.vue';
+import membersModule from '~/vuex_shared/modules/members';
 import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
 
 export default el => {
@@ -7,26 +9,22 @@ export default el => {
     return () => {};
   }
 
+  Vue.use(Vuex);
+
+  const { members, groupId } = el.dataset;
+
+  const store = new Vuex.Store({
+    ...membersModule({
+      members: convertObjectPropsToCamelCase(JSON.parse(members), { deep: true }),
+      sourceId: parseInt(groupId, 10),
+      currentUserId: gon.current_user_id || null,
+    }),
+  });
+
   return new Vue({
     el,
     components: { App },
-    data() {
-      const { members, groupId, currentUserId } = this.$options.el.dataset;
-
-      return {
-        members: convertObjectPropsToCamelCase(JSON.parse(members), { deep: true }),
-        groupId: parseInt(groupId, 10),
-        ...(currentUserId ? { currentUserId: parseInt(currentUserId, 10) } : {}),
-      };
-    },
-    render(createElement) {
-      return createElement('app', {
-        props: {
-          members: this.members,
-          groupId: this.groupId,
-          currentUserId: this.currentUserId,
-        },
-      });
-    },
+    store,
+    render: createElement => createElement('app'),
   });
 };