[Vuejs]-Vue Enter/Leave Transition doesn't seem to work well with Opacity

Transition classes are removed and the transition does not have a proper easing, you should add transition property to .square class.

.fade-enter,
.fade-leave-to {

  opacity: 0;

}

.fade-enter-to,
.fade-leave {

  opacity: .5;

}

.square {

  margin-top: 2rem;
  height: 10rem;
  width: 10rem;
  background-color: #000;
  transition: opacity .5s linear;

}