JSFiddle - React, Tailwind, and code Playground

HTML

<div id="app"></div>

JavaScript

Vue.component('iphone', {
	template: `<div>iphone</div>`,
  activated: function () {
    console.log('iphone activated')

  },
  deactivated: function () {
  	console.log('iphone deactivated')
  }
})

Vue.component('s7', {
  template: `<div>Samsung S7</div>`,
  activated: function () {
    console.log('s7 activate')
  },
  deactivated: function () {
  	console.log('s7 deactivated')
  }
})

new Vue({
  el: '#app',
  template: `
  	<div>
    	<button type="button" @click="change">Change Phone</button>
      <keep-alive>
        <component :is="mobile"></component>
      </keep-alive>
    </div>
  `,
  data: {
  	mobile: 'iphone'
  },
  methods: {
  	change: function () {
      this.mobile = this.mobile === 'iphone' ? 's7' : 'iphone'
    }
  }
})