L-map, not displayed correctly, vue2leaflet in a framework7 popup

1

i have the next popup:

<f7-popup class="demo-popup" :opened="popupDetalle" @popup:closed="popupDetalle = false">
            <f7-page>
                <f7-navbar title="Editar servicio">
                <f7-nav-right>
                    <f7-link popup-close>Cerrar</f7-link>
                </f7-nav-right>
                </f7-navbar>
                <div class="app">
                   <l-map ref="mymap" :zoom="zoom" :center="center">
                      <l-tile-layer :url="url" :attribution="attribution"> 
                        </l-tile-layer>
                       <l-marker :lat-lng="marker.position"></l-marker>
                    </l-map>
                </div>
            </f7-page>
</f7-popup>

in my script:

<script>
import 'leaflet/dist/leaflet.css';
import { LMap, LTileLayer, LMarker, LPopup } from "vue2-leaflet";
export default {
    components:{
      LMap, 
      LTileLayer, 
      LMarker, 
      LPopup
     }
}
</script>

css:

<style scoped>
    .appMap {
        width: 100%;
        height: 400px;
    }
</style>

main.js

import L from 'leaflet'
import { Icon } from 'leaflet'
import 'leaflet/dist/leaflet.css'

delete L.Icon.Default.prototype._getIconUrl

L.Icon.Default.mergeOptions({
    iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
    iconUrl: require('leaflet/dist/images/marker-icon.png'),
    shadowUrl: require('leaflet/dist/images/marker-shadow.png')
})

But visually it looks like this:

image

Basically I am guiding with the documentation, the css and its components are imported, guide https://korigan.github.io/Vue2Leaflet/#/quickstart.md

The problem only happens in the popup, if I use it in the main component, it doesn’t give me problems.