docs: add clear method

README.md

@@ -61,7 +61,7 @@ Use these composables in your templates or components:
 
 ```vue
 <script setup lang="ts">
-const { data, pending, refresh, error } = await useJsonPlaceholderData('posts/1')
+const { data, refresh, error, status, clear } = await useJsonPlaceholderData('posts/1')
 </script>
 
 <template>

docs/api/use-fetch-like.md

@@ -15,7 +15,7 @@ The composable supports every [`useAsyncData` option](https://nuxt.com/docs/api/
 - `data`: the result of the asynchronous function that is passed in.
 - `refresh`/`execute`: a function that can be used to refresh the data returned by the `handler` function.
 - `error`: an error object if the data fetching failed.
-- `status`: a string indicating the status of the data request (`"idle"`, `"pending"`, `"success"`, `"error"`).
+- `status`: a string indicating the status of the data request (`'idle'`, `'pending'`, `'success'`, `'error'`).
 - `clear`: a function which will set `data` to `undefined`, set `error` to `null`, set `status` to `'idle'`, and mark any currently pending requests as cancelled.
 
 By default, Nuxt waits until a `refresh` is finished before it can be executed again.
@@ -91,6 +91,17 @@ const { data } = await useMyApiData('posts', {
 The key can be a reactive value, e.g. a computed property.
 :::
 
+To clear the cache for a specific request, use the `clear` function. You can then call `refresh` to fetch the data again:
+
+```ts
+const { data, refresh, clear } = await useMyApiData('posts')
+
+async function invalidateAndRefresh() {
+  clear()
+  await refresh()
+}
+```
+
 ## Examples
 
 ::: info
@@ -117,7 +128,7 @@ export default defineNuxtConfig({
 
 ```vue
 <script setup lang="ts">
-const { data, pending, error, refresh } = await useJsonPlaceholderData('posts/1')
+const { data, refresh, error, status, clear } = await useJsonPlaceholderData('posts/1')
 </script>
 
 <template>

docs/guide/getting-started.md

@@ -91,7 +91,7 @@ Use these composables in your templates or components:
 
 ```vue
 <script setup lang="ts">
-const { data, pending, refresh, error } = await useJsonPlaceholderData('posts/1')
+const { data, refresh, error, status, clear } = await useJsonPlaceholderData('posts/1')
 </script>
 
 <template>

playground/pages/jsonPlaceholder.vue

@@ -6,7 +6,7 @@ import type { NuxtError } from '#app'
 const route = useRoute()
 
 // Intended for similar use cases as `useFetch`
-const { data, pending, error } = await useJsonPlaceholderData<JsonPlaceholderComment>(
+const { data, status, error } = await useJsonPlaceholderData<JsonPlaceholderComment>(
   'comments',
   {
     query: computed(() => ({
@@ -72,9 +72,7 @@ async function onSubmit() {
     <h2>useJsonPlaceholderData</h2>
     <p>Responses are cached by default.</p>
     <p>
-      Status:
-      <mark v-if="pending">pending</mark>
-      <code v-else>fetched</code>
+      Status: <mark>{{ status }}</mark>
     </p>
     <p>
       <button @click="incrementPostId()">