Vue 3 выдаёт непонятную ошибку Vue received a Component which was made a reactive object

[Vue warn]: Vue received a Component which was made a reactive object. This can lead to unnecessary performance overhead, and should be avoided by marking the component with markRaw or using shallowRef instead of ref.

Написано использовать shallowRef вместо ref, но я ref то и не использую.

App.vue

<template>
  <h1>App</h1>
  <component v-for="(element, index) in data" :key="index" :is="element.type">{{ element.content }}</component>
</template>

<script>
import Text from './components/Text'
import Title from './components/Title'

export default {
  name: 'App',
  components: { Text, Title },
  data () {
    return {
      data: [
        { type: Text, content: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi dolorem ipsam necessitatibus officiis quos sequi sit totam, voluptas. Fugiat harum laudantium minima, quas reiciendis repudiandae. Dolorum fugiat placeat reprehenderit voluptatem!' },
        { type: Title, content: 'Title h3' },
        { type: Text, content: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi dolorem ipsam necessitatibus officiis quos sequi sit totam, voluptas. Fugiat harum laudantium minima, quas reiciendis repudiandae. Dolorum fugiat placeat reprehenderit voluptatem!' }
      ]
    }
  }
}
</script>

./components/Text

<template>
  <p><slot></slot></p>
</template>

./components/Title

<template>
  <h2><slot></slot></h2>
</template>

https://drive.google.com/file/d/1R2wYCtP5ujSrXLeYrEWvj7kqHHMMaFKV/view?usp=sharing