Nuxt app, page doesn't load data when navigating, but does when refreshing page

I'm using some third party api's and try to display data on a page. I use Nuxt (3.13) for this. Nuxt documentation seems quite straighforward, but I can not get this to work properly. I'm using NuxtLinks to navigate from one page to another. When a page contains a useFetch function, I can not navigate to it. The url changes tho and when I refresh the page with the url I wanted to navigate to everything works. Of course I want to use the navigation instead of refreshing. Could thid this be a router issue? Or something server/clientside/lifecycle issue? Any help would be appreciated.

app.vue

<template>
  <main>
  <page-header />
  <NuxtPage />
</main>
</template>

components/pageHeader.vue

<template>
  <header>
    <nav>
      <NuxtLink  
        to="/buy"
        aria-haspopup="menu"
        aria-expanded="false">
          Buy
        </NuxtLink>      
      <NuxtLink  
        to="/rent" 
        aria-haspopup="menu"
        aria-expanded="false">
          Rent
        </NuxtLink>        
     </nav>
  </header>
</template>

pages/buy/index.vue

<template>
  <section>
    <p>{{ homes.Objects.length }} koopwoningen</p>
    <div v-if="loading">Loading</div>    
    <div v-else-if="error">Sorry, er is iets fout gegaan</div>
    <div v-else-if="homes"
        v-for="home in homes.Objects" 
        :key="home.Adres" 
        
    >{{ home }}</div>>
  </section>
</template>

<script setup>
const {data: homes, loading, error} = useFetch(`https://partnerapi.funda.nl/feeds/Aanbod.svc/json/[key]/?type=koop`)
</script>

Console error:

Removed tailwind styling for readability and replaced the real key with [key] in the code above.

This is a CORS error and you are seeing it because you are trying to fetch the api through the browser and not the backend. Many third party APIs do not allow Cross-Origin requests.

What you can do is use the nuxt server directory and fetch the data there and pass that up to the front end.

/server/api/foo.js

export default defineEventHandler(async e => {
  const res = await fetch(`https://partnerapi.funda.nl/feeds/Aanbod.svc/json/[key]/?type=koop`)

  const data = await res.json()

  return { data }
}) 

Then on the front end you can try

const { data } = await useFetch('/api/foo')