Vue Js Display Time Based Message

<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <h3>Vue Js Display Time Based Message</h3>
    <div id="app">
        <p>{{ message }}</p>
    </div>
    <script type="module">
        const app = new Vue({
            el: "#app",
            data() {
                return {
                    currentTime: new Date()
                }
            },
            computed: {
                message() {
                    const currentHour = this.currentTime.getHours()

if (currentHour >= 6 && currentHour < 12) {
                        return "Good morning!"
                    } else if (currentHour >= 12 && currentHour < 18) {
                        return "Good afternoon!"
                    } else if (currentHour >= 18 && currentHour < 22) {
                        return "Good evening!"
                    } else {
                        return "Good night!"
                    }
                }
            },
            methods: {
                updateTime() {
                    this.currentTime = new Date()
                }
            },
            created() {
                setInterval(this.updateTime, 1000)
            },
            destroyed() {
                clearInterval(this.updateTime)
            }

});
    </script>
 </body>
</html>