Review comments.

src/components/Matrix.vue

@@ -15,7 +15,7 @@
     export default defineComponent({
         props: {
             size: {type: Number, required: true},
-            matrix: {type: Array, required: true}
+            matrix: {type: Array, required: true},
         }
     });
 </script>

src/components/Timer.vue

@@ -6,27 +6,29 @@
 </template>
 
 <script lang="ts">
-    import {defineComponent, ref} from "vue";
+    import {defineComponent, ref, computed} from "vue";
     
     export default defineComponent({
         props: {
             time: {type: Object, required: true}
         },
         setup(props) {
-            const countdown = ref("60.00");
+            const remainingTime = ref(60)
-            const progress = ref(100);
+            const progress = computed(() => remainingTime.value/60*100);
+            const countdown = computed(() => remainingTime.value.toFixed(2));
 
-            setInterval(() => {
+            const updateTime = () => {
-                const remaining = (props.time.getTime()-new Date().getTime())/1000;
+                remainingTime.value = Math.max(0, (props.time.getTime() - new Date().getTime()) / 1000);
-
+                if (remainingTime.value > 0) {
-                if(remaining > 0) {
+                    requestAnimationFrame(() => {
-                    countdown.value = remaining.toFixed(2);
+                        updateTime();
-                    progress.value = remaining/60*100;
+                    });
-                } else {
-                    countdown.value = "0.00";
-                    progress.value = 0;
                 }
-            }, 100);
+            }
+
+            requestAnimationFrame(() => {
+                updateTime();
+            });
 
             return {
                 countdown,