Make component reactive to window resizing

components/blocks/LeaderboardInfo/LeaderboardInfo.vue

@@ -1,5 +1,7 @@
 <script setup lang="ts">
+import { useThrottleFn } from '@vueuse/core'
 import resolveConfig from 'tailwindcss/resolveConfig'
+import { ref } from 'vue'
 import tailwindConfig from 'root/tailwind.config'
 import Desktop from './Desktop/Desktop.vue'
 import Mobile from './Mobile/Mobile.vue'
@@ -17,16 +19,25 @@ const emit = defineEmits<{
   (event: 'follow', leaderboardId: number): void
 }>()
 
-const isMobile =
-  window.innerWidth <=
-  parseInt(resolveConfig(tailwindConfig).theme.screens.sm.replace('px', ''), 10)
+const mobileWidth = parseInt(
+  resolveConfig(tailwindConfig).theme.screens.sm.replace('px', ''),
+  10,
+)
+
+const isMobile = ref(window.innerWidth <= mobileWidth)
+
+function checkIsMobile() {
+  isMobile.value = window.innerWidth <= mobileWidth
+}
+
+window.addEventListener('resize', useThrottleFn(checkIsMobile, 20))
 
 defineProps<LeaderboardInfoProps>()
 </script>
 
 <template>
   <Mobile
-    v-if="isMobile"
+    v-if="isMobile.valueOf()"
     data-testid="child"
     :leaderboard="leaderboard"
     :todo-platforms="todoPlatforms"

package.json

@@ -64,5 +64,8 @@
     "vitest": "^1.2.2",
     "vitest-fetch-mock": "^0.2.2",
     "vue": "^3.4.19"
+  },
+  "dependencies": {
+    "@vueuse/core": "^10.9.0"
   }
 }