Vue Tailwind Select2

<script>
export default{
  props:{
    url:{
      type:String,
      required:true
    },
    value:{
      type:Object,
      default:{
        val:null,
        text:null
      }
    }
  },
  data(){
    return {
      _value : this.value,
      open: false,
      processing: false,
      list_data:[],
      search:''
    }
  },
  methods:{
    getData(){
      this.processing = true
      axios.post(this.url,{search:this.search})
      .then(response=>{
        this.list_data = response.data
        this.processing = false
      })
      .catch(error=>{
        this._defaultErrorAjax(error.response)
        this.processing = false
      })
    },
    choose(index){
      this._value.val = this.list_data[index].val
      this._value.text = this.list_data[index].text
      this.search = this.list_data[index].text
      this.open = false
    },
    setOpened(){
      this.open = true
      const that = this
      setTimeout(function(){
        that.$refs.search_input.focus()
      },100)
    },
    setClosed(){
      this.open = false
    },
    val(){
      return this._value.val
    }
  },
  watch:{
    search(val){
      this.getData()
    }
  },
  created(){
    this.getData()
  }
}
</script>
<template>
  <div class="w-full relative">
    <div class="w-full rounded focus:outline-1 outline-primary-light ring-opacity-50 border-[1px] border-gray-300 px-4 h-10 cursor-text flex items-center" v-if="!open" v-on:click="setOpened()">
      <span class="flex-1">{{_value.text}}</span>
      <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
        <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
      </svg>
    </div>
    <div v-else class="flex items-center rounded border-[1px] overflow-hidden">
      <input type="text" class="focus:outline-none border-0" v-model="search" ref="search_input">
      <div class="px-4 h-full py-[14px] cursor-pointer bg-gray-100 absolute top-0 right-0 rounded-tr rounded-br hover:bg-gray-200" v-on:click="setClosed()">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M5 15l7-7 7 7" />
        </svg>
      </div>
    </div>
    <input type="hidden" v-model="_value.val">
    <ul class="border-x-[1px] absolute w-full z-10 max-h-60 overflow-y-scroll" v-if="open">
      <li class="px-3 py-1 duration-75 bg-white hover:bg-primary-light w-full cursor-pointer border-b-[1px] border-gray-50" v-for="(data,index) in list_data" :key="data.val" v-on:click="choose(index)">{{data.text}}</li>
    </ul>
  </div>
</template>