Vue Js Input Mask for Credit Card

<html>

<body>
    <h3>Vue Js Input Mask for Credit Card</h3>
    <div id="app">
        <input type="text" placeholder='####-####-####-####'  v-model="creditCardNumber" class="custom-input" @input="formatCreditCardNumber"
            @keydown="handleKeyDown">
    </div>
    <script type="module">
        const app = new Vue({
            el: "#app",
            data: {
                creditCardNumber: ''
            },
            methods: {
                formatCreditCardNumber() {
                    this.creditCardNumber = this.creditCardNumber.replace(/\D/g, '').replace(/(.{4})/g, '$1 ').trim();
                },
                handleKeyDown(event) {
                    if (!/^\d$|^Backspace$|^Delete$/.test(event.key)) {
                        event.preventDefault();
                    }
                }
            }
        });
    </script>
    <style>
        .custom-input {
            font-size: 16px;
            border: none;
            border-bottom: 2px solid #ccc;
            padding: 0.5em 1em;
            flex-grow: 1;
            outline: none;
            transition: border-color 0.3s ease-in-out;
            background-color: transparent;
            color: #333;
            font-family: Arial, sans-serif;
        }

.custom-input:focus {
            border-color: #007bff;
        }
    </style>
</body>

</html>