Vue.js Text Field with Clearable Button

<html>

<body>
    <div id="app">
        <h3>Dynamic Input Field Clear Button in Vue.js</h3>
        <div class="input-group">
            <input type="text" v-model="value" :class="{ 'has-value': value, 'active': isActive }"
                @click="isActive = true" @blur="isActive = false" />
            <button v-if="value" @click="clearValue">Clear</button>
        </div>
    </div>
    </div>
    <script type="module">
        const app = new Vue({
            el: "#app",
            data() {
                return {
                    value: '',
                    isActive: false
                }
            },
            methods: {
                clearValue() {
                    this.value = '';
                }
            }
        });
    </script>
    <style>
        .input-group {
            display: flex;
            align-items: center;
        }

input {
            border: none;
            border-bottom: 2px solid #ccc;
            padding: 0.5em 1em;
            flex-grow: 1;
            outline: none;
        }

input.has-value {
            border-bottom-color: #007bff;
        }

input.active {
            background-color: #f2f2f2;
        }

button {
            background-color: #fff;
            border: 1px solid #ccc;
            border-radius: 4px;
            padding: 0.5em 1em;
            cursor: pointer;
            margin-left: 0em;
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
        }
    </style>

</body>

</html>