Estoy usando Laravel 8 y Livewire. Tengo una aplicación que muestra items de objetos de una tabla. Cuando hace clic en un item , muestra los detalles del item a la derecha.

 <ul> @foreach ($items as $item) <li wire:click="show({{ $item->id }})" class="..."> {{ $item->name }} </li> @endforeach </ul>

Esto funciona muy bien, ya que el método show() en el componente hará todo lo que hace, vinculando variables y tal...

Ahora, en la sección de detalles, quiero hacer un gráfico, un gráfico de líneas. Lo hice usando d3js, y funciona bien la primera vez que renderizo la página, ya que mi variable de item ya tiene un valor predeterminado (último elemento en la tabla)

Cuando hago clic en otro item , muestra los datos, pero el gráfico no cambia sus datos, está atascado con los datos que obtuvo la primera vez que se cargó.

Seguí algunas soluciones que decían que tenía que enviar un evento contentChanged al navegador, pero parece que no funciona.

En mi componente, después de cambiar la selección tengo:

 $this->dispatchBrowserEvent('contentChanged');

Para simplificar las cosas, en mi hoja, tengo:

 <script type="text/javascript"> window.addEventListener('contentChanged', e => { alert('{{ $item->name }}') }) </script>

Sí, ejecuta la función y muestra una alerta, pero el $item tiene los datos de la primera vez que se cargó la página. No toma el nuevo $item que cambió al hacer clic.

¿Qué tengo que hacer?