Dynamic component with pascalcase not working correctly

[donald-lendit]

Version

3.0.9

Reproduction link

https://codesandbox.io/s/summer-sun-dymh9?file=/src/App.vue

Steps to reproduce

<template>
  <button @click="hello = !hello">Toggle</button>
  <Component :is="component" /> // not work. If it change to <component />, it works
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";
import ByeWorld from "./components/ByeWorld.vue";
export default {
  name: "App",
  components: {
    HelloWorld,
    ByeWorld,
  },
  data() {
    return {
      hello: true,
    };
  },
  computed: {
    component() {
      return this.hello ? "HelloWorld" : "ByeWorld";
    },
  },
};
</script>

What is expected?

Component appear.

What is actually happening?

no error in console. and show nothing

[danyadev]

#1167

[KunHwanAhn]

interesting 🤔

at the following comment, only lowercase is allowed.
#1167 (comment)

But, PR #3508 make <Component> allowed.. 🤔

[HcySunYang]

That should be a misunderstanding, because Vue2 allows a capitalized version, so we should keep that behavior.

[HcySunYang]

And sorry to @danyadev for that

[KunHwanAhn]

So... does it means that this issue is not an issue?

Vue3 DO NOT allow Pascal Case, <Component>?

[KunHwanAhn]

That should be a misunderstanding, because Vue2 allows a capitalized version, so we should keep that behavior.

Ah, I understood, Vue3 allow <Component> case as well.

[yyx990803]

Yeah, I closed #1167 without checking Vue 2 behavior, which was a mistake.

Since uppercase <Component :is> does work in Vue 2, we are keeping it consistent in Vue 3.