Vue.js and Jest Not able to find any elements with wrapper.find(..)

I have this component that I'm using as popup:

<template>
<full-screen-popup ref="popup">
  <div class="confirm-dialogue-container">
    <div class="dialog-header">
      <h1 id="confirm-title-lbl">{{ title }}</h1>
      <h2 id="confirm-message-lbl">{{ message }}</h2>
    </div>
    <div class="actions-container">
        <button id="bt-confirm-delete" class="btn-action primary" @click="_confirm">{{ confirmLblButton }}</button>
        <button id="bt-cancel-delete" class="btn-action " @click="_cancel">{{ cancelLblButton }}</button>
    </div>
  </div>
</full-screen-popup>

<script>
import FullScreenPopup from './FullScreenPopup.vue'

export default {
  name: 'ReplaceDialogue',
  components: { FullScreenPopup },
  data: () => ({
    title: undefined,
    message: undefined,
    confirmLblButton: undefined,
    cancelLblButton: undefined,
    resolvePromise: undefined,
    rejectPromise: undefined
  }),
  methods: {
    show (opts = {}) {
      this.title = opts.title
      this.message = opts.message
      this.confirmLblButton = opts.confirmLblButton
      if (opts.cancelLblButton) {
        this.cancelLblButton = opts.cancelLblButton
      }
     
      this.$refs.popup.open()
      // Return promise so the caller can get results
      return new Promise((resolve, reject) => {
        this.resolvePromise = resolve
        this.rejectPromise = reject
      })
    },

    _confirm () {
      this.$refs.popup.close()
      this.resolvePromise(true)
    },

    _cancel () {
      this.$refs.popup.close()
      this.resolvePromise(false)
    }
  }
}
</script>


<template>
    <transition name="fade">
        <div class="full-screen-popup" v-if="isVisible">
            <slot></slot>
        </div>
    </transition>
</template>

<script>
export default {
  name: 'FullScreenPopup',
  data: () => ({
    isVisible: false
  }),
  methods: {
    open () {
      this.isVisible = true
    },
    close () {
      this.isVisible = false
    }
  }
}
</script>

Now, I would like to write some unit tests about for this component:

  it('Test', () => {
    
    const wrapper = mount(ReplaceDialogue)
            
    const promise = wrapper.vm.show({
        title: popupTitle,
        message: popupMessage,
        confirmLblButton: confirmButton,
        cancelLblButton: cancelButton
    })  

    let x = wrapper.find('#confirm-title-lbl')
    
  })

Seams that the html is empty. I'm not able to found any element with the wrapper.find(..) Any suggestions?