Pusher Cannot read properties of undefined (reading 'push')

Question

I want to update the list of users with pusher. When I submit the console shows this error: enter image description here

I also get Uncaught refering to pusher.js The pusher.js cointains code for pusher and it is placed in the footer:

   let teamChannel = pusher.subscribe('team-list');
   teamChannel.bind('updated-team', function(data) {
     app.team.push(JSON.stringify(data)); 
   });
    

My event:

<?php

namespace App\Events;

use Illuminate\Broadcasting\Channel;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Broadcasting\PresenceChannel;
use Illuminate\Broadcasting\PrivateChannel;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Queue\SerializesModels;

class NewParticipant implements ShouldBroadcast
{
    use Dispatchable, InteractsWithSockets, SerializesModels;

    public $team;
    /**
     * Create a new event instance.
     *
     * @return void
     */
    public function __construct($team)
    {
        $this->team = $team;
    }

    /**
     * Get the channels the event should broadcast on.
     *
     * @return \Illuminate\Broadcasting\Channel|arrays
     */
    public function broadcastOn()
    {
        return new Channel('team-list');
    }

    public function broadcastAs() 
    {
        return 'updated-team';
    }
}

js from my Vue component:

<script>

    export default {
        data() {
            return {
                team: [],
            }
        }, 
        created() {
            this.fetchPlayer();
            this.listenForChanges();
        },
        methods: {
            fetchPlayer() {
                console.log('test');
            },
            listenForChanges() {
                window.Echo.channel('team-list')
                    .listen('updated-team', (e) => {
                        console.log("echo is working");
                        console.log("e is " + e);
                        })
            }
        },  
        computed: {
            teamList() {
                return this.team;
            }
        }
    }
    </script>

My controller has this function:

protected function addPlayer($event, Request $request) {   

    $profile = auth()->user()->profile;
    $profile->participate()->syncWithoutDetaching([$event->id], false);
    $team = $event->participants()->get();    
    event(new NewParticipant($team));

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

Update: I've moved my pusher code to app.js but the app is still undefined:

 const app = new Vue({
    el: '#app',
  });
  
  let body = document.querySelector("body");
  if(body.classList.contains('gruppo-app')) {
    Pusher.logToConsole = true;
  
    var pusher = new Pusher('mykey', {
      cluster: 'myclutes'
    });
  
    let teamChannel = pusher.subscribe('team-list');
    teamChannel.bind('updated-team', function(data) {
    app.team.push(JSON.stringify(data)); 
    });
  }


  

Answer 1

Update: The connection with the Pusher is not needed if the Laravel Echo is used. I focuesd on Echo and I've deleted the this block:

  let body = document.querySelector("body");
  if(body.classList.contains('gruppo-app')) {
    Pusher.logToConsole = true;
  
    var pusher = new Pusher('mykey', {
      cluster: 'myclutes'
    });
  
    let teamChannel = pusher.subscribe('team-list');
    teamChannel.bind('updated-team', function(data) {
    app.team.push(JSON.stringify(data)); 
    });
  }

To connect Echo correctly the dot . has to be added to the listen function like this:

 window.Echo.channel('team-list')
             .listen('.updated-team', (e) => {
                 console.log("echo is working");
                 console.log("e is " + e);
             })

Now the Pusher is working correctly.