For my website/component I am using vuejs, Nuxt and typescypt. My component stands for - generic popover component for displaying things like filters and menus in an element over the page

I have problem 'v-show' directive shifts tooltip of Popper.js to corners. Without v-show all is working fine, but I need it to hide popover element until user click on button what opens popover.

Question: How to make tooltip placement correct?

Here picture if padding is set to 'left'

<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> 

parent component

<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>