Component not update with Ajax/Axios Request

[ravhirizaldi]

Hi, first all my current version vue-select is 3.18.3 and my Vue is 2.x and using vue-composition API for Vue 2

I'm trying to load the options using this example https://vue-select.org/guide/ajax.html#loading-options-with-ajax
My data is loaded but I must click on the other element to load my data to the options list or it will only show "Sorry no matching options" but when I click let say the page and focus to the vue-select element again my options is popped up

Here is my code :

<v-select ref="categoryProduct" v-model="products.Request.Product.PrimaryCategory" :options="categoryList" label="text" placeholder="Pilih Kategori" @search="getCategories">
<template #option="{ text, text2 }">
     <h5 style="margin: 0">
       {{ text }}
     </h5>
     <em>{{ text2 }}</em>
</template>
</v-select>

//debounce
const handler = _.debounce(async (search, loading) => {
      if (search.length > 0) {
        loading(true)
        await store.dispatch('something/fetchCategories', { product_name: search })
          .then(() => {
            const category = store.state.myState.categories
            if (category.length > 0) {
              categoryList.splice(1, categoryList.length)

              category.forEach(item => {
                categoryList.push({
                  value: item.categoryId,
                  text: item.categoryName,
                  text2: item.categoryPath,
                })
              })
            }
          })
        loading(false)
      }
    }, 500)

// get product categories
const getCategories = async (search, loading) => {
      await handler(search, loading)
}

Thank you! Sorry for my bad english.