我做一个应用程序与livewire和我有一个问题，我需要刷新一个chartJs当用户选择一个月或/和天，但它不工作我的图表dissapier和事件不启动，除非你按下ctrl + s按钮的图表出现和事件得到启动
当用户选择日/月时，有一个组件启动一个事件，父组件监听该事件并将答案传递给其子组件
下面是选择组件代码

<?php


class ClientDashboardHeader extends Component
{
use Dispatchable, InteractsWithSockets;

public $yearOptions, $monthOptions;
public $yearSelected, $monthSelected = 1;
public $selectedDate, $employees;

public function mount()
{
    $this->selectedDate = Carbon::now();
    $this->yearSelected = $this->selectedDate->year;
    $this->yearOptions = $this->getYears();
    $this->monthOptions = $this->getMounthsOfYear();
    $this->monthSelected = $this->selectedDate->month;
}

public function updatedYearSelected($value)
{
    $this->reset(['monthOptions', 'monthSelected']);
    $this->monthOptions = $this->getMounthsOfYear($value);
    $this->selectedDate->year = $value;
    $this->call();
}

private function call()
{
    $this->emit('dateChanged', ['year' => $this->yearSelected, 'month' => $this->monthSelected]);
}

public function updatedMonthSelected($value)
{
    $this->selectedDate->month = $value;
    $this->call();
}

private function getYears()
{
    $years = collect();
    for ($i = 0; $i <= 6; $i++) {
        $past = $this->yearSelected - $i;
        $years->push($past);
    }
    return $years;
}

private function getMounthsOfYear()
{
    $until = $this->yearSelected == Carbon::now()->year ? Carbon::now()->locale('en')->monthName : 'december';
    $period = CarbonPeriod::create('january', '1 month', $until);
    return iterator_to_array($period->map(function ($date) {
        return [
            'number' => $date->month,
            'word' => ucwords($date->monthName)
        ];
    }));
}

public function render()
{
    return view('livewire.client.dashboard.client-dashboard-header');
}
}

父组件代码：

<?php

class ClientDashboardContent extends Component
{
public $answers;
public $ids;

protected $listeners = [
    'dateChanged' => 'updateAnswers'
];

public function mount()
{
    $this->answers = TB_ClimaReport::all();
    $this->ids = $this->getIds(19);
}

private function getIds($count)
{
    $ids = array();
    for ($i = 0; $i < $count; $i++) {
        $ids[] = uniqid();
    }
    return collect($ids);
}

public function updateAnswers($date)
{
    $this->answers = TB_ClimaReport::whereYear('CATEGORIA', $date['year'])->whereMonth('CATEGORIA', $date['month'])->get();
}

public function render()
{
    return view('livewire.client.dashboard.client-dashboard-content');
}
}

这是father livewire组件

<div>
    //childs components
    @livewire('client.dashboard.client-dashboard-cards', ['answers' => $answers], key('cards-'.serialize($answers)))
    @livewire('client.dashboard.general-chart-dashboard-component', ['answers' => $answers,'idChart' => $ids[0]], key(serialize($answers).$ids[0]))

</div>

图表组件代码和视图：

class GeneralChartDashboardComponent extends Component
{
    public $pTotal;
    public $answers;
    public $idChart;

    private function getPTotals()
    {
        $pTotal = array_fill(0, 17, 0);
        foreach ($this->answers as $value) {
            for ($i = 0; $i < 17; $i++) {
                $pTotal[$i] += $value->first()->{"P" . ($i + 1)};
            }
        }
        return collect($pTotal);
    }
    public function mount()
    {
        $this->pTotal = $this->getPTotals();
    }
    
    public function render()
    {
        $this->emit('refeshGraph_'.$this->idChart,$this->pTotal);
        return view('livewire.client.dashboard.general-chart-dashboard-component');
    }
}

<div class="row">
<x-chart-bar-js-component :id="$idChart" class="col-lg-12" label="Clima Laboral"
    labels="['p1','p2','p3','p4','p5','p6','p7','p8','p9','p10','p11','p12','p13','p14','p15','p16','p17']"
    :data="$pTotal" />
</div>

并且图表组件

@props(['id' => uniqid(), 'labels' => [], 'label' => 'Grafica', 'data' => [], 'width' => '100%', 'height' => '100%'])

<div {{ $attributes }}>
      <canvas id="{{ $id }}"></canvas>
</div>

@push('chartjs')
<script>
    livewire.on('refeshGraph_{{ $id }}', function(data) {
        alert(data)
        init_{{ $id }}(data);
    })

    function init_{{ $id }}(data) {
        new Chart(document.getElementById('{{ $id }}').getContext(
            '2d'), {
            type: "bar",
            options: {
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero: true,
                        }
                    }]
                }
            },
            data: {
                labels: {!! $labels !!},
                datasets: [{
                    label: '{!! $label !!}',
                    data: data,
                    backgroundColor: [
                        'rgba(1, 255, 2,0.2)',
                        'rgba(255, 101, 1,0.2)',
                        'rgba(254, 0, 2,0.2)',
                        'rgba(216, 246, 2, 0.2)',
                        'rgba(255, 203, 0,0.2)',
                        'rgba(0, 179, 254,0.2)',
                        'rgba(241, 2, 129,0.2)',
                        'rgba(157, 1, 126,0.2)',
                        'rgba(93, 64, 55,0.2)',
                        'rgba(1, 255, 2,0.2)',
                        'rgba(255, 101, 1,0.2)',
                        'rgba(254, 0, 2,0.2)',
                        'rgba(216, 246, 2, 0.2)',
                        'rgba(255, 203, 0,0.2)',
                        'rgba(0, 179, 254,0.2)',
                        'rgba(241, 2, 129,0.2)',
                        'rgba(157, 1, 126,0.2)',
                        'rgba(93, 64, 55,0.2)'
                    ],
                    borderColor: [
                        'rgb(1, 255, 2)',
                        'rgb(255, 101, 1)',
                        'rgb(254, 0, 2)',
                        'rgb(216, 246, 2)',
                        'rgb(255, 203, 0)',
                        'rgb(0, 179, 254)',
                        'rgb(241, 2, 129)',
                        'rgb(157, 1, 126)',
                        'rgb(93, 64, 55)',
                        'rgb(1, 255, 2)',
                        'rgb(255, 101, 1)',
                        'rgb(254, 0, 2)',
                        'rgb(216, 246, 2)',
                        'rgb(255, 203, 0)',
                        'rgb(0, 179, 254)',
                        'rgb(241, 2, 129)',
                        'rgb(157, 1, 126)',
                        'rgb(93, 64, 55)'
                    ],
                    borderWidth: 1
                }]
            },
        });
    }
    init_{{ $id }}(@json($data))
</script>
@endpush

为什么我的子组件不呈现并启动refreshgrap事件？