Updating Dates in Vue.js with Input and Two-Way Data Binding

<html>

<head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <h3>Setting a Date in Vue.js using Input and Two-Way Data Binding</h3>
        <input type="date" v-model="selectedDate" class="custom-date-input">
        <p>Selected date: {{ formattedDate }}</p>
    </div>
    <script type="module">
        const app = new Vue({
            el: "#app",
            data() {
                return {
                    selectedDate: new Date().toISOString().substr(0, 10)
                }
            },
            computed: {
                formattedDate() {
                    return new Date(this.selectedDate).toLocaleDateString("en-US", {
                        day: "numeric",
                        month: "long",
                        year: "numeric"
                    });
                }
            }
        });
    </script>
    <style>
    .custom-date-input {
      font-size: 16px;
      padding: 8px;
      border: 1px solid #ccc;
      border-radius: 4px;
    }
  </style>
</body>
</html>