"Multiple" root components could be allowed if v-if and v-else are used

[aphofstede]

Vue.js version

2.0.1

Reproduction Link

https://jsfiddle.net/alexman/h64y6bj1/1/

Steps to reproduce

Set up a standalone component with template:

<template>
    <div v-if="isComplex"><slot></slot></div>
    <button v-else><slot></slot></button>
</template>

And computed field:

  computed: {
    isComplex() {
            return false // true
        }
  }

What is Expected?

v-if with a v-else following it resolves to exactly 1 component, so I believe it could be allowed and not throw an error about a missing root component.
Making isComplex() return true in the example should display a div, and false would display a button.

What is actually happening?

Component template should contain exactly one root element:

<div v-if="isComplex"><slot></slot></div>
<button v-else><slot></slot></button>

[aphofstede]

My work-around for now:

<template>
    <component is="button-view"><slot></slot></component>
</template>

<script>
  export default {
    components: {
      'button-view': Vue.component('button-view', {
        render: function (createElement) {
          return createElement(
                  this.$parent.isComplex ? 'button' : 'div',
                  this.$slots.default
          )
        }
      })
    },
    computed: {
      isComplex() {
        return true // false
      }
    }
  }
</script>

Does that make sense?

[posva]

wasn't this added already @chrisvfritz ?
@aphofstede Using jsx would also work but it doesn't fit all use cases as well as template does.

[chrisvfritz]

I do distinctly remember adding this feature. I'll investigate, probably later today.