Vuejs3 + Axios + Express – Display data from array/object

I am trying to output a single post from an express API using Vue.

Problem is that the object/array returned (post.value) does not display the values that I declare in the template (post.title & post.body).

Any help would be greatly appreciated.

<template>
<div v-if="post">
    <h2>{{ post.title }}</h2>
    <p>{{ post.body }}</p>
</div>
</template>

<script>
import axios from 'axios'
import { ref } from 'vue'
import { useRoute } from 'vue-router'

export default {
    name: 'BlogPostView',
    setup() {
        const post = ref([])
        const route = useRoute()
        const error = ref('')

        const load = async (id) => {
            
            try {
                await axios.get(`http://localhost:5000/api/posts/${id}`)
                    .then((response) => {
                        post.value = response.data
                        console.log(post.value)
                        console.log(response.data)   
                    })
            } catch(err) {
                error.value = err.message
            }            
        }

        load(route.params.id)

        return { post, error }
    }
}
</script>

Just for reference:

console.log(params.value) got no errors, and outputs the following:

Proxy {0: {…}}[[Handler]]: Object[[Target]]: Array(1)[[IsRevoked]]: false