PermissionBasedRouting VueJS - vue.js

Question

I am trying to give access to the teams with multiple users. Unfortunatly other users are also able to view the VueComponents. The Vue code runs perfectly but other users, who are not in team 'admins' are able to see the components. Also, the console prints teamName as 'admins' even the current logged user is not part of the team. For example the current user is 'test' user which is not part of admin teams but the console prints 'admins'. please see the image console output, contains teamsList with users.
Vue file
this.loadTeams()
.then((response) => {
this.teamsList = response.data;
console.log("teams list after loadteams", this.teamsList);
this.teamsList.forEach((item) => {
if (item.teamName === "admins") {
this.haveAccess = true;
console.log("teamName is :", item.teamName);
}
});
})
router file
router.beforeEach((to, from, next) => {
// condition for teams to access administration page
if (to.meta.haveAccess && store.getters("administration/teams", ["teamsList"])) {
this.teamsList.forEach((item) => {
if (item.teamName === "admins") {
next({
name:'Administration',
params: {
desiredRoute: to.fullPath
}})
}
else {
router.push({
name:'NotFound'
})
}
});
}
});