chore(docs): improvements regarding asyncData example

docs/content/2.app/3.data-fetching.md

@@ -13,7 +13,7 @@ asyncData(key: string, fn: () => Object, options?: { defer: boolean, server: boo
 ```
 
 * **key**: a unique key to ensure that data fetching can be properly de-duplicated across requests
-* **fn** an asynchronous function that must return an object.
+* **fn** an asynchronous function that **must return an object**.
 * **options**:
   - _defer_: whether to load the route before resolving the async function (defaults to `false`)
   - _server_: whether the fetch the data on server-side (defaults to `true`)
@@ -26,6 +26,18 @@ This helper only works with:
 
 ### Example
 
+```vue
+<script setup nuxt>
+const { data } = asyncData('time', () => $fetch('/api/count'))
+</script>
+
+<template>
+  Page visits: {{ data.count }}
+</template>
+```
+
+If you don't want to use the `<script setup>` syntax, you need to use the `defineNuxtComponent` method to define your component:
+
 ```vue
 <template>
   Page visits: {{ data.count }}
@@ -41,15 +53,4 @@ export default defineNuxtComponent({
 </script>
 ```
 
-When using with the `<script setup>` syntax, an addition attribute `nuxt` is required
-
-```vue
-<script setup nuxt>
-const { data } = asyncData('time', () => $fetch('/api/count'))
-</script>
-
-<template>
-  Page visits: {{ data.count }}
-</template>
-```