vue transition mode=”out-in” returns a ref element as undefined

So this is an issue when mode="out-in" is applied as in <transition mode="out-in"> a ref‘d element returned undefined during the updated lifecycle. However, without the mode="out-in" it works as expected.

How can I resolve this?

https://codesandbox.io/s/mjy8jr4148

Answer

Solved it by using using a transition hook, specifically after-enter

https://v2.vuejs.org/v2/guide/transitions.html#JavaScript-Hooks