How to bind the updated value from the laravel server to the socket server and then to the front end?

I am new to Laravel and PHP and websockets. I am fetching the data from the api through resource collection.

I am developing a progress bar with Target(Goal) and Value(Server value).

I have a Div Which is the  progress bar  div (Parent Div)
Target(Goal)
Value(Server data)

Once the server gets notified that there is a change in value , it should broadcast the change through events to the pusher and from pusher through channels it will be displayed on the front end through Laravel Echo. My Question is how to bind the Triggered value (Update value)in to the parent div .

This is my code App/Events/UpdatedValue.php

<?php

namespace App\Events;
use App\Progress;
use App\Http\Resources\ProgressResource;
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 UpdatedValue implements ShouldBroadcast
{
    use Dispatchable, InteractsWithSockets, SerializesModels;
    public  $progress;


    /**
     * Create a new event instance.
     *
     * @return void
     */
    public function __construct()
    {
      $this->progress = ProgressResource::collection(Progress::paginate(4));;

    }

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

2.app\http\Controllers\api\ProgressController.php

<?php

namespace App\Http\Controllers\Api;
use App\Progress;
use App\Http\Controllers\Controller;
use App\Http\Resources\ProgressResource;
use Illuminate\Http\Request;
use App\Events\UpdatedValue;

class ProgressController extends Controller
{
    public function index()
    {
      return ProgressResource::collection(Progress::paginate(4));
      event(new UpdatedValue());

}
}

3.app/http/Resources/ProgressResource.php

namespace App\Http\Resources;

use Illuminate\Http\Resources\Json\JsonResource;

class ProgressResource extends JsonResource
{
    /**
     * Transform the resource into an array.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return array
     */
    public function toArray($request)
    {
        return[
         'the_custom_id' => $this->id,
         'name' => $this->name,
         'goal' => $this->goal,
         'description' => $this->description,
         'value' => ProgressResource::mockData($this->goal),

     ];
    }

 public static function mockData($goal=1000)
    {
        // 0 to $goal takes 17 minutes
        $multiplier = ($goal + 7) / 1000;
        $count = substr(time(), -3);
        return intval(round($multiplier * $count, 0));
    }
  

}

4.app/progress.php

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Progress extends Model
{
 //protected $table = 'progress';
 protected $fillable = [
        'id', 'name', 'goal', 'description'
    ];
    public $timestamps = false;

}

5.Resources/js/Components/Front.vue

<template>
 <div class="container">
    <h1> Progress </h1>
       <div  class= "progress"  v-for = "progressdata in progress" v-bind:id="progressdata.id">
             <div name = "alpha"></div>
             <div name = "beta"></div>
             <!--<div id="div1"></div>-->
              <!--<div id="div2" class="value"></div>-->
        </div>
</div>
</template>

<script>

  export default {
    data: function() {
            return {
              progress: [],
              interval: {},
           }
        },
 mounted() {
       this.loadContents();
       this.listen();
 },

methods: {
    loadContents: function() {
           //load Api
           axios.get('/api/progress')
           .then((response) => {
                this.progress = response.data.data;
               //console.log(items);

               //this.start();
               //setInterval(this.loadContents, 1000);
         })
         .catch(function (error) {
           console.log(error);
    });
  },
    listen(){
      Echo.channel('progress')
          .listen('UpdatedValue', (e) =>{
            this.progress = e.progress;
            console.log(this.progress);
            
    });
    }

}
}
</script>

Could somebody be help me to get the solution done by getting the updated value binded to the parent div? Thanks.

via Chebli Mohamed