docs(api): add ts signature and js example to use-async-data (#4171)

Co-authored-by: Sébastien Chopin <seb@nuxtjs.com>
Co-authored-by: Anjorin Damilare <damilareanjorin1@gmail.com>
Co-authored-by: Daniel Roe <daniel@roe.dev>
Co-authored-by: Pooya Parsa <pyapar@gmail.com>

docs/content/3.api/1.composables/use-async-data.md

@@ -1,23 +1,32 @@
 # `useAsyncData`
 
-::ReadMore{link="/guide/features/data-fetching"}
+Within your pages, components, and plugins you can use useAsyncData to get access to data that resolves asynchronously.
-::
 
-```ts
+## Type
-const {
+
-  data: Ref<DataT>,
+```ts [Signature]
-  pending: Ref<boolean>,
+function useAsyncData(
-  refresh: () => Promise<void>,
-  error: Ref<any>
-} = useAsyncData(
   key: string,
-  handler: (ctx?: NuxtApp) => Promise<Object>,
+  handler: (nuxtApp?: NuxtApp) => Promise<DataT>,
-  options?: {
+  options?: AsyncDataOptions
-    lazy: boolean,
+): Promise<DataT>
-    server: boolean,
+
-    watch: WatchSource[]
+type AsyncDataOptions = {
-  }
+  server?: boolean
-)
+  lazy?: boolean
+  default?: () => DataT
+  transform?: (input: DataT) => DataT
+  pick?: string[]
+  watch?: WatchSource[]
+  initialCache?: boolean
+}
+
+type DataT = {
+  data: Ref<DataT>
+  pending: Ref<boolean>
+  refresh: () => Promise<void>
+  error: Ref<any>
+}
 ```
 
 ## Params
@@ -43,3 +52,18 @@ Under the hood, `lazy: false` uses `<Suspense>` to block the loading of the rout
 * **error**: an error object if the data fetching failed
 
 By default, Nuxt waits until a `refresh` is finished before it can be executed again. Passing `true` as parameter skips that wait.
+
+## Example
+
+```ts
+const { data, pending, error, refresh } = useAsyncData(
+  'mountains',
+  () => $fetch('https://api.nuxtjs.dev/mountains),
+  {
+    pick: ['title']
+  }
+)
+```
+
+::ReadMore{link="/guide/features/data-fetching"}
+::