Livewire lazy loading and chartjs javascript

Hello I have the following in a view for a livewire component to display a chartjs graph:

<div>
    <x-general.card class="p-4">
        <canvas id="priceHistoryChart"></canvas>
        @script
        <script type="text/javascript">
            document.addEventListener('livewire:initialized', () => {
                var ctx = document.getElementById('priceHistoryChart').getContext('2d');
                var datasets = @json($data['competitors']);
                datasets.forEach(function (competitor) {
                    competitor.label = competitor.competitor_name;
                    competitor.borderColor = 'rgb(' + Math.floor(Math.random() * 256) + ',' + Math.floor(Math.random() * 256) + ',' + Math.floor(Math.random() * 256) + ')';
                    competitor.fill = false;
                    competitor.stepped = 'before';
                });
                var myChart = new Chart(ctx, {
                    type: 'line',
                    data: {
                        labels: @json($data['dates']),
                        datasets: datasets,
                    },
                    options: {
                        fill: true,
                        scales: {
                            y: {
                                beginAtZero: false,
                                title: {
                                    display: true,
                                    text: 'Price',
                                    font: {
                                        size: 15,
                                    },
                                },
                                ticks: {
                                    callback: function (value, index, values) {
                                        return '£' + value;
                                    },
                                    stepSize: 1,
                                }
                            },
                        },
                        plugins: {
                            legend: {
                                position: 'bottom'
                            },
                            tooltip: {
                                mode: 'index',
                                axis: 'x',
                                intersect: false,
                                callbacks: {
                                    label: function (context) {
                                        let label = context.dataset.label || '';

                                        if (label) {
                                            label += ': ';
                                        }
                                        if (context.parsed.y !== null) {
                                            label += new Intl.NumberFormat('en-GB', {
                                                style: 'currency',
                                                currency: 'GBP'
                                            }).format(context.parsed.y);
                                        }
                                        return label;
                                    }
                                }
                            }
                        }
                    },
                });
            });
        </script>
        @endscript
    </x-general.card>
</div>

This all works perfectly as expected and the graph is displayed, I now want to implement lazy loading to the component:

<livewire:competitors.competitor-price-history-graph :productId="$product->id"/>

As soon as I do this the card component loads but nothing is within it, can anyone help? What am I doing wrong!?