VueJS | Анимация исчезновения компонента в хуке beforeDestroy

Vue.component('fade-component', {
	template: `<div class="fade-component" ref="container"></div>`,
	mounted() {
		gsap.fromTo(this.$refs.container, {
			autoAlpha: 0
		}, {
			autoAlpha: 1,
			duration: 0.5
		});
	},
	beforeDestroy() {
		// Не работает
		gsap.to(this.$refs.container, {
			autoAlpha: 0
		});
	}
});

new Vue({
	el: "#app",
	data: {
		show: true
	},
	methods: {
		toggleShow() {
			this.show = !this.show;
		}
	}
})

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

button {
	margin-bottom: 20px;
	border-radius: 4px;
	background-color: #e74c3c;
	border: 0;
	color: #fff;
	font-size: 20px;
	padding: 10px 20px;
	outline: none;
	box-shadow: 0 0 0 0 rgba(52, 152, 219, 0.5);
	transition: box-shadow .1s;
	cursor: pointer;
}

button:active, button:focus {
	box-shadow: 0 0 0 5px rgba(52, 152, 219, 0.5);
}

.fade-component {
	width: 300px;
	height: 300px;
	background-color: #34495e;
	border-radius: 4px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
	<button @click="toggleShow">Toggle</button>
	<fade-component v-if="show" />
</div>