Vue

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.4/TweenLite.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.4/plugins/CSSPlugin.min.js"></script>
<div id="app">
  <parent v-show="showContainer"></parent>
  <button @click="showContainer = !showContainer">
    Toggle Container
  </button>
</div>

CSS

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

button {
  position: relative;
}

.Parent {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.Parent__inner {
  width: 100%;
  height: 100%;
  background-color: tomato;
}

.Child {
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  background-color: black;
}

Vue

// ISSUE:
// 1. Parent removes child component in its `outro` method
// 2. Child `outro` method never gets called

var Child = {
	template: `
		<transition
    	:css="false"
    	appear
      @appear="intro"
      @enter="intro"
      @leave="outro"
    >
			<div class="Child" v-show="showChild"></div>
    </transition>
  `,
  props: {
  	showChild: {
    	type: Boolean,
      default: true
    }
  },
  methods: {
  	intro: function(el, done) {
			TweenLite.fromTo(el, 0.5,
      	{ y: '100%' },
        { y: '0%', delay: 0.5, onComplete: done })
    },
    outro: function(el, done) {
    	// 2 <===
    	TweenLite.to(el, 0.5,
      	{ y: '100%', onComplete: done })
    },
  },
}

var Parent = {
	template: `
	  <transition
	      :css="false"
	      appear
	      @appear="intro"
	      @enter="intro"
	      @leave="outro"
	    >
	    <div class="Parent">
	        <div ref="inner" class="Parent__inner"></div>
	        <child :showChild="showChild"></child>
	      </div>
	    </transition>
	  `,
	  components: {
	    Child: Child,
	  },
  data() {
		return {
			showChild: true,
    }
  },
  methods: {
  	intro: function(el, done) {
			TweenLite.fromTo(this.$refs.inner, 0.5,
      	{ y: '100%' },
        { y: '0%', delay: 0.25, onComplete: done })
        this.showChild = true
    },
    outro: function(el, done) {
	    // 1 <=== 
      // Setting `showChild` to `false` should remove Child component
      // and trigger its `outro` method ¿?
    	this.showChild = false
    	TweenLite.to(this.$refs.inner, 0.5,
      	{ y: '100%', delay: 0.25, onComplete: done })
    },
  },
}

new Vue({
  el: '#app',
  data() {
		return {
    	showContainer: true,
    }
  },
	components: {
  	Parent: Parent,
  },
})