How to type and filter in a dropdown select in vue

I have a dropdown that has a list of categories. What I would like is to be able type in the dropdown and filter my dropdown with what I’ve typed.

Here is my code

<template>
    <transition name="modal-fade">
        <div>
            <div class="modal-backdrop show"></div>
            <div class="modal" style="display: inline;">
                <div class="modal-dialog modal-dialog-scrollable" role="document" style="width: 680px; max-width: 680px;">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title">{{product.name}}</h5>
                            <button type="button" class="close" @click="close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <table class="table table-striped table-sm">
                                <thead>
	                                <tr>
	                                    <th>Name</th>
	                                    <th>Remove</th>
	                                </tr>
                                </thead>
                                <tbody>
                                <tr v-for="cat in addedCat">
                                    <td>[{{ cat.id }}] {{ cat.name }}</td>
                                    <td><button @click="removeCat(cat)" class="btn btn-sm btn-danger">Remove</button></td>
                                </tr>
                                <tr>
                                    <select class="form-control">
                                        <option value=""><input type="text"></option>
                                        <option v-for="option in options" :value="option.id">{{ option.text }}</option>
                                    </select>
                                </tbody>
                            </table>


                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" @click="close">Close</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </transition>
</template>

<script>
    export default {
        props: ['user', 'products', 'bus'],
        data() {
            return {
                addedCat: [],
                options: []
            }
        },
        mounted() {
            axios.get('/admin/product/'+this.product.id+'/categories').then((response) => {
                this.addedCat = response.data.categories;
            });

			this.getCategories();
        },
        computed: {

        },
        methods: {
            getCategories(){
                let filCat = this.categories.filter(c => {
                    return this.addedCat.find(ac => ac.id === c.id) == null;
                })

                this.options.push({id: 0, text: "Please select one"});

                filCat.forEach(c => {
                    this.options.push({
                        id: c.id,
                        text: c.name
                    });
                });
            },
        }
    }
</script>

After reading your question (didn’t read through your code), I was curious myself and searched the web. Since you haven’t had any replies or closed this post, just letting you know about the HTML datalist tag.
https://www.w3schools.com/tags/tag_datalist.asp
Sounds like it does what you are looking for.