How to fix 'map center & render all tiles' with vue-leaflet

Question

Error loading tiles maps

the page loads but the map is not centered completely and tiles are missing even if I already put the props :center & :zoom

can I initialize the map when loading the page?

Vue-Leaflet

this is my code

<template>
    <div class="map">
        <l-map class="maps" :zoom="zoom" :center="center">
            <l-marker :lat-lng="marker"></l-marker>
            <l-tile-layer :url="url" :attribution="attribution"></l-tile-layer>
        </l-map>
    </div>
</template>

<script>
import { L, LMap, LTileLayer, LMarker } from 'vue2-leaflet';
import { Icon } from 'leaflet';
import 'leaflet/dist/leaflet.css'

delete Icon.Default.prototype._getIconUrl;
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')
});
export default {
    props:['lat','lng'],
    mounted(){
        // this.center = L.latLng(this.lat,this.lng)
        // this.marker = L.latLng(this.lat,this.lng)
    },
    data(){
        return{
            zoom:13,
            center: L.latLng(this.lat,this.lng),
            url:'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
            attribution:'&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
            marker: L.latLng(this.lat,this.lng),
        }
    },
    components:{
        LMap, LTileLayer, LMarker
    }
}
</script>

<style>
.map{
    width: 100%;
    height: 500px;
}
</style>