The problem is that you are using v-if on component's root element inside its template.
Since the component itself is destroyed when v-if goes to false, its show() function cannot be called.
Related issue: #3455

I guess vue should prohibit using v-if on component's root element..

Unfortunately, using v-if on an element other than the root element still doesn't work. See: http://codepen.io/analog-nico/pen/mEkraL

Using $refs for this won't work, as explained by @fnlctrl due to issue #3455, but I would say this is not a recommended pattern anyway.

I would rather:
a) pass a is-shown prop to the component, (https://jsfiddle.net/Linusborg/rwa5cfdm/) or
b) use v-if on the component itself (https://jsfiddle.net/Linusborg/rwa5cfdm/1/)

if the popup component will have its own controls, i.e. a close button, $emit() an event from it and let the parent listen with @event="handler" on the component - then the parent can change the state value.

This has several advantages:

• the parent knows about weither or not the popup is shown
• We don't need to use tight coupling to the child components via $ref in you JS code.
• the parent stays in control of when to actually show and hide the popup.

Closing this because #3455 takes care of this.

@LinusBorg The reproduction is already using rc.3, which was supposed to fix #3455 (release notes https://github.com/vuejs/vue/releases/tag/v2.0.0-rc.3), so I guess there's still some edge case not covered.

wait, isn't it invalid component, as v-if version will have no root element when isShown is false? From what I know, a component should resolve to a root instance(or a fragment instance), but in this case there is not even a single element when isShown is false.

@prog-rajkamal That is a valid point which @fnlctrl also mentioned in his first response. However, the bug still occurs if I move v-if to a child div. See my updated codepen.