Create a div for Vue to link to and surround the dynamic render variable text in a pair of mustaches
<div id="time">{{ text }}</div>
Create a Date object, and a Vue instance. Link it to the time div, and set the initial value to the local current time.
<script>
var d = new Date();
var clock = new Vue({
el: '#time',
data: {
text: d.toLocaleTimeString()
}
})
Create an interval timing event to recalculate the current time every 1000 milliseconds.
setInterval( function() { d = new Date(); clock.text = d.toLocaleTimeString() },1000);
</script>
Assigning the calculated time to the data property text of the Vue instance clockmeans each time the setInterval event runs, the time element updates the value displayed.
