You can dynamically switch between components in a template by using the reserved <component> element and dynamically bind to its is attribute. By using <keep-alive> you can tell Vue to keep the component in memory.

 

In the

Because inside @Component({components: {}}) haven't register those component 'One, Two, Three', so then using 

'selectedComp' has to ben a real functional component. 

 

But If we have registered the components:

@Component({  components: {     One, Two, Three  }})

The the 'selectedComp' can be just component's name:

selectedComponent = 'One' | 'Two' | 'Three'

 

 

<keep-alive> Component: 

Components might have some state, you want to keep the state instead of losting it, you can use 'keep-alive' component: