How to set default boundary element with id or query selector string?

[itsmnthn]

import { Dropdown, Menu, Tooltip, options, vTooltip } from 'floating-vue'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.directive('tooltip', vTooltip)

  nuxtApp.vueApp.component('Dropdown', Dropdown)
  nuxtApp.vueApp.component('Tooltip', Tooltip)
  nuxtApp.vueApp.component('Menu', Menu)

  options.themes.tooltip.delay.show = 300
  options.themes.tooltip.delay.hide = 100
  options.boundary = '#main' // #__nuxt or main or #__boundaryId or .popper-boundary
})

This is purely a design requirement say I have a main container that has margins on all sides say 200px I want to consider space around the entire page/main container to make sure it don't go over the empty place cuz it don't look gud.

There was one answer, but there will not be element in dom wen this plugin runs

options.boundary = document.querySelector('#main')

tried this but is not working

<script lang="ts" setup>
import { options } from 'floating-vue'


const main = ref()
onMounted(() => {
  options.boundary = main.value
})
</script>

<template>
  <div class="text-sm bg-back md:text-base p-200px">
    <div ref="main">
      <slot />
    </div>
  </div>
</template>