Laravel Vue.js after patch request get doesn't load all the data

Question

I want to dynamically hide the "Sign up" button when all the places for the event have been taken. I also update the list of signed-up users. After clicking on the Signup button the data is saved correctly on the backend but the frontend displays only the pictures of players and there are the usernames. After refreshing the page I can see the usernames and photos. How can I fix my code so all the data will be displayed after the patch? I'm using 2 Vue components:

AddPlayesComponent

<template>
    <div>
        <form  v-if="freePlaces == true || freePlaces == 1" @submit.prevent="submit()">  
                <button type="submit" name="participant">Sign up</button>
        </form>
    </div>
</template>

<script>
export default {
    data() {
        return {
            freePlaces: "",
            url: "",
        }
    }, 
    created() {
        this.getUrl();
        this.fetchStatus();
        this.showForm();
    },
    methods: {
        getUrl() {
            let id = window.location.href.split('/').pop();
            this.url = "/events/" + id + "/team" ;
        },
        fetchStatus() {
            let id = window.location.href.split('/').pop();
            axios.get('/events/'+ id + '/availabilty').then((response) => {
                this.freePlaces = response.data;
            })
        },
        showForm() {
            Echo.channel('team-list-count')
            .listen('.players-allowed', (data) => {
                this.freePlaces = data.playersAllowed;
            })
        },
        submit() {
            axios.post(this.url, {
                
                _method: 'patch'
            })
            .then(response => {
                console.log(response.data);
            })
            .catch(e => {
                console.log("Error is");
                console.log(e.data);
            });
        }
    },  
    computed: {
        availabilePlaces() {
            return this.freePlaces;
            return this.url;
        }
    }
}
</script>

and TeamListComponent

<template>
<div>
    <div v-for="(player, key) in team">
        <img :src="'/storage/' + player.profil_photo" alt="profile picture " >
        <a href="" alt="">{{ player.username }}</a>
    </div>

</div>
</template>
<script>
export default {
    data() {
        return {
            team: [],
        }
    }, 
    created() {
        this.fetchTeam();
        this.AddNewPlayerListener();
        this.DeleteNewPlayerListener();
    },
    methods: {
        fetchTeam() {
                let id = window.location.href.split('/').pop();
                axios.get('/events/'+ id + '/team').then((response) => {
                    this.team = response.data;
                })
        },
        AddNewPlayerListener() {
            Echo.channel('team-list')
                .listen('.updated-team', (data) => {
                  this.team = data.team;
                })
        },
        DeleteNewPlayerListener(){
                Echo.channel('team-list-delete')
                .listen('.updated-team', (data) => {
                this.team = data.team;
            })
        }
    },  
    computed: {
        teamList() {
            return this.team;
        }
    }
}
</script>

Controller contains this funcion:

protected function addPlayer($event) {   

    $registered = $event->registered_participants; 
    $registered++;
    $allowed = $event->allowed_participants;
    
    if($allowed <= $registered) {
        $playersAllowed = false;
        event(new ParticipantsCounter($playersAllowed));
        
        if($allowed < $registered) {
            return redirect()->route('event.show', [ 'event' => $event ]);
        }
    }

    $event->registered_participants = $registered;
    $event->save();

    $profile = auth()->user()->profile;
    $profile->participate()->syncWithoutDetaching([$event->id], false);

    $team = $event->participants()->get();

    foreach ($team as $player) {
        $user = User::where('id', $player->user_id)->first();
        $player->username = $user->username;
    }

    event(new NewParticipant($team));

    return redirect()->route('event.show', [ 'event' => $event ]);
}

Data after patch request:

    { "id": 5, 
"created_at": "2022-04-12T20:35:03.000000Z", 
"updated_at": "2022-04-12T20:35:40.000000Z", 
"user_id": 5, 
"name": "Marlena", 
"familyname": "Test", 
"location": "Amblève", 
"gender": "x", 
"birthdate": "2000-12-12", 
"favorite_sport": "hockey", 
"biography": "Here comes biography", 
"profil_photo": "profiles/kbERb4XrXnu379rtCcyWwb46pOq9UQAtkTKgr42W.jpg" }

Data after refreshing page:

    { "id": 5, 
    "created_at": "2022-04-12T20:35:03.000000Z", 
    "updated_at": "2022-04-12T20:35:40.000000Z", 
    "user_id": 5, 
    "name": "Marlena", 
    "familyname": "Test", 
    "location": "Amblève", 
    "gender": "x", 
    "birthdate": "2000-12-12", 
    "favorite_sport": "hockey", 
    "biography": "Here comes biography", 
    "profil_photo": "profiles/kbERb4XrXnu379rtCcyWwb46pOq9UQAtkTKgr42W.jpg", 
    "username": "testUser", 
    "pivot": { 
        "event_id": 1, 
        "profile_id": 5, 
        "created_at": "2022-04-25T15:27:37.000000Z", 
        "updated_at": "2022-04-25T15:27:37.000000Z" } 
}

Answer 1

Update: I solved it by creating an empty array where I push each player after adding a username.

$oldTeam = $event->participants()->get();
$team = [];
foreach ($oldTeam as $player) {
    $user = User::where('id', $player->user_id)->first();
    $player->username = $user->username;
    array_push($team, $player);
}