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

    <transition name="modal-fade">
            <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">{{}}</h5>
                            <button type="button" class="close" @click="close">
                                <span aria-hidden="true">&times;</span>
                        <div class="modal-body">
                            <table class="table table-striped table-sm">
                                <tr v-for="cat in addedCat">
                                    <td>[{{ }}] {{ }}</td>
                                    <td><button @click="removeCat(cat)" class="btn btn-sm btn-danger">Remove</button></td>
                                    <select class="form-control">
                                        <option value=""><input type="text"></option>
                                        <option v-for="option in options" :value="">{{ option.text }}</option>

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

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

        computed: {

        methods: {
                let filCat = this.categories.filter(c => {
                    return this.addedCat.find(ac => === == null;

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

                filCat.forEach(c => {

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.
Sounds like it does what you are looking for.