<div class="chips-container">
            <div class='chips-inner-container'>
                <div v-for="(chip, index) in chips" :key="index" class="chip"> {{ chip }}</div>
                <span @click="removeChip" v-show="show" class="material-icons close">close</span>
            </div>

<div class="input-group">
                <label class="input-underlined">
                    <input v-model="inputValue" @keydown.enter="addChip" type="text">
                    <span class="input-label">Enter Tags</span>
                </label>
            </div>
        </div>

</div>
    
    <script type="module">
        const app = new Vue({
            el: "#app",
            data() {
                return {
                    inputValue: '',
                    chips: [],
                    show: false
                }
            },
            methods: {
                addChip() {
                    if (this.inputValue.length) {
                        this.chips.push(this.inputValue)
                        this.inputValue = ''
                        this.show = true
                    }
                },
                removeChip() {
                    this.chips.splice(0)
                    this.show = false
                },

}

});
    </script>
    <style scoped>
        .chips-container {
            display: flex;
            flex-wrap: wrap;
            box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
        }

.chips-inner-container {
            display: flex;
            align-items: center;
            width: 100%;
            flex-wrap: wrap;
        }

.chip {
            background-color: #e0e0e0;
            border-radius: 16px;
            padding: 8px 12px;
            margin: 4px;
            display: flex;
            align-items: center;
        }

.input-group {
            position: relative;
            width: 100%;
        }

.input-underlined>input {
            border: none;
            border-bottom: 0.125rem solid rgba(19, 19, 21, 0.6);
            width: 100%;
            font-size: 1.0625rem;
            padding-left: 0.875rem;
            line-height: 147.6%;
            padding-top: 0.825rem;
            padding-bottom: 0.5rem;
        }

.input-underlined>input:focus {
            outline: none;
            background: rgba(73, 133, 224, 0.12);
        }

.input-underlined>.input-label {
            position: absolute;
            top: 0.9375rem;
            left: 0.875rem;
            line-height: 147.6%;
            color: rgba(19, 19, 21, 0.6);
            transition: top .2s;
        }

.input-underlined>input:hover {
            background: rgba(73, 133, 224, 0.12);
            border-color: #121212;
        }

.input-underlined>input:focus+.input-label {
            top: 0;
            font-size: 0.9375rem;
            margin-bottom: 32px;

}

.close {
            margin-left: 0.5rem;
            cursor: pointer;
            border-radius: 16px;
            padding: 4px;
            background-color: antiquewhite;

}
    </style>
</body>

</html>