Para mi sitio web/componente estoy usando vuejs, Nuxt y typecypt. Mi componente significa: componente popover genérico para mostrar cosas como filtros y menús en un elemento sobre la página

Tengo un problema. La directiva 'v-show' cambia la información sobre herramientas de Popper.js a las esquinas. Sin v-show, todo funciona bien, pero lo necesito para ocultar el elemento popover hasta que el usuario haga clic en el botón que abre popover.

Pregunta: ¿Cómo hacer que la ubicación de la información sobre herramientas sea correcta?

Aquí la imagen si el relleno está configurado en 'izquierda'

 <template> <div v-click-outside="togglePopover"> <span ref="popcorn"> <slot name="action" :toggle="toggle" :close="close" /> </span> <div ref="tooltip" role="tooltip" v-show="isOpen"> <div :class="[ci-popover, `ci-popover--background-color-${variant}`,`ci-popover--padding-${padding}`]"> <slot name="default" /> </div> </div> </div> </template>

componente padre

 <ci-popover variant="emphasis" padding="xs" placement="left"> <template #action="popover"> <ci-button @click="popover.toggle()"> Open Popover </ci-button> </template> <!-- Popover content --> <template #default> <p>some content 1</p> <p>some content 2</p> <p>some content 3</p> </template> </ci-popover>