SOURCE

var app = new Vue({
  el: '#app',
  data() {
    return {
      myArray: [{id:1, name: 'aa'}],
      myArray2: [],
       view: 'v-a'
    }
  }, 
   components: {
    'v-a': {
      template: '<div>Component A</div>'
    },
    'v-b': {
      template: '<div>Component B</div>'
    }
  },
  methods: {
      isChange(isView){
         switch(isView){
           case 'v-a':
               this.view = 'v-b';
               break;
            case 'v-b':
               this.view = 'v-a';   
               break;  
         }
         
        }
  }
});

<div id="app">
 <button @click="isChange(view)">
    动态组件{{view}}
</button>
<transition name="component-fade" mode="out-in">
  <component v-bind:is="view"></component>
</transition>
</div>

.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;
}