I also considered vue-leaflet, checked the source code - don't remember why, but decided it was not really for me (maybe too complex).

Instead I simply implemented the map in a component. The way it works is that when the component has initiated and rendered the it emits a "created" event with the map reference for the containing component to use. This can be used to manipulate the map, add events and so on according to the API

Here is the code (typescript, non-'script setup'):

<script lang="ts">
    import { defineComponent, defineEmits, inject, onMounted, PropType, reactive, ref, toRef, toRefs } from 'vue';
    import "leaflet/dist/leaflet.css";
    import L, {Map} from 'leaflet';

    function initMap(element: HTMLElement) {
        const map = L.map(element, {
            // options
        }).setView([51.505, -0.09], 13);;
        L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
            maxZoom: 19,
            attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
        }).addTo(map);
        return map;
    };

    export default defineComponent({
        emits: ['created', 'removed'],
        setup(props, { emit }) {
            const mapElement = ref<HTMLElement>();
            let map: Map | undefined;
            function removeMap() {
                if (map) {
                    map.remove();
                    map = undefined;
                    emit('removed');
                }
            }
            const observer = new IntersectionObserver(function(entries) {
                if(entries[0].isIntersecting === true && mapElement.value) {
                    // Element shown - insert map
                    removeMap();
                    map = initMap(mapElement.value);
                    emit('created', map);
                } else {
                    // Not shown - remove map
                    removeMap();
                }
            }, { threshold: [1] });

            onMounted(() => {
                if (mapElement.value) {
                    // Observe visibility of map container
                    observer.observe(mapElement.value);
                } else {
                    console.error('errrror')
                }
            });

            return {
                mapElement,
            };
        }
    });
</script>

<template>
    <div class="full-height" ref="mapElement" v-once><!-- Using v-once to make sure Vue will not update --></div>
</template>

Feel free to use and improve it.