docs: use useAsyncData in json page

Author: atinux

docs/content/docs/3.files/3.json.md

@@ -54,14 +54,20 @@ Each file in `data` collection should contain only one object, therefore having
 
 Now we can query authors:
 
-```ts
+```vue
+<script lang="ts" setup>
 // Find a single author
-const theAuthor = await queryCollection('authors')
-  .where('stem', '=', 'larbish')
-  .first()
+const { data: author } = await useAsyncData('larbish', () => {
+  return queryCollection('authors')
+    .where('stem', '=', 'larbish')
+    .first()
+})
 
 // Get all authors
-const authors = await queryCollection('authors')
-  .order('name', 'DESC')
-  .all()
+const { data: authors } = await useAsyncData('authors', () => {
+  return queryCollection('authors')
+    .order('name', 'DESC')
+    .all()
+})
+</script>
 ```