Accessing Strapi response on Nuxt page reload

Questions and Answers Frontend-Vue
1

Hi! I hope you’re all doing well,
I’m just getting started with Strapi and I’m trying to display the content of one my strapi collections on my nuxt frontend, it works when I load the stickers.vue page for the first time, but when I reload it I get this error:

image
image3456×1968 481 KB

Here is the code for the stickers.vue Nuxt page:

<template>
    <div>
        <div class="stickers-container">
            <div 
                v-for="sticker in stickers"
                class="card-container"
            >
                {{ sticker.attributes.Description }}
                <ProductCard 
                    :productName="sticker.attributes.Name"
                    :productUrl="sticker.attributes.Image.data[0].attributes.url"
                    :productPrice="sticker.attributes.Price" 
                />
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
    const { find } = useStrapi()

    let { data: stickers } = await useFetch('http://localhost:1337/api/stickers?populate=*')
    stickers = stickers._rawValue.data
</script>

Feel free to ask if you have any question, thank you for reading this!