Component not firing after onMounted is called - vue.js

Question

I have the following component, it is a very simple countdown to 0. When the countdown reaches 0 it fires a redirect. When I put this component on my page itself, the onMounted function fires the interval(counterFunc()). When I isolate it into a component the interval(counterFunc()) does not fire. How can I fix this?
<template>
{{ counter }}
</template>
<script setup lang="ts">
const props = defineProps<{
time: number;
}>();
let counter = toRef(props, 'time')
const counterFunc = () => {
setInterval(() => {
counter.value--;
if (counter.value == 0) {
clearError({redirect: '/'})
}
}, 1000);
};
onMounted(() => {
counterFunc();
});
Using it in a template:
<AppCountdown :time=10></AppCountdown>

Answer 1

Here is a working example:
<script setup lang="ts">
import { defineProps, ref, onMounted, toRef } from "vue";
const props = defineProps<{
time: number;
}>();
const counter = ref(props.time); // set a proper ref that can be mutated
const counterFunc = () => {
setInterval(() => {
counter.value = counter.value - 1; // mutate the ref as expected
if (counter.value == 0) {
console.log("clearError"); // replace with your clear error function
}
}, 1000);
};
onMounted(counterFunc);
</script>
<template>
{{ counter }}
</template>
You can try it here: https://codesandbox.io/s/heuristic-stallman-niiqzl?file=/src/App.vue:0-419