Vue Js Chips with Search Box

<html>

<h3>Vue Js Chips search and selection.</h3>
     
            <div class="chips">
                <span v-for='(newChip,index) in newChips' class="chip">
                    {{newChip}}
                    <i class="material-icons" @click="removeNewChip(index)">close</i>
                </span>
            </div>
          
            <input v-model="search" style="width:200px" placeholder="Search chips" />
           <div>
            <select v-model='selectedChip' style='width:200px' @change="addChip" size="10">
              <option :key="index" v-for="(chip, index) in filteredChips"> {{ chip }}</option>
            </select>
           </div>

</div>
    <script type="module">
        const app = new Vue({
            el: "#app",
            data() {
                return {
                    selectedChip: '',
                    newChips: [],
                    search: '',
                    chips: ['Vue', 'JavaScript', 'CSS', 'HTML','React','Angular','Node','Vuetify'],

}
            },
            computed: {
                filteredChips() {
                    return this.chips.filter(chip => chip.toLowerCase().includes(this.search.toLowerCase()));
                },
            },
            methods: {
                addChip() {
                    if (this.selectedChip !== "" & this.newChips.indexOf(this.selectedChip) == -1) {
                        this.newChips.push(this.selectedChip);
                        this.selectedChip = "";
                    }
                },
               removeNewChip(index) {
                    this.newChips.splice(index, 1)
                }
            },
        });
    </script>
    <style scoped>
        .chips {
            display: flex;
            flex-wrap: wrap;
        }

.chip {
            display: flex;
            align-items: center;
            background-color: #e0e0e0;
            padding: 0.4rem;
            border-radius: 16px;
            margin: 0.5rem;
            font-size: 1rem;
            font-weight: bold;
        }

.chip i {
            margin-left: 0.5rem;
            cursor: pointer;
            font-size: 1rem;
            background-color: black;
            color: #fff;
            border-radius: 50%;
        }
    </style>
</body>

</html>