[Vuejs]-Why the CSS transition doesn't work in the new dom?

Transitions don’t work when elements are added to the DOM. They are reacting to CSS properties changing.

Try using animation instead.

@keyframes childScale {
  from {transform: scale(0, 0)}
  to {transform: scale(2, 2)}
}

.child {
  width: 100px;
  height: 150px;
  background-color: red;
  animation: childScale .3s ease-in-out;
}

To make CSS transition work, the dom must be available, without display:none set, and should have its initial pre-transition state value.