I want to create a livewire component using leaflet. When user clicks on the map a marker appear on there and an event is emitted which is can be caught in JS. But I want to send that data directly to server with livewire. Livewire component:

public $position;
protected array $listeners = ['setPosition'];
public function setPosition($position)
  {
     dd($position);
   }

blade component:

<div wire:model="position" id="map"></div>
        <script>
            const map = L.map('map', {
                center: [35.6892, 51.3890],
                zoom: 14,
                minZoom: 12,
                maxZoom: 14
            });
            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                attribution: 'نقشه © <a href="https://openstreetmap.org">OpenStreetMap</a>'
            }).addTo(map);
            var marker = L.marker();

            function onMapClick(e) {
                marker.setLatLng(e.latlng).addTo(map);
                console.log(Livewire, Livewire.emit('setPosition'));
            }

            map.on('click', onMapClick);
        </script>

I used Livewire.emit('setPosition') in the last script tag but nothing happens.Or in a separate script:

<script>
Livewire.emit('setPosition');
</script>