[Vuejs]-Why does the VueMultiselect is always open by default when using within HeadlessUI Dialog/modal

Got to know that it’s because the dialogue component will focus on the first focusable element:

https://headlessui.com/react/dialog#managing-initial-focus

Changed the focus element to some other element like this:

 <TransitionRoot appear :show="showModal" as="template" initialFocus="{completeButtonRef}">

and the corresponding button:

<button type="button" @click="closeModal" ref="{completeButtonRef}">Submit</button>