Dropdown Vuejs With Tailwindcss

vuejs.html

<template>
<div>
    <div class="flex flex-col">
        <label>Account :</label>
        <button class="input" @click="open">
            <span v-show="value !== ''" class="float-left text-dark"> {{ value }}</span>
            <span v-show="value == ''" class="float-left text-grey">Select an account ...</span>
        </button>
    </div>
    <!-- @focusout="Close" -->
    <div v-show="isOpen" class="z-40 static bg-blue-light p-1 rounded shadow">
        <input
        @keyup.enter.prevent="Enter"
        @keydown.esc="Close"
        @keydown.down="next"
        @keydown.up="previous"
        @keydown.tab.prevent
        v-model="search"
        ref="search"
        type="text" class="input w-full" name="">
        <ul
        ref="items"
        class="bg-blue-light flex flex-col px-0 py-2 overflow-auto max-h-xs">
            <span v-show="!Find.length > 0" class="text-grey-darker flex justify-center">Nothing Found</span>
            <li
             v-for="(found,index) in Find"
             @click="Choose(found)"
             @keyup.enter.prevent="Choose(found)"
             :class="{'bg-white text-blue-light' : index == ChosenIndex}"
             class="py-2 px-2 text-white rounded hover:bg-blue-lighter cursor-pointer">
                <div class="px-1">
                    {{ found }}
                </div>
            </li>
        </ul>
    </div>
</div>
</template>

vuejs.js

 export default {
        data() {
            return {
                isOpen: false,
                items : ['john@example.com','doe@example.com','name@email.com','Something@email.com'],
                search : '',
                value : '',
                ChosenIndex: 0
            }
        },
        methods : {
            open() {
                this.isOpen = !this.isOpen;
                this.$nextTick(() => {
                this.$refs.search.focus()
                })
                this.$refs.items.children[this.ChosenIndex].scrollIntoView({block : 'nearest'})
            },
            Enter() {
                this.Choose(this.Find[this.ChosenIndex]);
            },
            Choose(found) {
                this.value = found
                this.ChosenIndex = this.items.findIndex((item) => {
                    return item == found
                });
                this.Close();
            },
            Close() {
                this.isOpen = false;
                this.search = ""
            },
            searching() {
                let items = this.items.filter(item => {
                    const regex = new RegExp(this.search,'gi')
                    return item.match(regex);
                });
                this.ChosenIndex = 0
                return items;
            },
            chosed(index) {
                this.ChosenIndex = index
                if(this.ChosenIndex < 0)
                {
                    this.ChosenIndex = this.Find.length - 1;
                }
                if(this.ChosenIndex > this.Find.length - 1)
                {
                    this.ChosenIndex = 0;
                }
                this.$refs.items.children[this.ChosenIndex].scrollIntoView({block : 'nearest'})
            },
            next() {
                this.chosed(this.ChosenIndex + 1)
            },
            previous() {
                this.chosed(this.ChosenIndex - 1)
            }
        },
        computed : {
            Find() {
                return this.searching()
            }
        }
 }