Update profile to only show current user logged in

src/components/user/updateProfileInfo.vue

             <th>Telephone Number</th>
             <th>Email</th>
             <th>Role</th>
-            <th></th>
+            <th>Modify</th>
           </tr>
         </thead>
         <tbody>
-          <tr v-for="(item, i) in individuals" :key="i">
-            <td>{{ item.id }}</td>
-            <td>{{ item.name }}</td>
-            <td>{{ item.surname }}</td>
-            <td>{{ item.cellNumber }}</td>
-            <td>{{ item.telephone }}</td>
-            <td>{{ item.email }}</td>
-            <td v-if="item.user">{{ item.user.role }}</td>
-            <td v-else></td>
+          <tr>
+            <td>{{ user.id }}</td>
+            <td>{{ indiv.name }}</td>
+            <td>{{ indiv.surname }}</td>
+            <td>{{ indiv.cellNumber }}</td>
+            <td>{{ indiv.landlineNumber }}</td>
+            <td>{{ indiv.emailAddress }}</td>
+            <td>{{ user.role }}</td>
             <td>
               <button
                 type="button"
 </template>
 
 <script>
-import { mapState, mapActions } from 'vuex';
+import { mapState, mapActions, mapGetters } from 'vuex';
 import Individual from './registerPage.vue';
 
 export default {
   components: {
     Individual,
   },
+  props: {
+    currentUser: {
+      name: undefined,
+      surname: undefined,
+      idNumber: undefined,
+      companyRegNumber: undefined,
+      emailAddress: undefined,
+      cellNumber: undefined,
+      landlineNumer: undefined,
+      bankingDetails: {},
+      address: {},
+    },
+    showChangeCurrentUser: {
+      default: false,
+    },
+    showBank: {
+      default: false,
+    },
+    showAddress: {
+      default: false,
+    },
+  },
   data() {
     return {
       item: {},
     };
   },
-  methods: {
-    ...mapActions('register', ['getIndividuals']),
-  },
   mounted() {
-    this.getIndividuals();
+    if (!this.currentUser) {
+      if (this.user) {
+        this.getIndividual(this.user.id);
+      }
+    }
   },
   computed: {
-    ...mapState('register', ['individuals']),
+    ...mapState('individual', ['indiv']),
+    ...mapGetters({
+      user: 'authentication/getUser',
+    }),
+  },
+  methods: {
+    ...mapActions('individual', ['getIndividual']),
   },
 };
 </script>

src/store/modules/user/authentication.js

 export default {
   namespaced: true,
   state: {
-    username: 'kobusb',
-    password: '123123',
+    username: 'UniVate2018',
+    password: 'UniVate2018',
     isLoggedIn: log.isLoggedIn(),
     flag: false,
     status: undefined,
     getUser: () => log.getUser(),
   },
   actions: {
-    init({
-      commit,
-    }) {
+    init({ commit }) {
       if (!log.isLoggedIn() && log.tokenExpired) {
         log.clearValues();
       } else log.updateTokenExpiry();
         agency: log.getJSONObject('agency'),
       });
     },
-    login({
-      commit,
-      state,
-    }) {
+    login({ commit, state }) {
       axios({
         url: '/api/register/authenticate',
         data: {
           commit('auth_error', err.data);
         });
     },
-    logout({
-      commit,
-    }) {
+    logout({ commit }) {
       return new Promise(() => {
         commit('logout');
         log.clearValues();

src/store/modules/user/individual.js

   },
   getters: {},
   actions: {
-    getIndividual({
-      commit,
-    }, userId) {
+    getIndividual({ commit }, userId) {
       axios
         .get(`/api/individual/getIndividual/${userId}`)
         .then(r => commit('setItem', {
-          name: 'item',
-          value: r.data,
-        })).catch(console.error);
+            name: 'indiv',
+            value: r.data,
+          }),)
+        .catch(console.error);
     },
   },
 };