Vue TransitionGroup not working properly because of css transition

Question

After debugging for several hours I concluded that Vue does not work well with the CSS transition property.

The transition group: https://vuejs.org/guide/built-ins/transition-group

<TransitionGroup name="store" tag="div">
  <button v-for="item in store.items" :key="item">{{ item.name}}</button>
</TransitionGroup>

Vue3 transition classes: css-based-transitions

.store-move,
.store-enter-active,
.store-leave-active {
  transition:
    opacity 500ms ease,
    transform 500ms ease; // reference 1
}

.store-enter-from,
.store-leave-to {
  opacity: 0;
  transform: translateY(2rem);
}

.store-leave-active {
  position: absolute;
}

Relevant styles on the buttons (using scss):

button {
  display: block;
  transition: transform 150ms ease; // reference 2

  &:hover {
   transform: scale(1.2);
  }

  &:active {
    transform: scale(0.9);
  }
}

Option A: The transition group does not work at all unless you put !important on the vue transition class (reference 1). Option B: Comment out the transition on the button selector (reference 2).

In both scenarios the transition group does not work as expected because of the shared transform property on the transition.

Option C: When commenting out everything below reference 1 aswell, the transition group works perfectly.

I have not yet found any workaround to this problem.