Facing issues display markers on my openstreat map in my laravel splade app with a vue component

Had faced issues working with custom scripts in laravel splade hence the use of a vue component i pass to the blade code all. the markers are on 1 location

i ran dd in controller and i see the proper arrays with data

`what am i doing wrong because i. do not see my markers on map on proper locations my controller

public function index()
    {


        $markers = Map::all();

        $initialMarkers = [];
        foreach ($markers as $marker) {
            $initialMarkers[] = [
                'position' => [
                    'lat' => $marker->lat,
                    'lng' => $marker->lng,
                ],
                'draggable' => true,
            ];
        }

        return view('map.index', compact('initialMarkers'));
    }

my vue component

<template>
    <div id="map" :style="{ width: '100%', height: '600px' }"></div>
</template>

<script>
export default {
    name: 'Counter',
    props: {
        initialMarkers: {
            type: Array,
            required: true
        }
    },
    mounted() {
        this.loadLeaflet()
            .then(() => {
                this.initializeMap();
            })
            .catch(error => {
                console.error('Error loading Leaflet:', error);
            });
    },
    methods: {
        loadLeaflet() {
            return new Promise((resolve, reject) => {
                if (typeof L === 'undefined') {
                    const script = document.createElement('script');
                    script.src = 'https://unpkg.com/[email protected]/dist/leaflet.js';
                    script.onload = resolve;
                    script.onerror = reject;
                    document.head.appendChild(script);

                    const link = document.createElement('link');
                    link.rel = 'stylesheet';
                    link.href = 'https://unpkg.com/[email protected]/dist/leaflet.css';
                    document.head.appendChild(link);
                } else {
                    resolve();
                }
            });
        },
        initializeMap() {
            const map = L.map('map', {
                center: {
                    lat: -19.0154,
                    lng: 29.1549,
                },
                zoom: 4,
            });

            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                attribution: '© OpenStreetMap',
            }).addTo(map);

            this.initialMarkers.forEach(markerData => {
                const marker = L.marker(markerData.position, {
                    draggable: markerData.draggable,
                })
                    .addTo(map)
                    .bindPopup(`<b>${markerData.position.lat}, ${markerData.position.lng}</b>`);
                map.panTo(markerData.position);
            });

            map.on('click', (event) => {
                console.log(event.latlng.lat, event.latlng.lng);
            });

            map.on('dragend', (event) => {
                console.log(event.target.getLatLng());
            });
        }
    }
};
</script>

<style scoped>
#map {
    width: 100%;
    height: 600px;
}

.text-center {
    text-align: center;
}
</style>

my blade code

<x-layout>

    <div class="py-6">
    <div id="app" class=" w-11/12 justify-center mx-auto rounded-lg">
        <Link slideover href="{{ route('map.create')}}" class="bg-blue1 rounded text-white py-2 px-1.5">
        Create Location
        </Link>
        <Counter :initial-markers='@json($initialMarkers)' class="mt-4"></Counter>
    </div>
    </div>
</x-layout>

in the blade i get warning Element Counter doesn't have required attribute initial-markers here

<Counter :initial-markers='@json($initialMarkers)' class="mt-4"></Counter>