Маркерные карты в Leaflet и VueJS

Question

Я использую листовку и VueJS 2 , и я хочу добиться результата как: Когда вы нажимаете на маркер на карте, список мест отображается горизонтально, прокручиваяцентрироваться на выбранном месте.И наоборот, при прокрутке к ячейке (по горизонтали) карта будет центрирована на соответствующем маркере, который будет выделен.

У меня уже есть этот шаблон: Карта листовки с горизонтальным списком

Код компонента карты следующий:

    <div class="map" id="map">   
    <div class="placeHorizontalList" id="placeHorizontalList">
        <div v-for="(place, index) in placeList" :key="index">                                                        
            <img :src="place.media.main.src" >    
            <div class="placeHorizontalList__detail">
               <p>{{place.label}}</p>
               <p>{{place.text.displayAddress}}</p>                      
            </div> 
        </div>
     </div>  


<script>
export default{
    data() {
        return {
            map: null,
            tileLayer: null,
            placeList: []    
        }
    },
    mounted() {
        this.initMap(); 
        this.initMarkers();   
    },
    methods: {
        initMap() { 
            // INIT MAP
            this.map= L.map('map').setView([43.9493, 4.8055],13);
            this.tileLayer= 
               L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png');  
            this.tileLayer.addTo(this.map); 
        },
        initMarkers() {
            // INIT MARKERS
                this.services.entityController.listPlaces(()=>{            
                    console.log("please wait")
                }, (results)=>{                                   
                    this.placeList= results;  
                    this.placeList.forEach(place => {                 
                        var marker= L.marker([place.geo.latitude, place.geo.longitude]);
                        marker.addTo(this.map); 
                        var layerGroup= L.layerGroup();                     
                        layerGroup.addLayer(marker);
                        place.marker_id= layerGroup.getLayerId(marker);
                        marker.on({click: this.clickMarker});  
               }, ()=>{
                   console.error("error")
               });                                          
          }); 
        }
   }


}


</script>