The transition element in Vue

Let's look at the previous example of CSS-only transitions, ported into Vue. In the following example, the first button is wrapped inside a custom component, while the second button is just the regular HTML button element. They still both share the same styles, as specified in the app's CSS:

<!-- HTML -->
<div id="app">
  <button>Hover me!</button>
  <custom-component></custom-component>
</div>

// JS
Vue.component('customComponent', {
  template: `
    <button>Hover me too!</button>
  `
});
new Vue({
  el: '#app'
});

/* CSS */
button {
  background-color: red;
  transition: background-color 4s;
}
button:hover {
  background-color: blue;
}
/* some additional styling */
* {
  border: none;
  color: white;
  padding: 10px;
  font-size: 18px;
  font-weight: 600;
}

The previous code can be found here: https://codepen.io/AjdinImsirovic/pen/vVYERO. As can be seen in the example, in this case, Vue does not diverge...