diff --git a/src/App.vue b/src/App.vue
index 9322800..7cf7f54 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -21,15 +21,16 @@
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
 const selectIndex = ref(-1)
 const selectIndexWidth = ref(0)
 
+const min = computed(() => selectIndex.value)
+const max = computed(() => selectIndexWidth.value + selectIndex.value)
+
 function getClassName(i) {
-  const min = selectIndex.value
-  const max = selectIndexWidth.value + selectIndex.value
-  if (Math.max(max, 30) === max && Math.min(i, min) === min) return 'warn'
-  if (Math.min(min, i) === min && Math.max(max, i) === max) return 'select'
+  if (Math.max(max.value, 30) === max.value && Math.min(i, min.value) === min.value) return 'warn'
+  if (Math.min(min.value, i) === min.value && Math.max(max.value, i) === max.value) return 'select'
   return ''
 }