My Vue.js code is displaying Strapi (api) data correctly, but when I refresh the page i have a TypeError : $setup... is undefined

Question

I am displaying some Strapi data using Vue3, and when i save the file it displays it correctly on the page, but if i refresh it i have a TypeError error : Uncaught (in promise) TypeError: $setup.component_1.imgBg is undefined Which seems weird to me since it could definitely reach the data since it displayed it ? And it's also displayed correctly in the console if i do a console.log with the same link, even after refreshing. I have just started working with Vue and Strapi (and in general a beginner) so maybe I am not understanding it properly

I thought it was because it didn't populate deep enough, so i added the strapi-plugin-populate-deep Here is my script :

<script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';

const page = ref([]);
const component_1 = ref([]);

async function fetchPage() {
    await axios.get('http://localhost:1337/api/landing-page?populate=deep').then((response) => {
        console.log(response.data.data.attributes.PageContent[0].imgBg.data.attributes.url);
        component_1.value = response.data.data.attributes.PageContent[0];
    });
}

onMounted(async () => {
    await fetchPage();
});
</script>

And here is my template :

 <h2>{{ component_1.imgBg.data.attributes.url }}</h2>