Why is the text interpolation data not showing up, even though it shows in console (VUE 3)?

I’m trying to display the current time in IST in the format HH:MM:SS IST which keeps changing every second using text interpolation and composition api in Vue js.

I’m getting empty value in DOM although the values in the console are as expected.

Here is the code which I tried

<template>
    <h1>{{ currentTime }}</h1>
</template>

<script setup lang="ts">
    import { ref, onMounted, onUnmounted } from 'vue'
    var currentTime = ref('')
    let timeInterval: any

    onMounted(() => {
        timeInterval = setInterval(getCurrentTime, 1000)
    })

    onUnmounted(() => {
        clearInterval(timeInterval)
    })

    const getCurrentTime = () => {
        const today = new Date()
        var hours = today.getHours()
        var minutes
        let seconds
        hours = hours % 12
        hours = hours ? hours : 12
        minutes =
            today.getMinutes() < 10
                ? '0' + today.getMinutes()
                : today.getMinutes()
        seconds =
            today.getSeconds() < 10
                ? '0' + today.getSeconds()
                : today.getSeconds()
        const time = hours + ':' + minutes + ':' + seconds + 't' + 'IST'
        console.log('time' + time)
        currentTime = time
        console.log('currentTime' + currentTime)
    }
</script>

I’m getting the correct time, each second in the console but, getting blank page in the web.

What is missing or wrong here?