need code review about AutoComplete from vue expert

[perfectSquare]

`

{{opt}}

<script setup> import { ref, onMounted } from 'vue' const props = defineProps({ options: Array, // of strings wid: String }) const model = defineModel({type: String}) const modelInput = ref('Select') const selector = ref(null) const showOptions = ref(false) const optionsToUse = ref(props.options) const optionsStored = ref(props.options) const textStarted = () => { showOptions.value = true optionsToUse.value = optionsStored.value optionsToUse.value = optionsToUse.value.filter((item) => { const regex = new RegExp(`^${modelInput.value}`, 'i'); return regex.test(item); }) } const selectedIndex = ref(-1) const selectedModel = ref('') const down = () => { selectedIndex.value++ if(selectedIndex.value >= selector.value.childElementCount){ selectedIndex.value = 0 } selector.value.children[selectedIndex.value].classList.add('bg-gray-100') if(!(selectedIndex.value == 0)){ selector.value.children[selectedIndex.value-1].classList.remove('bg-gray-100') } else{ selector.value.lastElementChild.classList.remove('bg-gray-100') } selectedModel.value = selector.value.children[selectedIndex.value].textContent modelInput.value = selector.value.children[selectedIndex.value].textContent selector.value.children[selectedIndex.value].scrollIntoView(false) } const up = () => { selectedIndex.value-- if(selectedIndex.value <= 0){ selectedIndex.value = selector.value.childElementCount } if(selectedIndex.value == selector.value.childElementCount){ selector.value.firstElementChild.classList.add('bg-gray-100') selector.value.children[1].classList.remove('bg-gray-100') selectedModel.value = selector.value.firstElementChild.textContent modelInput.value = selector.value.firstElementChild.textContent selector.value.firstElementChild.scrollIntoView(false) return } if(selectedIndex.value == selector.value.childElementCount-1){ selector.value.firstElementChild.classList.remove('bg-gray-100') selector.value.lastElementChild.classList.add('bg-gray-100') selectedModel.value = selector.value.lastElementChild.textContent modelInput.value = selector.value.lastElementChild.textContent selector.value.lastElementChild.scrollIntoView(false) return } selector.value.children[selectedIndex.value].classList.add('bg-gray-100') selector.value.children[selectedIndex.value+1].classList.remove('bg-gray-100') selectedModel.value = selector.value.children[selectedIndex.value].textContent modelInput.value = selector.value.children[selectedIndex.value].textContent selector.value.children[selectedIndex.value].scrollIntoView(false) } const entered = () => { model.value = selectedModel.value modelInput.value = selectedModel.value showOptions.value = false selectedIndex.value = -1 } const ousideClicked = () => { showOptions.value = false } onMounted(()=>{ modelInput.value = model.value }) </script> <style scoped> .sw{ scrollbar-width: thin; scrollbar-color: #666666 #f2f2f2; } .divWidth{ max-width: v-bind('props.wid'); } </style>

`