Repeative websocket connection in laravel websocket + laravel echo

Question

I have a problem with laravel WebSocket and laravel echo in Vue js.

I wrote a chat system with laravel and Vue js and I want to add a delivery chat message if both receiver and sender are online, so I add laravel echo and connect it to my server with laravel WebSocket. it works very fine but when I want to update message status and add "read" status to messages:

in created hook (vue):

created() {
this.$echo.channel(`user.messages.chat.${this.chatId}`)
  .listen('ApplicationChatMessage', (event) => {
    let webSocketMessage = JSON.parse(event.message);
    if (webSocketMessage.chat_id == this.chatId && webSocketMessage.from != this.currentUserId) {

      //add this message to receiver messages stack
      this.messages.push(webSocketMessage);
      
      //send received status to server (delivery status)
      this.$axios.post('/messageDelivered', {
        'message_id': webSocketMessage.message_id
      });
    }
  });

//when the message is delivered by the server, the server returns this message to the client-side, I want to update HTML and add double-check icon to the message (in HTML).

this.$echo.channel(`user.messages.status.${this.chatId}`)
  .listen('MessageDelivered', (event) => {
    
    let webSocketMessageUpdated = JSON.parse(event.message);
    if (webSocketMessageUpdated.chat_id == this.chatId) {
      let message = this.messages.find(message => message.message_id === webSocketMessageUpdated.message_id);
      if(message !== undefined){
        message.status = webSocketMessageUpdated.status;
      }
    }
  });

}

the above code is working fine but it's stocked at rendering message (stocked I loop) and adding the received message after delivery status to UI and that is the problem!

anybody can help me with this problem?