NuxtJs Axios rendering issue undifined

When I try to access certain objects/property loaded from an axios call inside the document,

I get undefined property, even though that the master object is being rendered just fine.

Here is what I have tried:
index.vue:

<template>
    <div>
        {{ pageContent.Cover.formats.large.url}}
    </div>
</template>
<script>
    export default {
        data() {
            return {
                baseUrl: process.env.API_URL,
                pageContent: '',
            }
        },
        created() {
            this.$axios.$get(process.env.API_URL + '/about')
                .then(response => (this.pageContent = response))
        }
    }
</script>

This gives me following error:

TypeError
Cannot read property ‘formats’ of undefined

This is the object:

.then(response => (this.pageContent = response.data))

<div v-if="pageContent">
        {{ pageContent.Cover.formats.large.url}}
    </div>