VueJS - Cannot read properties of undefined

Question

can someone help me debug this issue?

I am at the VueJS course and I have this weird issue (it happens even if I copy-paste source code from the course and it seems like the guy does not have it).

So here is the app image:

When I click on teams in the navigation it opens me all the available teams with some info and the option to see members of each team.

When I click on Team 2 it should go to team 2 and its details.

Here is the working code:

<template>
<section>
    <h2>{{ teamName }}</h2>
    <ul>
        <user-item
                v-for="member in members"
                :key="member.id"
                :name="member.fullName"
                :role="member.role"
        ></user-item>
    </ul>
</section>
<router-link to="/teams/t2">Team 2</router-link>
</template>

<script>
    import UserItem from '../users/UserItem.vue';

    export default {
        components: {
            UserItem
        },
        inject: ['users', 'teams'],
        data() {
            return {
                teamName: '',
                members: []
            };
        },
        methods: {
            loadMembersData(route) {
                const teamId = route.params.teamId;
                const selectedTeam = this.teams.find((team) => team.id === teamId);
                const foundMembers = selectedTeam.members;
                const selectedMembers = [];

                for (const member of foundMembers) {
                    const selectedUser = this.users.find((user) => user.id === member);
                    selectedMembers.push(selectedUser);
                }

                this.members = selectedMembers;
                this.teamName = selectedTeam.name;
            }
        },
        created() {
            this.loadMembersData(this.$route);
        },
        watch: {
          $route(newRoute) {
              this.loadMembersData(newRoute);
          }
        }
    };
</script>

<style scoped>
    section {
        margin: 2rem auto;
        max-width: 40rem;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
        padding: 1rem;
        border-radius: 12px;
    }

    h2 {
        margin: 0.5rem 0;
    }

    ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }
</style>

But when I add watcher then my navigation does not work and I get this issue:

Any ideas on how to solve this?

Thanks

Note: I am working with VueJS 3 if it means anything :)

SOLVED:

methods: {
        loadMembersData(route) {
            const teamId = route.params.teamId;
            const selectedTeam = this.teams.find((team) => team.id === teamId);
            if (selectedTeam) {
                const foundMembers = selectedTeam.members;
                const selectedMembers = [];

                for (const member of foundMembers) {
                    const selectedUser = this.users.find((user) => user.id === member);
                    selectedMembers.push(selectedUser);
                }

                this.members = selectedMembers;
                this.teamName = selectedTeam.name;
            }
        }
    },

Answer 1

Solution that solved the issue:

methods: {
        loadMembersData(route) {
            const teamId = route.params.teamId;
            const selectedTeam = this.teams.find((team) => team.id === teamId);
            if (selectedTeam) {
                const foundMembers = selectedTeam.members;
                const selectedMembers = [];

                for (const member of foundMembers) {
                    const selectedUser = this.users.find((user) => user.id === member);
                    selectedMembers.push(selectedUser);
                }

                this.members = selectedMembers;
                this.teamName = selectedTeam.name;
            }
        }
    },