In order to determine a bounding box that encompasses the most southwestern and northeastern corners of given [lng, lat] pairs (markers), I developed a series of basic functions. Utilize the Mapbox GL JS map.fitBounds(bounds, options?) function to adjust the map view to focus on the set of markers.

Remember:
lng (lon): represents longitude (e.g., London = 0, Bern = 7.45, New York = -74)
→ lower values indicate western direction

lat: denotes latitude (e.g., Equator = 0, Bern = 46.95, Cape Town = -33.9)
→ lower values correspond to southern locations

getSWCoordinates(coordinatesCollection) {
  const lowestLng = Math.min(
    ...coordinatesCollection.map((coordinates) => coordinates[0])
  );
  const lowestLat = Math.min(
    ...coordinatesCollection.map((coordinates) => coordinates[1])
  );

  return [lowestLng, lowestLat];
}

getNECoordinates(coordinatesCollection) {
  const highestLng = Math.max(
    ...coordinatesCollection.map((coordinates) => coordinates[0])
  );
  const highestLat = Math.max(
    ...coordinatesCollection.map((coordinates) => coordinates[1])
  );

  return [highestLng, highestLat];
}

calcBoundsFromCoordinates(coordinatesCollection) {
  return [
    getSWCoordinates(coordinatesCollection),
    getNECoordinates(coordinatesCollection),
  ];
}

To implement the function, simply invoke calcBoundsFromCoordinates and input an array containing all marker coordinates:

calcBoundsFromCoordinates([
  [8.03287, 46.62789],
  [7.53077, 46.63439],
  [7.57724, 46.63914],
  [7.76408, 46.55193],
  [7.74324, 46.7384]
])

// produces [[7.53077, 46.55193], [8.03287, 46.7384]]

Alternatively, utilizing Mapbox's mapboxgl.LngLatBounds() function can simplify the process.

Referencing the response by jscastro in Scale MapBox GL map to fit set of markers, the implementation is as follows:

const bounds = mapMarkers.reduce(function (bounds, coord) {
  return bounds.extend(coord);
}, new mapboxgl.LngLatBounds(mapMarkers[0], mapMarkers[0]));

Subsequently, execute the following command:

map.fitBounds(bounds, {
 padding: { top: 75, bottom: 30, left: 90, right: 90 },
});

If you prefer not to rely on another library for this particular task, I have devised a straightforward method to obtain the bounding box. Below is a simplified vue component that demonstrates this.

Remember to exercise caution when storing your map object within a vue component; avoid making it reactive to prevent any interference with mapboxgl functionality.

import mapboxgl from "mapbox-gl";

export default {
    data() {
        return {
            points: [
                {
                    lat: 43.775433,
                    lng: -0.434319
                },
                {
                    lat: 44.775433,
                    lng: 0.564319
                },
                // Additional coordinates...
            ]
        }
    },
    computed: {
        boundingBox() {
            if (!Array.isArray(this.points) || !this.points.length) {
                return undefined;
            }

            let w, s, e, n;

            // Calculate the bounding box using simple min and max of all latitudes and longitudes
            this.points.forEach((point) => {
                if (w === undefined) {
                    n = s = point.lat;
                    w = e = point.lng;
                }

                if (point.lat > n) {
                    n = point.lat;
                } else if (point.lat < s) {
                    s = point.lat;
                }
                if (point.lng > e) {
                    e = point.lng;
                } else if (point.lng < w) {
                    w = point.lng;
                }
            });
            return [
                [w, s],
                [e, n]
            ]
        },
    },
    watch: {
        // Automatically adjust to fit the bounding box upon changes
        boundingBox(bb) {
            if (bb !== undefined) {
                const cb = () => {
                    this.$options.map.fitBounds(bb, {padding: 20});
                };
                if (!this.$options.map) {
                    this.$once('map-loaded', cb);
                } else {
                    cb();
                }
            }
        },
        // Monitor the points array to add markers accordingly
        points: {
            immediate: true, // Execute handler upon mount (not necessary if fetching points after mounting)
            handler(points, prevPoints) {
                // Remove previous markers
                if (Array.isArray(prevPoints)) {
                    prevPoints.forEach((point) => {
                        point.marker.remove();
                    });
                }

                // Add new markers
                const cb = () => {
                    points.forEach((point) => {

                        // Create an HTML element for each feature
                        const el = document.createElement('div');
                        el.className = 'marker';
                        el.addEventListener('click', () => {
                            // Handle marker click event
                        });
                        el.addEventListener('mouseenter', () => {
                            point.hover = true;
                        });
                        el.addEventListener('mouseleave', () => {
                            point.hover = false;
                        });

                        // Generate marker for each point and add to the map
                        point.marker = new mapboxgl.Marker(el)
                            .setLngLat([point.lng, point.lat])
                            .addTo(this.$options.map);
                    });
                };
                if (!this.$options.map) {
                    this.$once('map-loaded', cb);
                } else {
                    cb();
                }
            }
        }
    },
    map: null, // Crucial to store the map without reactivity
    methods: {
        mapLoaded(map) {
            this.$options.map = map;
            this.$emit('map-loaded');
        },
    },
}

This approach should function correctly unless your points are situated in the middle of the Pacific Ocean, switching between 180° and -180° longitude. In such cases, adding a simple check to swap east and west while returning the bounding box should resolve the issue.