Trap TAB and Shift+TAB in modal or any other element. Just wrap it in this component.

ModalFocusTrap.vue

<script lang="ts" setup>
import { type Ref, onMounted, ref } from 'vue'

const selectors = 'a[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled])'
const wrapper: Ref<HTMLElement | undefined> = ref()
const focusableEls: Ref<Array<HTMLElement>> = ref([])
const firstFocusableEl: Ref<HTMLElement | undefined> = ref()
const lastFocusableEl: Ref<HTMLElement | undefined> = ref()

function handleBackwardMove(event: KeyboardEvent): void {
  if (document.activeElement === firstFocusableEl.value) {
    event.preventDefault()
    lastFocusableEl.value!.focus()
  }
}

function handleForwardMove(event: KeyboardEvent): void {
  if (document.activeElement === lastFocusableEl.value) {
    event.preventDefault()
    firstFocusableEl.value!.focus()
  }
}

function handleKeyDown(event: KeyboardEvent): void {
  scanFocusableElements()
  if ('Tab' === event.key) {
    if (focusableEls.value.length === 1) {
      event.preventDefault()
      return
    }
    if (event.shiftKey) {
      return handleBackwardMove(event)
    }
    return handleForwardMove(event)
  }
}

function scanFocusableElements() {
  const getEls: NodeListOf<Element> = wrapper.value!.querySelectorAll(selectors)
  focusableEls.value = Array.from(getEls) as Array<HTMLElement>
  firstFocusableEl.value = focusableEls.value[0]
  lastFocusableEl.value = focusableEls.value.slice(-1)[0]
}

onMounted(() => {
  scanFocusableElements()
  wrapper.value!.addEventListener('keydown', handleKeyDown)
  firstFocusableEl.value!.focus()
})
</script>

<template>
  <div ref="wrapper">
    <slot />
  </div>
</template>