User can add multiple markers in leaflet.js using Vue js

i have done similar thing but i have used Mapbox, but i assume the approach can be applied here too. what i did was creating a vue component with a prop for the div id that the map should render in ( u can pass whatever u need to initialize your map ) then initialize your map in mounted function as u usually do.

it should looks like this

<template>
	<div :id="id"></div>
</template>

<script>
	export default {
		props:{
			id:{ default:'map'}
		},
		data(){
			return {
				//your variables
			}
		},
		mounted(){
			//init your map
			map.init()

			//add click listener
			map.on('click',()=>{ 
				// add marker 
				// you can use functions from component methods but 
				// don't forget to use arrow function

				this.addMarker()
			}
		},
		methods:{
			f1(){
			},
			addMarker(){
			}
		}
	}
</script>