feat: use useImages composable instead of <img> + useTemplateRef

app/components/Home/TopScreen/Clock.vue

@@ -1,10 +1,12 @@
 <script setup lang="ts">
+import CLOCK_IMAGE from "/assets/images/home/top-screen/clock.png";
+
 const CENTER_X = 63;
 const CENTER_Y = 95;
 
 const store = useHomeStore();
 
-const clockImage = useTemplateRef("clockImage");
+const [clockImage] = useImages(CLOCK_IMAGE);
 
 function drawLine(
   ctx: CanvasRenderingContext2D,
@@ -52,14 +54,12 @@ function drawLine(
 }
 
 useRender((ctx) => {
-  if (!clockImage.value) return;
-
   ctx.globalAlpha = store.isIntro
     ? store.intro.stage1Opacity
     : store.isOutro
       ? store.outro.stage1Opacity
       : 1;
-  ctx.drawImage(clockImage.value, 13, 45);
+  ctx.drawImage(clockImage!, 13, 45);
 
   ctx.globalAlpha = store.isIntro
     ? store.intro.stage1Opacity
@@ -93,8 +93,8 @@ useRender((ctx) => {
   ctx.fillStyle = "#494949";
   ctx.fillRect(CENTER_X - 2, CENTER_Y - 2, 5, 5);
 });
-</script>
 
-<template>
-  <img ref="clockImage" src="/assets/images/home/top-screen/clock.png" hidden />
-</template>
+defineOptions({
+  render: () => null,
+});
+</script>