kabab-case component doesn't work when I typed same name but camelcase ref.

[Shimada666]

Version

2.7.7

Reproduction link

github.com

Steps to reproduce

1. Clone the repo
2. Run pnpm i
3. Run pnpm dev

What is expected?

Kebab-case component can be rendered.

What is actually happening?

Kebab-case component can't be rendered. But when I delete ref sentence, it works.

---

Is it a bug?
It can work in vue3.
It also can work in vue2.6 + vue-composition-api.

[Shimada666]

<template>
  <div>
    <p>I'm parent.</p>

    <p>This can work: {{right}} -> (<ChildPage/>)</p>
    <p>This can't work: {{wrong}} -> (<child-page/>)</p>

    <p>Because I coded 'const childPage = ref(null)'. If I delete it, they both can show.</p>
  </div>
</template>
<script setup>
import ChildPage from './ChildPage.vue'
import { ref } from 'vue'

const right = ref(`<ChildPage/>`)
const wrong = ref(`<child-page/>`)

const childPage = ref(null) // If I delete it, they both can show.
</script>
<style></style>