Vue Js days left in the month

<html>

<head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <h3>Vue Js days left in the month</h3>
        <p>Days left in the month: {{ daysLeft }}</p>
    </div>

<script type="module">
        const app = new Vue({
            el: "#app",
            data() {
                return {
                    daysLeft: 0,
                };
            },
            mounted() {
                const currentDate = new Date();
                const currentMonth = currentDate.getMonth();
                const nextMonth = currentMonth + 1;
                const nextMonthDate = new Date(currentDate.getFullYear(), nextMonth, 0);
                const daysInMonth = nextMonthDate.getDate();
                const currentDay = currentDate.getDate();

this.daysLeft = daysInMonth - currentDay;
            },
        });
    </script>

<style>
        #app {
            text-align: center;
            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.24);
            width: 600px;
            margin: 0 auto;
            padding: 20px;
        }

</style>
</body>

</html>