div隐藏时，vue上的转换无法正常工作

我有一个简单的转换来切换div文本，但是只有当文本被隐藏时，转换才有效，但是当我点击显示文本时，转换在这里不起作用，这是我的代码：

<template>
<div>
<transition name="fade">
<div v-if="this.showName">My name is Simon</div>
</transition>
<button @click="showName = !showName">Toggle</button>
</div>
</template>
<script>
export default {
data(){
return {
showName: false,
}
},
name: "StatusComponent"
}
</script>
<style scoped>
.fade-enter-from{
opacity: 0;
}
.fade-enter-to{
opacity: 1;
}
.fade-enter-active{
transition: all 2s ease;
}
.fade-leave-from{
opacity: 1;
}
.fade-leave-to{
opacity: 0;
}
.fade-leave-active{
transition: all 2s ease;
}
</style>