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

app/components/Projects/BottomScreen/Background.vue

@@ -1,17 +1,13 @@
 <script setup lang="ts">
-const backgroundImage = useTemplateRef("backgroundImage");
+import BACKGROUND_IMAGE from "/assets/images/projects/bottom-screen/background.png";
+
+const [backgroundImage] = useImages(BACKGROUND_IMAGE);
 
 useRender((ctx) => {
-  if (!backgroundImage.value) return;
+  ctx.drawImage(backgroundImage!, 0, 0);
+});
 
-  ctx.drawImage(backgroundImage.value, 0, 0);
+defineOptions({
+  render: () => null,
 });
 </script>
-
-<template>
-  <img
-    ref="backgroundImage"
-    src="/assets/images/projects/bottom-screen/background.png"
-    hidden
-  />
-</template>

app/components/Projects/BottomScreen/Projects.vue

@@ -65,4 +65,8 @@ const handleKeyDown = (e: KeyboardEvent) => {
 
 onMounted(() => window.addEventListener("keydown", handleKeyDown));
 onUnmounted(() => window.removeEventListener("keydown", handleKeyDown));
+
+defineOptions({
+  render: () => null,
+});
 </script>

app/components/Projects/TopScreen/TopScreen.vue

@@ -1,3 +1,5 @@
-<script setup lang="ts"></script>
-
-<template></template>
+<script setup lang="ts">
+defineOptions({
+  render: () => null,
+});
+</script>