Vue-Leaflet map doesn't render completely

I have been following the vue2-leaflet documentation and I have managed to render my map.

However , it only covers a portion of the entire frame.

I don't know what else to do in order to render it completely.

<l-map
   ref="locationsMap"
   style="height: 300px"
   :zoom="zoom"
   :center="center"
>
    <l-tile-layer
       :url="url"
       :attribution="attribution"
    ></l-tile-layer>
    <l-marker :lat-lng="markerLatLng"></l-marker>
</l-map>

I have read something about using invalidateSize(); in a similar issue (Leaflet map doesn't cover whole map area) but I don't see what the point is or how to use it.