<div id="app">
  <button @click="toggle">click Me</button>
  <transition name="fade" mode="out-in">
     <p v-if="show" key="a">{{ message }}</p>
     <p v-else key="b">{{ message1 }}</p>
  </transition>
  
</div>
.fade-enter, .fade-leave-to {
  opacity: 0
}
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter-to, .fade-leave {
  opacity: 1
}
const myPlugin = {
  install: function(Vue, option) {
    Vue.mixin({
      methods: {
        toggle () {
          this.show = !this.show
        }
      }
    })
  }
}

Vue.use(myPlugin)
new Vue({
  el: '#app',
  data: {
    show: true,
    message: 'From Vue origin',
    message1: 'Leave Vue origin',
  }
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.js