Unhandled error during execution of render function

I have been working on this project that tracks every country's COVID-19 stats. I have unfortunately ran into a bit of an obstacle. My code to follow.

    <template>
    <div class="detials-box">
        <h1>Country Details</h1>
        <div class="details-wrap">
            <div class="title-box">
                <img :src="detail.countryInfo.flag" alt="flag"/>
                <h2>{{ detail.country }}</h2>
                <table>
                    <tr>
                        <th>Continent</th>
                        <th>Latitude</th>
                        <th>Longitude</th>
                        <th>Country ID</th>
                        <th>Total Population</th>
                    </tr>
                    <tr>
                        <td>{{ detail.continent }}</td>
                        <td>{{ detail.countryInfo.lat }}</td>
                        <td>{{ detail.countryInfo.long }}</td>
                        <td>{{ detail.countryInfo._id }}</td>
                        <td>{{ detail.population }}</td>
                    </tr>
                </table>
            </div>
            <div class="total-stats">
                <table>
                    <tr>
                        <th>Total Cases</th>
                        <th>Cases Active</th>
                        <th>Critical Cases</th>
                        <th>Total Deaths</th>
                        <th>Total Recovered</th>
                        <th>Total People Tested</th>
                    </tr>
                    <tr>
                        <td>{{ detail.cases }}</td>
                        <td>{{ detail.active }}</td>
                        <td>{{ detail.critical }}</td>
                        <td>{{ detail.deaths }}</td>
                        <td>{{ detail.recovered }}</td>
                        <td>{{ detail.tests }}</td>
                    </tr>
                </table>
            </div>
            <div class="daily-stats">
                <table>
                    <tr>
                        <th>Today Cases</th>
                        <th>Today Deaths</th>
                        <th>Today Recovered</th>
                        <th>Threat Assessment</th>
                    </tr>
                    <tr>
                        <td>{{ detail.todayCases }}</td>
                        <td>{{ detail.todayDeaths }}</td>
                        <td>{{ detail.todayRecovered }}</td>
                        <td>{{ detail.recovered > detail.deaths ? "Positive" : "Negative" }}</td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</template>

<script>
import { ref, onBeforeMount } from 'vue';
import { useRoute } from 'vue-router';

export default {
    name: 'Details',
    setup(){
        const detail = ref({})
        const route = useRoute();

        onBeforeMount(() => {
            fetch(`https://disease.sh/v3/covid-19/countries/${route.params.id}`)
            .then((response) => response.json())
            .then((result) => {
                console.log(result)
                detail.value = result
            })
        })

        return {
            detail,
            route,
        }

    }
}
</script>

I'm getting the following error:

Unhandled error during execution of render function    at <Details onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > >    at <RouterView>    at <App>

I've already tried looking online for solutions and among the documentation and to no avail.

Could someone please advise as to what I'm doing wrong, please? Thank you.