How do I set the center and define the bounds for given getJSON data?

Each geoJson object is like this:

{ 
"type": "FeatureCollection", 
"features":[
         { 
           "type": "Point", 
           "properties": { "name": "Abdon Batista" }, 
           "geometry":{ "coordinates": [-51.0378352721, -27.5044338231] }
         }
      ]
   },
....

Following is my code:

<script setup>
import 'leaflet/dist/leaflet.css'
import { LMap, LTileLayer } from '@vue-leaflet/vue-leaflet'

const map = useRef(null)


</script>

<template>
  <l-map ref="map"
     v-model:zoom="zoom"
     :center="[0, 0]"
     :use-global-leaflet="false"
  >

    <l-tile-layer
      @ready="onLayerReady"
      ref="map-layer"
      url="https://tile.jawg.io/jawg-lagoon/{z}/{x}/{y}.png?access-token=0uePqV6bv7ORAzc9ry2hd640UDbfpy1oAIscyigPWJRaadIRoidCDI6v8kMJWCTn"
      layer-type="base"
      name="OpenStreetMap"
    />
    <l-geo-json :geojson="pins" :options="geojsonOptions" @ready="onGeoJsonReady" />
  </l-map>
</template>