Repeated inline-template within v-if is wrongfully reused

Vue.js version

2.0.6 (latest)

Reproduction Link

http://codepen.io/guidobouman/pen/qqajGr

Steps to reproduce

Repeat a conditional (v-if, not v-show) check with an inline-template component inside.

What is Expected?

When changing the value, the conditional check should display the right child component. Which in turn displays it’s own inline-template with the unique value.

What is actually happening?

The first time a value (for the v-if) is selected, the right inline-template is being used. When you change the value afterwards the inline-template from the first value is being re-used each time.

Additional info

When none of the conditional checks hit (by selecting the value 0), the state is reset. The next matching value that’s selected will display the correct value again.

So: As long as one of the conditional checks matches, the template is not being reset.

[yyx990803]

@guidobouman yep, we are working on it, thanks for the suggestion!

[LinusBorg]

key the dynamic components accordingly:

<div is="child" inline-template :key="value">

Unfortunately, the docs are not very clear on this currently, but this is expected behaviour.

As stated somewhere else, about switching between elements:

When toggling between elements that have the same tag name, you must tell Vue that they are distinct elements by giving them unique key attributes. Otherwise, Vue’s compiler will only replace the content of the element for efficiency.

https://vuejs.org/v2/guide/transitions.html#Transitioning-Between-Elements

It works similary for dynamic components.

@chrisvfritz Can you think of a better place in the docs to mention / expand on this?