[Vuejs]-Vue.js Transitions and effects executing out of order

Your code runs as a block; the UI doesn’t repaint between your setting active and over, so they happen effectively at the same time as far as the UI is concerned. The over triggers the v-if binding, so the contents don’t get repainted, they just transition out.

Vue provides nextTick to allow you to sequence things. Like setTimeout(..., 0), it takes your command out of the block, but it ensures that a DOM update cycle has happened before executing.