docs: update to script setup

Author: Sébastien Chopin

docs/content/4.api/2.$img.md

@@ -8,27 +8,28 @@ Sometimes it's required to directly use a generated image URL with applied trans
 ## Usage
 
 ```js
+const $img = useImage()
+
 $img(src, modifiers, options)
 ```
 
 **Example:** Generate image URL for `backgroundImage` style.
 
 ```js
-export default {
-  computed: {
-    backgroundStyles() {
-      const imgUrl = this.$img('https://github.com/nuxt.png', { width: 100 })
-      return {
-        backgroundImage: `url('${imgUrl}')`
-      }
-    }
+const $img = useImage()
+const backgroundStyles = computed(() => {
+  return {
+    const imgUrl = $img('https://github.com/nuxt.png', { width: 100 })
+    backgroundImage: `url('${imgUrl}')`
   }
-}
+})
 ```
 
 ### `$img.getSizes`
 
 ```js
+const $img = useImage()
+
 $img.getSizes(src, { sizes, modifiers });
 ```
 
@@ -53,6 +54,27 @@ Unstable: `getSizes` API might change or be removed.
 **Example:** Responsive srcset with Vuetify `v-img`
 
 ```html
+<script setup lang="ts">
+const props = defineProps({
+  height: { type: [Number, String], default: 500 },
+  src: {
+    type: String,
+    default: '/img/header-bg.jpg'
+  }
+})
+const $img = useImage()
+const _srcset = computed(() => {
+  return $img.getSizes(props.src, {
+    sizes: 'xs:100vw sm:100vw md:100vw lg:100vw xl:100vw',
+    modifiers: {
+      format: 'webp',
+      quality: 70,
+      height: props.height
+    }
+  })
+})
+</script>
+
 <template>
   <v-img
     :lazy-src="$img(src, { width: 10, quality: 70 })"
@@ -62,27 +84,4 @@ Unstable: `getSizes` API might change or be removed.
     :sizes="_srcset.sizes"
   ></v-img>
 </template>
-<script>
-  export default {
-    props: {
-      height: { type: [Number, String], default: 500 },
-      src: {
-        type: String,
-        default: '/img/header-bg.jpg',
-      },
-    },
-    computed: {
-      _srcset() {
-        return this.$img.getSizes(this.src, {
-          sizes: 'xs:100vw sm:100vw md:100vw lg:100vw xl:100vw',
-          modifiers: {
-            format: 'webp',
-            quality: 70,
-            height: 500,
-          },
-        });
-      },
-    },
-  };
-</script>
 ```