Vue Js Input mask

<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <h3>Vue Js Input Mask for phone number format (e.g. 123-456-7890).</h3>
    <div id="app">
        <input type="text" class="custom-input" v-model="formattedPhoneNumber" @input="formatPhoneNumber"
            placeholder="Enter Phone Number" />
    </div>
    <script type="module">
        const app = new Vue({
            el: "#app",
            data() {
                return {
                    rawPhoneNumber: '',
                    formattedPhoneNumber: ''
                }
            },
            methods: {
                formatPhoneNumber(event) {
                    this.rawPhoneNumber = event.target.value;
                    this.formattedPhoneNumber = this.formatAsPhoneNumber(this.rawPhoneNumber);
                },
                formatAsPhoneNumber(value) {
                    value = value.replace(/\D/g, '');
                    if (value.length > 10) {
                        value = value.slice(0, 10);
                    }
                    value = value.slice(0, 3) + '-' + value.slice(3, 6) + '-' + value.slice(6);
                    return value;
                }
            }

});
 </script>
 <style>
   .custom-input {
            font-size: 16px;
            border: none;
            border-bottom: 2px solid #ccc;
            padding: 0.5em 1em;
            flex-grow: 1;
            outline: none;
        }
    </style>
</body>
</html>