При клике на элемент дерева в консоли ошибка Cannot read property 'uid' of undefined" как получить доступ к обЪекту

При клике Не получает свойство Cannot read property 'uid' of undefined" проблема заключается в том что не получается в урле api/v0/users/${uid} - подставить свойство обьекта "uid"

data.json

[
    {
        "uid": "a123-456",
        "name": "Группа 1",
        "users": [
            {
                "uid": "a124-678",
                "name": "Иванов Иван"
            }
        ]
    },
    {
        "uid": "a126-789",
        "name": "Группа 2",
        "users": []
    }
]

Tree.vue

<template>
    <div class="">
        <users-group-tree-item
                :depth="0"
                :usersGroups="usersGroups"
                :label="usersGroups.name"
                @select-users-group-tree-item="selectTreeItemHandler"
                class="parent-tree"

        ></users-group-tree-item>

    </div>

</template>
<script>
   import UsersGroupTreeItem from "@/components/UsersGroupTreeItem.vue";


    export default {
        name: 'Tree',
        props: [
            'users',
            'usersGroups',
            'label'
        ],
        components:{
            UsersGroupTreeItem
        },
        methods: {
            selectUser(uid){
                this.$emit('select-user', uid);
                this.selectedUserUid = uid;

            },
            selectTreeItemHandler(o) {
                    this.$emit('select-user', o.uid);

            }

        }


}


</script>

UserGroupTreeItem.vue

<template>
    <div>
        <div class="label-wrapper">
            <div :class="labelClasses" class="label-name"
                 :style="indent">
                <i v-if="usersGroups"
                   :class="iconClasses"
                   class="list-icon"
                   @click="toggleChildren"
                >+</i>
                <b @click="onClick({uid: usersGroups.uid})">{{label}}</b>
            </div>
        </div>
        <div v-if="showChildren" class="tree--list">
            <users-group-tree-item class="tree-item"
                    v-for="userGroup in usersGroups"
                    :usersGroups="userGroup.users"
                    :label="userGroup.name"
                    :depth="depth + 1"
                    :key="userGroup.uid"
                    @select-users-group-tree-item="$emit('select-users-group-tree-item', $event)"

            ></users-group-tree-item>
        </div>
    </div>
</template>
<script>
    export default {
        name: 'users-group-tree-item',
        props: [
            'usersGroups',
            'label',
            'depth'
        ],
        data() {
            return {
                showChildren: true
            }
        },
        computed: {
            iconClasses() {
                return {
                    'fa-plus-square-o': !this.showChildren,
                    'fa-minus-square-o': this.showChildren
                }
            },
            labelClasses() {
                return { 'has-children': this.usersGroups }
            },
            indent() {
                return { transform: `padding-left(${this.depth * 25}px)` }
            }
        },
        methods: {
            toggleChildren() {
                this.showChildren = !this.showChildren;
            },
            selectUser(uid){
                this.$emit('select-user', uid);
                this.selectedUserUid = uid;

            },
            onClick(o) {
                this.$emit('select-users-group-tree-item', o);
            },
        }
    }
</script>

User.vue

<template>
    <div>  
      <Tree v-else :users="users" :usersGroups="usersGroups" @select-user="onSelectUser"/>
    </div>


  </main>

</template>

<script>
import { mapGetters } from 'vuex';
import UserTree from '@/components/Tree.vue';



export default {

  name: 'Users',

  data () {
    return {
      selectedObject: false,
      loadingUsers: true
    }
  },
  components: {
    Tree,
  },
  methods: {
    onSelectUser(uid) {
      this.$store.dispatch('fetchUser', uid);
      this.selectedObject = 'user';
    }
  },
  computed: {
    ...mapGetters([
        'users',
        'user',
        'usersGroups',
    ])


  },
  mounted(){
    this.$store.dispatch('fetchUsers');
    this.$store.dispatch('fetchUsersGroups');

  }
}
</script>

store.js

import axios from '@/utils/axios.plugin'

export default {
    state: {
        users: [],
        usersGroups: [],
        usersLoading: false,


    },
    getters: {
        users: s => s.users,
        usersGroups: s => s.usersGroups,
        usersLoading: s => s.usersLoading,
        usersGroupsLoading: s => s.usersGroupsLoading,

    },
    actions: {
        fetchUsers(context){
            context.commit('startUsersLoading');
            axios.get('/example/users/')
                .then((response) => {
                    const users = response.data;
                    context.commit('setUsers', users);
                    context.commit('stopUsersLoading');
                })
                .catch(function (error) {
                    console.log(error);
                })

        },
        fetchUser(context, uid){
            context.commit('startUserLoading');
            axios.get(`/example/users/${uid}/`)
                .then((response) => {
                    context.commit('setUser', response.data);
                    context.commit('stopUserLoading');
                })
                .catch(function (error) {
                    console.log(error);
                })

        },
        fetchUsersGroups(context){
            context.commit('startUsersGroupsLoading');
            axios.get('/static/usergroup/data.json')
                .then((response) => {
                    const usersGroups = response.data;
                    context.commit('setUsersGroups', usersGroups);
                    context.commit('stopUsersGroupsLoading');


                }).catch((error) => {
                    console.log(error)
            })
        },




    },
    mutations: {
        setUsers: (state, payload) => { 
            state.users = payload;
        },
        setUsersGroups: (state, payload) => {
            state.usersGroups = payload;
        },
        startUsersLoading: (state) => state.usersLoading = true,
        stopUsersLoading: (state) => state.usersLoading = false,
        startUsersGroupsLoading: (state) => state.usersGroupsLoading = true,
        stopUsersGroupsLoading: (state) => state.usersGroupsLoading = false,

    },

}