SOURCE

var vm = new Vue({
  el: '#app',
  data: {
    currentView: 'home'
  },
  components: {
    home: {
      template: '#home-template',
      activated: function(){
        alert('home activated')
      },
      deactivated: function(){
        alert('home deactivated')
      }
    },
    posts: {
      template: '<p>Welcome posts!</p>',
      activated: function(){
        alert('posts activated')
      },
      deactivated: function(){
        alert('posts deactivated')
      }
    },
    archive: {
      template: '<p>Welcome archive!</p>',
      activated: function(){
        alert('archive activated')
      },
      deactivated: function(){
        alert('archive deactivated')
      }
    }
  },
  methods: {
    change:function(){
      var cps = ['home', 'posts', 'archive']
      for(var i= 0 ;i< cps.length ;i++){
        if(this.currentView == cps[i]){
          if(i == cps.length-1){
            this.currentView = cps[0]
          } else {
            this.currentView = cps[i+1]
          }
        	break;
        }
      }
    }
  }
})

<div id="app">
  <div><button @click="change">click</button></div>
  <keep-alive include="a">
    <component :ref="currentView" v-bind:is="currentView"></component>
  </keep-alive>
</div>
<script type="text/x-template" id="home-template">
  <p>Welcome home!</p>
</script>

#app{
  position: absolute;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  max-width: 750px;
  text-align: center;
}