useFetch in Nuxt3 keeping cached data

I am facing the following issue with nuxt3.

• the dynamic page [slug].vue loads the initial slug's data correctly
• when I move away from the page and come back, the new data is not loaded, instead it still shows the old data.
• If I refresh the said page with old data, it works ok.

This seems to be happening because the new slug's api call was never made.

My [slug.vue] file looks like:

<script setup lang="ts">
import { ref } from 'vue';
const route = useRoute();

const slug = ref(String(route.params.slug));
console.log(slug.value);
const apicall = `https://swapi.dev/api/people/${slug.value}`;
const { data: article } = await useFetch(
  `https://swapi.dev/api/people/${slug.value}`
);
</script>
<template>
  <div>
    <NuxtLink to="/">Back to Home</NuxtLink>
    <pre>
      {{ `https://swapi.dev/api/people/${slug}` }}
      {{ route.params.slug }}
      {{ article }}
    </pre>
  </div>
</template>

The entire setup can be seen on stackblitz at: https://stackblitz.com/edit/nuxt-starter-mkgfrw?file=pages%2F[slug].vue,pages%2Findex.vue