Nuxt useFetch does not refetch on URL parameter change

Given this Nuxt example code of the app root component using the Nuxt UI calendar component to handle the current selected day

<script setup lang="ts">
import { today, getLocalTimeZone } from '@internationalized/date';
const foo = 'some-id'; // this is a page parameter but for the sake of simplicity...
const currentSelectedDate = shallowRef(today(getLocalTimeZone()));
const currentSelectedISODate = computed(() => {
return currentSelectedDate.value.toString();
});
</script>
<template>
<UApp>
<UCalendar v-model:model-value="currentSelectedDate" />
<Child :foo="foo" :bar="currentSelectedISODate" />
</UApp>
</template>

Now I got a child component expecting the values as props

<script setup lang="ts">
const { foo, bar } = defineProps<{
  foo: string;
  bar: string;
}>();
// does not refetch on bar ( isoDate ) change
const { data, pending, error } = await useFetch(/api/${foo}/${bar});
</script>
<template>
<UCard>
<template #header> Foo: {{ foo }} </template>
<template #footer> Bar: {{ bar }} </template>
</UCard>
<UCard>
<template #header> data: {{ data }} </template>
<div>pending: {{ pending }}</div>
<template #footer> error: {{ error }} </template>
</UCard>
</template>

For the sake of simplicity I created an API endpoint at

/api/[foo]/[bar].get.ts

export default defineEventHandler(async (event) => {
  return new Date().toISOString();
});

I can see that the props change but useFetch won't refetch if bar changes. Whenever I select another day I can see that bar changes but data never changes. Further there is no API call so useFetch is not reactive anymore.

I'm currently working on a sandbox

https://stackblitz.com/edit/nuxt-starter-a1s1dox4?file=app%2Fapp.vue

How can I take care of the reactivity?