I am using the focus-trap package for Vue3 to trap focus inside a form, inside of a modal. I'm having trouble with the :setInitialFocus prop, I think because the element I'm trying to reference there is initially hidden from the page. I've tried using this.$nextTick to remedy that, but haven't had any luck.

In my component I have:

   <focus-trap 
       ref="focusTrap" 
       :active="isFocusTrapActive" 
       :initialFocus="() => $refs.modalForm"
    >
       <Modal @close="closeModal"
               :isOpen="openModal"
       >
          <AccountLoginForm :ref="modalForm"/>
     </Modal>
</focus-trap>

Opening the modal (and the focus trap) are handled by:

    launchModal() {
       this.openModal = !this.openModal;
       this.$nextTick(() => {
          this.isFocusTrapActive = !this.isFocusTrapActive;
       });
     },

With this setup, when the modal opens, I get a maximum call stack exceeded error.

I've also tried just assigning the modal component a ref, and using that for the setInitialFocus prop, such as:

<focus-trap 
       ref="focusTrap" 
       :active="isFocusTrapActive" 
       :initialFocus="() => $refs['modalForm']"
    >
       <Modal @close="closeModal"
               :isOpen="openModal"
               ref="modalForm"
       >
          <AccountLoginForm/>
     </Modal>
</focus-trap>

but get a initialFocus did not return a node error.

The only thing I CAN get to work is if I don't set initialFocus -- then the focus is trapped inside the modal when it appears, just not in the form. I'm not sure what's going on. If any one could offer any help that would be much appreciated.