How to show variable inside function in vue3 template - vue.js

Question

How can I display the variable inside template? I use Nuxtjs version 3.2.
I set return but its not show in the template
<template>
<div>
<p> Countdown: {{ `${days}` }} {{ minutes }} {{ seconds }} </p>
</div>
</template>
<script>
const countDownDate = new Date("Apr 28, 2023 16:37:52").getTime();
const myfunc = setInterval(function() {
const now = new Date().getTime();
var timeleft = countDownDate - now;
let days = Math.floor(timeleft / (1000 * 60 * 60 * 24));
let hours = Math.floor((timeleft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
let minutes = Math.floor((timeleft % (1000 * 60 * 60)) / (1000 * 60));
let seconds = Math.floor((timeleft % (1000 * 60)) / 1000);
return { days , hours , minutes , seconds}
}, 1000)
</script>

Answer 1

Just use Vue's reactivity
Define your variables with ref()
const days = ref(0);
And set them in your function using .value:
days.value = Math.floor(timeleft / (1000 * 60 * 60 * 24));
Here is the Playground
const { createApp, ref } = Vue;
const countDownDate = new Date("Apr 28, 2023 16:37:52").getTime();
const App = {
setup() {
const days = ref(0);
const hours = ref(0);
const minutes = ref(0);
const seconds = ref(0);
const myfunc = setInterval(function() {
const now = new Date().getTime();
var timeleft = countDownDate - now;
days.value = Math.floor(timeleft / (1000 * 60 * 60 * 24));
hours.value = Math.floor((timeleft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
minutes.value = Math.floor((timeleft % (1000 * 60 * 60)) / (1000 * 60));
seconds.value = Math.floor((timeleft % (1000 * 60)) / 1000);
}, 1000)
return { days, hours, minutes, seconds }
}
}
const app = createApp(App);
app.mount('#app');
#app { line-height: 1.5; }
[v-cloak] { display: none; }
<div id="app" v-cloak>
<b>Countdown:</b><br/>
<p> Days {{ days }}, Hours {{ hours }}, Minutes: {{ minutes }}, Seconds: {{ seconds }} </p>
</div>
<script src="https://unpkg.com/vue#3/dist/vue.global.prod.js"></script>
<script setup> version here.

Answer 2

With the watchEffect working.
<template>
<div>
<p>Countdown: {{ `${days}` }} {{ hours }} {{ minutes }} {{ seconds }} </p>
</div>
</template>
<script>
import { ref, watchEffect } from 'vue';
export default {
setup() {
const countDownDate = new Date('Apr 28, 2023 16:37:52').getTime();
const days = ref(0);
const hours = ref(0);
const minutes = ref(0);
const seconds = ref(0);
watchEffect(() => {
const now = new Date().getTime();
const timeleft = countDownDate - now;
days.value = Math.floor(timeleft / (1000 * 60 * 60 * 24));
hours.value = Math.floor((timeleft % (1000 * 60 * 60 * 24)) / (1000 * 60 *
60));
minutes.value = Math.floor((timeleft % (1000 * 60 * 60)) / (1000 * 60));
seconds.value = Math.floor((timeleft % (1000 * 60)) / 1000);
});
return { days, hours, minutes, seconds };
},
};
</script>