[Vuejs]-Am I missing something for vue router transitions?

Something defines the .fade-enter and .fade-appear classes. You can see this happening if you have a link that calls the debugger after one tick, and inspect the applied styling:

stopThings () {
  this.$router.push({
    name: 'Login'
  });

  this.$nextTick(() => {
    debugger;
  });
}

Because the initial state is incorrect, the transition does not do anything.

Rename your transition and your transition classes to literally anything else, e.g. myfade and your transition works as expected.

The transitions, as far as I can see from the code shared, looks fine. It could be that the transitions are happening outside of the view. During the transition, both elements are visible

here is an example of adding a wrapper with relative and absolute positionsing

<template>
  <div id="app">
    <router-link to="/">Go to home</router-link>
    <router-link to="Register">Go to register</router-link>
    <div class="content">
      <transition name="fade">
        <router-view></router-view>
      </transition>
    </div>
  </div>
</template>

<script>
export default {
  name: "App"
};
</script>

<style scoped>
.content {
  position: relative;
}
.content > * {
  position: absolute;
  top: 0;
  left: 0;
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>