clearNuxtData does not work with useFetch and a provided key

[stalar]

Environment

Nuxi 3.0.0-rc.12 11:37:18
RootDir: /Users/staffan/dev/giglets/site/frontend 11:37:18
Nuxt project info: (copied to clipboard) 11:37:18

---

• Operating System: Darwin
• Node Version: v14.20.1
• Nuxt Version: 3.0.0-rc.12
• Nitro Version: 0.6.0
• Package Manager: yarn@1.22.19
• Builder: vite
• User Config: runtimeConfig, ssr, sourcemap, app, modules, proxy, vite
• Runtime Modules: @nuxtjs-alt/proxy@1.3.7
• Build Modules: -

---

Reproduction

app.vue:

<script setup>
const count = ref(1);
const data = ref('');
watch(count, () =>
  useFetch('/api/hello/', { key: 'hello' }).then(
    (r) => (data.value = r.data.value)
  )
);
</script>

<template>
  <NuxtExampleLayout example="composables/use-fetch">
    <div>
      Fetch result:
      <pre class="text-left"><code>{{ data }}</code></pre>
      <NButton
        @click="
          clearNuxtData('$fhello');
          count++;
        "
      >
        Works
      </NButton>
      <NButton
        @click="
          clearNuxtData('hello');
          count++;
        "
      >
        Does not work
      </NButton>
    </div>
  </NuxtExampleLayout>
</template>

server/api/[...hello].ts:

let seq = 1;
export default defineEventHandler((event) => ({
  seq: seq++,
}));

Describe the bug

useFetch is called with an explicit key and that same value is used in clearNuxtData to clear the cached data and force a refresh.

Expected result:
The cache is cleared and new data is fetched.

Actual result:
The cache is not cleared and no data is fetched.

Workaround:
Prepend the key with $f when calling clearNuxtData. This works, but is not the documented behaviour.

Additional context

No response

Logs

No response

[danielroe]

@pi0 do you think we could drop the $f prefix for explicitly provided keys to useFetch?