fix(loader-image): migrate to script setup

nuxt/components/loader/LoaderImage.vue

@@ -11,57 +11,42 @@
   </div>
 </template>
 
-<script lang="ts">
-import { PropType } from 'vue'
+<script setup lang="ts">
+export interface Props {
+  alt: string
+  rounded?: boolean
+  src: string
+}
+const props = withDefaults(defineProps<Props>(), {
+  rounded: undefined,
+})
 
-export default defineComponent({
-  props: {
-    alt: {
-      required: true,
-      type: String,
-    },
-    rounded: {
-      default: undefined,
-      type: Boolean as PropType<boolean | undefined>,
-    },
-    src: {
-      required: true,
-      type: String,
-    },
-  },
-  setup(props) {
-    const data = reactive({
-      srcWhenLoaded: undefined as string | undefined,
-    })
-    const methods = {
-      async updateSource() {
-        data.srcWhenLoaded = process.server
-          ? props.src
-          : await new Promise<string>((resolve) => {
-              const img = new Image()
+// data
+const srcWhenLoaded = ref<string | undefined>()
 
-              img.onload = () => {
-                resolve(img.src)
-              }
+// methods
+async function updateSource() {
+  srcWhenLoaded.value = process.server
+    ? props.src
+    : await new Promise<string>((resolve) => {
+        const img = new Image()
 
-              img.src = props.src
-            })
-      },
-    }
+        img.onload = () => {
+          resolve(img.src)
+        }
 
-    watch(
-      () => props.src,
-      async (_currentValue, _oldValue) => {
-        await methods.updateSource()
-      }
-    )
+        img.src = props.src
+      })
+}
 
-    methods.updateSource()
+// lifecycle
+watch(
+  () => props.src,
+  async (_currentValue, _oldValue) => {
+    await updateSource()
+  }
+)
 
-    return {
-      ...data,
-      ...methods,
-    }
-  },
-})
+// initialization
+await updateSource()
 </script>