Vue: Cannot use locally registered component recursively

[thgh]

Vue.js version

1.0.17 & 1.0.18 as in https://github.com/vuejs-templates/webpack

Reproduction Link

https://github.com/thgh/vuejs-recursive-bug/blob/master/src/components/CompA.vue

Similar issue but with different console warning: https://jsfiddle.net/9o4qxd7t/21/

Steps to reproduce

1. Use a locally registered component recursively.

   What is Expected?

   A > B > A > B > A

   What is actually happening?

A > B > A

And console warning:
Attribute``":level" is ignored on component <comp-a> because the component is a fragment instance:

Same happens when doing A > B > A > B > ...

[posva]

Hello!

I'm getting a look at it. Next time, if you can directly provide a jsfiddle that would be perfect :100:

[posva]

I got it working here: https://jsfiddle.net/posva/ay8hz5fa/1/

Isn't that what you're trying to achieve?

[posva]

Oh, I forgot: for recursive components you should use the name option: http://vuejs.org/guide/components.html#Recursive-Component

[thgh]

Thank you for investigating. The name option solves the issue for A > A > A

But not for A > B > A > B
https://jsfiddle.net/9o4qxd7t/21/

Also note that this jsfiddle gives a different warning than the Reproduction link above.

[thgh]

Just switching the assignments changes the output.
https://jsfiddle.net/9o4qxd7t/22/

I don't think this is easily solvable, but that's ok because there is a work-around: declaring the component globally. Could be mentioned in docs?

[yyx990803]

The A > B > A > B case is not caused by Vue: your CompB variable declaration is hoisted, but the actual value is defined later, so when it was passed into CompA is was still undefined. Even with modules it's the same problem. This is more of a language/design issue imo...

A work around is to delay the binding for CompA in CompB by setting it manually in the created hook:

created () {
  this.$options.components['comp-a'] = Vue.extend(CompB)
}

https://jsfiddle.net/9o4qxd7t/23/