dynamic load by add new group member per slug

webapp/components/Group/GroupMember.vue

@@ -175,6 +175,10 @@ export default {
           mutation: changeGroupMemberRoleMutation(),
           variables: { groupId: this.groupId, userId: this.slugUser[0].id, roleInGroup: newRole },
         })
+        // this.$apollo.queries.GroupMembers.refetch()
+         this.$emit('loadGroupMembers')
+         this.slugUser = []
+         this.form.query = ''
         this.$toast.success(
           this.$t('group.changeMemberRole', { role: this.$t(`group.roles.${newRole}`) }),
         )

webapp/pages/group/edit/_id/members.vue

@@ -3,7 +3,7 @@
     <base-card>
       <ds-heading tag="h3">{{ $t('group.members') }}</ds-heading>
       <ds-space margin="large" />
-      <group-member :groupId="group.id" :groupMembers="groupMembers" />
+      <group-member :groupId="group.id" :groupMembers="groupMembers" @loadGroupMembers="loadGroupMembers" />
     </base-card>
   </div>
 </template>
@@ -44,5 +44,11 @@ export default {
       fetchPolicy: 'cache-and-network',
     },
   },
+  methods: {
+    loadGroupMembers(){
+      this.$apollo.queries.GroupMembers.refetch()
+      console.log('loadGroupMembers this.GroupMembers', this.GroupMembers)
+    }
+  },
 }
 </script>