How do I render a list on API response in vue 3?

Question

I am new to vue and trying to render a list of items from an API response

<script setup lang="ts">
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
import ServiceCard from './components/ServiceCard.vue'
import { parse, stringify } from 'yaml'
import { onMounted, onUpdated } from 'vue'
import Vue from 'vue'

interface ServiceAPIResponse { host: string, protocol: string, services: [{ subdomain: string, apikey: string }] };

let yaml: ServiceAPIResponse;

onMounted(() => {
  fetch('https://api.my.domain/').then((resp) => {
    resp.json().then((data: ServiceAPIResponse) => {
      yaml = data;
      console.log(yaml);
    });
  });
});

onUpdated(() => {
  console.log('onupdated');
});

</script>

<template>
  <div>
    <img alt="Vue logo" src="./assets/logo.png" />
    <ul v-if="yaml">
      <li v-for="service in yaml.services" :key="service.subdomain">
        <ServiceCard :name="service.subdomain" :host="yaml.host" :subdomain="service.subdomain" />
      </li>
    </ul>
  </div>
</template>

Coming from react, I would expect a re-render to occur when I update the value of yaml. I have tried wrapping it with reactive() but I don't understand vue well enough. I don't understand why my v-if remains falsy after I set yaml's value.

Is v-if even the right way to handle this?

With this code, I get the error:
TypeError: Cannot read properties of undefined (reading 'services')