fix: duplicate request in random image component

.eslintrc.json

@@ -21,6 +21,8 @@
   ],
   "rules": {
     "space-before-function-paren": "off",
-    "no-unused-vars": "warn"
+    "no-unused-vars": "warn",
+
+    "vue/html-self-closing": "off"
   }
 }

client/components/RandomImage.vue

@@ -10,12 +10,12 @@
       class="img object-cover hidden w-full h-full object-center"
       :class="{ block: !data.loading, visible: data.visible }"
       @load="loaded"
-    >
+    />
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, reactive, ref, watchEffect } from 'vue'
+import { defineComponent, reactive, ref, watch } from 'vue'
 import { axiosInstance } from '~/api'
 import { useObserve } from '../hooks'
 
@@ -77,9 +77,12 @@ export default defineComponent({
 
     const root = ref<any>(null)
 
-    watchEffect(async () => {
-      data.imgUrl = await getImageUrl(String(props.randomId), props.src)
-    })
+    watch(
+      () => props.randomId,
+      async () => {
+        data.imgUrl = await getImageUrl(String(props.randomId), props.src)
+      }
+    )
 
     useObserve(root, async () => {
       data.visible = true

package.json

@@ -20,7 +20,7 @@
     "release": "glib release"
   },
   "lint-staged": {
-    "*.{js,vue}": "eslint"
+    "*.{ts,js,vue}": "eslint"
   },
   "husky": {
     "hooks": {