My Axios code successfully calls API endpoints but data doesn't work with Vue components

Question

Link to my Python backend code.

Link to my separate Axios code (which works).

Link to my Vue project with the Axios code built in (which doesn't).

I posted some API questions here a few days ago. Since then I've ironed out the issues (the backend wasn't accepting json request bodies and I was allowing the wrong origins) and now that I'm using axios to send requests I'm getting a bit more informative error messages. However there seems to be an issue passing information from axios to Vue.

Here's the script portion of GoogleMapsView.vue:

<script setup lang="ts">
import type { MarkerOptions, Position } from '@/models/markerOptions'
import { GoogleMap, Marker } from 'vue3-google-map'
import VesselList from '../components/VesselList.vue'
import { VesselApi } from '@/api/VesselApi'
import type { Vessel } from '@/models/Vessel'
import { ref } from 'vue'
   
const markers = ref<MarkerOptions[]>([])
// for (let i = 0; i < 9; i++) {
//   const pos: Position = {
//     lat: i * 10,
//     lng: i * 10,
//   }
//   const mark: MarkerOptions = {
//     position: pos,
//     label: 'T' + String(i),
//     title: 'Test ' + String(i),
//   }
//   markers.push(mark)
// }

const vessels: Vessel[] = await VesselApi.getAll()

vessels.forEach((vessel: Vessel) => {
  const pos: Position = {
    lat: vessel.latitude,
    lng: vessel.longitude,
  }
  const marker: MarkerOptions = {
    position: pos,
    label: String(vessel.id),
    title: vessel.name,
  }
  markers.value.push(marker)
})

const center = ref<Position>({ lat: 0, lng: 0 })

if (markers.value.length) {
  const first = markers.value[0]
  center.value.lat = first.position.lat
  center.value.lng = first.position.lng
  console.log(`${center.value}, ${first.position}`)
}
</script>

I've followed the execution through using web developer tools and all of this works fine. But something breaks as soon as I get to the template part and I'm not sure what. Everything was fine when I was using dummy data (still present as commented out code) so I'm thinking there's an issue with how the template is reading the markers array? The code isn't tripping any errors though, the webpage just hangs.

If anyone can help me figure this out I'd be very grateful. Thank you in advance!

<template>
  <GoogleMap
    api-key="AIzaSyAe3a0ujO-avuX4yiadKUVIHyKG5YY83tw"
    style="width: 100%; height: 500px"
    :center="center"
    :zoom="15"
  >
    <Marker v-for="marker in markers" :key="marker.label" :options="marker" />
  </GoogleMap>
  <!-- <VesselList :markers="markers" /> -->
</template>