SOURCE

var vm = new Vue({
  el:'#demo',
  data:{
		currentView:'card1',
    dataObj:{
      title:"test",
  	pic:'http://pic27.nipic.com/20130310/10753400_163341518128_2.jpg',
      desc:"Some quick example text to build on the card title and make up the bulk of the card's content."
    }
  },
  methods:{
   	tab:function(v){
      this.currentView= 'card'+v
    } 
  },
  components:{
    card1:{
      template:`<div class="card">
          <div class="card-header">{{title}}</div>
          <img class="card-img-top" :src="pic" alt="Card image cap">
          <div class="card-body">
            <p class="card-text">{{desc}}</p>
          </div>
        </div>`,
        props:['title','pic','desc'],
    },
    card2:{
      template:'<p>tatadasfasdf</p>'
    },
        card3:{
      template:'<p>card 3</p>'
    }
  }
})

<div id="demo">
  <div class="btn-group d-flex justify-content-center">
    <button @click="tab(1)" class="btn btn-primary">tab1</button>
    <button @click="tab(2)"  class="btn btn-primary">tab2</button>
    <button @click="tab(3)"  class="btn btn-primary">tab3</button>
  </div>
  <keep-alive>
<transition  name="component-fade" mode="out-in">
<component :is="currentView" v-bind="dataObj"></component>
</transition>
  </keep-alive>

</div>

#demo{
  width:300px;
  margin:10px auto;
  border:1px #eee solid;
  background-color:#eee;
}

.component-fade-enter-active, .component-fade-leave-active {
  transition: opacity .3s ease;
}
.component-fade-enter, .component-fade-leave-to
/* .component-fade-leave-active for below version 2.1.8 */ {
  opacity: 0;
}