Vue Js Dropdown With Search Box

<html>

<body>
    <div id="app">
        <h3>Search/Filter Dropdown</h3>
        <p>After clicking on the button to open the drop-down menu, you can use the input field provided to search for a
            specific item.</p>

<input style="width:250px" type="text" v-model="search" v-on:input="filterOptions" placeholder="Search"><br>
      <select v-model="selectedOption" style="width:250px" v-bind:size="options.length">
            <option disabled value="">Please select one</option>
            <option v-for="option in filteredOptions" :value="option">{{ option }}</option>
        </select>
        <pre>Selected language: {{  selectedOption }}</pre>
    </div>
    <script type="module">
        const app = new Vue({
            el: "#app",
            data() {
                return {
                    options: ['React', 'Vue', 'Angular', 'Node', 'Express', 'Bootstrap', 'MongoDb', 'Javascript', 'Vuetify'],
                    search: '',
                    selectedOption: '',

}
            },
            computed: {
                filteredOptions() {
                    return this.options.filter(option => {
                        return option.toLowerCase().includes(this.search.toLowerCase());
                    });
                }
            },
            methods: {
                filterOptions() {
                    this.filteredOptions = this.options.filter(option => {
                        return option.toLowerCase().includes(this.search.toLowerCase());
                    });
                },

}
        });
    </script>
    
</body>

</html>