[Vuejs]-Leaflet only loads the first row of tiles in my map

Not sure if either or both will work but you can try

1. Setting the dimensions of #map like this

   #map {
    width: 100%;
    height: calc(512px / 100%); // Set the height relative to the width of the parent element
   }
   

2. Setting the maxZoom to a higher value like 18 in tile layer, and set the zoom in map to 1

   import { onMounted } from "vue";
   import * as L from "leaflet";
   import "leaflet/dist/leaflet.css";
   
   onMounted(() => {
     var map = L.map("map", {
       attributionControl: false,
       zoom: 1, // Set the initial zoom level to 1
     }).setView([0, 0], 0);
     L.tileLayer("http://127.0.0.1:7800/{z}/{x}/{y}.jpeg", {
       maxZoom: 18,
       noWrap: true,
     }).addTo(map);
   });