Different behavior between render function & template in Vue 3 Nested Router

Question

Using Vue 3 Nested Router, I setup a Structure like this:

root1
  └ Parent Route (router-view with Render Function)
      └ Child Route [FAIL TO RENDER]
root2
  └ Parent Route (router-view with Template)
      └ Child Route [FINE]

In my mind, these two ways are interchangeable, but the actual performance is different. What's the problem?

Furthermore, is

render() { return Vue.h("router-view") }

&

template: "<router-view></router-view>"

are really Completely the Same in Vue 3?

Here is the Example .

Answer 1

It should be :

  component: {
    render() {
      return Vue.h(VueRouter.RouterView) 
    }
  },

instead of :

render() { return Vue.h("router-view") }

custom components should be used with plain name in PascalCase format.