New vue component instance when prop changes

Question

Our single page application has different views based on components. Due to the one-way-dataflow each property in the child gets updated when the respective value bound in the parent changes.

Is it possible to get a completely new component instance in case a property has changed? In combination with a transition I want to achieve that the old component slides out while the new one based on the latest property values slides in.

I am really looking forward for some cool input.

Answer 1

You can do it by updating the key:

<transition name="fade">
  <hello :key="key"></hello>
</transition>

Then update the key:

<button @click="key++">Reload</button>

See my example fiddle:

https://jsfiddle.net/eaguad1337/w9fb1pv2/