Can the built-in "Component" component be used in a render function? - vue.js

Question

Is it possible to use the <component> component in a render function? I am getting the following error trying to use it:
Unknown custom element: <component> - did you register the component
correctly? For recursive components, make sure to provide the "name"
option.
Both <component> and <transition> are listed as Built-In Components and I have successfully used <transition> within a render function, but I am getting the error above when using <component>.
I wanted to use the <component> component since it allows you to work with the <transition> element so painlessly.
This works:
const app = new Vue({
el: "#app",
data() {
return {
cmp: "foo"
}
},
created() {
setInterval(() => this.cmp = (this.cmp === "foo" ? "bar" : "foo"), 2000);
},
components: {
foo: {
template: "<div>foo</div>"
},
bar: {
template: "<div>bar</div>"
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<component :is="cmp"></component>
</div>
This does not:
const app = new Vue({
el: "#app",
data() {
return {
cmp: "foo"
}
},
created() {
setInterval(() => this.cmp = (this.cmp === "foo" ? "bar" : "foo"), 2000);
},
components: {
foo: {
template: "<div>foo</div>"
},
bar: {
template: "<div>bar</div>"
}
},
render(h) {
return h("div", [
h("component", {
props: {
is: this.cmp
}
})
]);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app"></div>

Answer 1

Actually, the ease of <transition> use is not predicated on the use of <component>. If you want to set up a transition between components in a render function, you just need to change the element that you return under the transition. See the example below.
I have a feeling that I was overthinking what the <component> actually is. The Vue API likely considers everything defined through Vue.component() or Vue({components: {}) "components". Considering that, there is no reason to outright use <component> within a render function.
const app = new Vue({
el: "#app",
data() {
return {
cmp: "foo"
}
},
created() {
setInterval(() => this.cmp = (this.cmp === "foo" ? "bar" : "foo"), 2000);
},
components: {
foo: {
template: "<div>foo</div>"
},
bar: {
template: "<div>bar</div>"
}
},
render(h) {
return h("div", [
h("transition", {
props: {
appear: true,
name: "fade",
mode: "out-in"
}
}, [h(this.cmp)])
]);
}
});
.fade-enter-active,
.fade-leave-active {
transition: opacity 500ms ease;
}
.fade-enter,
.fade-leave-to {
opacity: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app"></div>