I have below two components (parent and child)

.
├── Index.vue (Parent)
└── _GetShipment.vue (Child)

In the Index.vue I am trying to get the content of the e-mail body using Office.js's getAsync:

<script>
import Shipment from './_GetShipment.vue';
import { ref, defineComponent } from 'vue';


export default defineComponent({
    setup() {
        const shipments = ref([]);

        Office.context.mailbox.item.body.getAsync(
            "text",
            function (result) {
                if (result.status === Office.AsyncResultStatus.Succeeded) {
                    let matches = result.value.match(/S\w{3}\d{8,9}/ig);
                    if(matches){
                        shipments.value = matches;
                    }
                }
            }
        );

        return {
            shipments,
        }
    },
    components: {
        Shipment,
    },
})
</script>

<template>
     <div>
         <div v-if="shipments.length === 1">
             <Shipment :id="shipments[0]" />
         </div>
     </div>
</template>

The above checks the email body content to see if there is a regular expression match. If there is, it will add the match to an array shipments.

Currently, if there is only one match found, this will be rendered in the child component called _GetShipment:

<script>
import { ref, Suspense } from 'vue';
import route from '../../../../vendor/tightenco/ziggy/src/js';

export default {
    props: ['id'],
    async setup(props) {
        const shipment = ref();
        await fetch(route('getShipment', {id : props.id}))
            .then(response => response.json())
            .then(data => shipment.value = data);
        return { shipment };

    }
};
</script>
<template>
      <div>
         Viewing shipment {{ id }}: <br />
         <Suspense>
             <template #fallback>
                 Loading...
             </template>
             <pre>{{ shipment }}</pre>
         </Suspense>
      </div>
</template>

Fetching the e-mail body content works fine, and the same goes for getting the details using fetch().

However, the loading fallback of Suspense is not being triggered. When loading the page, it is simple blank until fetch is completed.

Why is the #fallback not being rendered?