Ошибка типа: преобразование циклической структуры в JSON при доступе к данным $slot из дочернего компонента в VueJS 3

Проблема: <pre>{{ $slots.title() }}</pre> не распечатывает ожидаемый объект.

Мой родительский компонент

МодальныйView.vue

<script setup>
import { ref } from 'vue'
import Modal from '@/components/Modal.vue'
import { btnStyleDark } from '@/styles/tailwindStyles'

const showModal = ref(false)
</script>

<template>
  <div>
    <h1>Modals</h1>
    <button @click = "showModal = true" :class = "btnStyleDark">Show Modal</button>

    <Modal v-if = "showModal" @close = "showModal = false" :btn-style = "btnStyleDark">
      <template #title>My new title</template>
      <p>
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vel tempora quibusdam tenetur,
        debitis autem fugit a nesciunt mollitia ipsa inventore nostrum perspiciatis neque dolor id
        magnam facere eum similique? Adipisci.
      </p>
    </Modal>
  </div>
</template>

Мой дочерний компонент

Модальный.vue

<script setup>
import { defineProps, defineEmits } from 'vue'

const props = defineProps({
  btnStyle: String,
})

const emit = defineEmits(['close'])
</script>

<template>
  <teleport to = "#modals-container">
    <div class = "modal z-10 absolute top-0 left-0 w-full h-full p-10 bg-yellow-50">
      <h1><slot name = "title" /></h1>
      <slot />
      <pre>{{ $slots.title() }}</pre>
      <button :class = "btnStyle" @click = "$emit('close')">Hide modal</button>
    </div>
  </teleport>
</template>

Ошибка в хроме:

TypeError: преобразование круговой структуры в JSON --> начиная с объекта с помощью конструктора Object | свойство 'vnode' -> объект с конструктором 'Object' --- свойство "компонент" замыкает круг в JSON.stringify() в toDisplayString (chunk-U6BEPC57.js?v=60065120:256:154)

Если я удалю () из <pre>{{ $slots.title() }}</pre> внутри дочернего элемента, я смогу увидеть это напечатанным в теге <pre> на странице без ошибки:

Однако эти данные мне ни о чем не говорят, а также не совпадают с данными, распечатанными из этого видеокурса:

Что я пробовал

Использование импорта useSlots

Это приводит к той же ошибке, но первый файл console.info работает!

<script setup>
import { defineProps, defineEmits, useSlots, onMounted } from 'vue'

const props = defineProps({
  btnStyle: String,
})

const emit = defineEmits(['close'])

const slots = useSlots()

console.info(slots.title())

onMounted(() => {
  console.info(slots)
})
</script>

<template>
  <teleport to = "#modals-container">
    <div class = "modal z-10 absolute top-0 left-0 w-full h-full p-10 bg-yellow-50">
      <h1><slot name = "title" /></h1>
      <slot />
      <pre>{{ $slots.title() }}</pre>
      <!-- <pre>{{ slots.title ? slots.title()[0] : '' }}</pre> -->

      <button :class = "btnStyle" @click = "$emit('close')">Hide modal</button>
    </div>
  </teleport>
</template>

Я также попробовал <pre>{{ slots.title() }}</pre> без $, но все равно выдает ошибку.