vue中$refs获取子组件时产生的异常

Question

C 是一个通用弹窗组件，里面有初始化方法 init() 。
其中 A B 是两个不同组件，各自引用了 C 作为子组件。
在 A 组件中

......

<button @click='openComponent'>按钮</button>
<c v-if='showFlag' ref='c'></c>

......


methods: {
    openComponent(data) {
        this.showFlag = true;
        this.$nextTick(() => {
            this.$refs.c.init(data);
        })
    },
}

在这种情况下，点击按钮可以顺利打开组件 C ，并调用 C 中的初始化方法。

但是在 B 组件中

......

<button @click='openComponent'>按钮</button>
<c v-if='showFlag' ref='c'></c>

......


methods: {
    openComponent(data) {
        // B组件中在满足某种条件下才会打开组件C
        if (xxx) {
            this.showFlag = true;
            this.$nextTick(() => {
                this.$refs.c.init(data);
            })
        } else {
            ......
        }
    },
}

同样的方式在组件 B 中点击按钮，第一次点击时 this 中并不存在 C , C 弹窗组件没有按预想中出现， init() 方法自然也没法顺利调用。在第二次点击按钮时， this.$refs 中可以找到 C ，弹窗也顺利出现，并且成功将数据初始化。
之后在组件 B 中，我将

<c v-if='showFlag' ref='c'></c>

替换成了

<c v-show='showFlag' ref='c'></c>

在组件 B 中表现与组件 A 一致。
虽然问题得以解决，但是整个过程简直让人迷惑……
为什么在组件 B 中只是多了一个 if 判断，组件 C 就无法按预期找到。而修改成 v-show 后为什么表现又与预期一致……
乍一眼让我觉得 B 组件中是 this.$nextTick 没有生效，又是什么原因导致了这种情况的出现呢？

Answer 1

子组件也有个渲染过程，不在this.$nextTick返回之内，用了v-if如果要监听子组件的mounted需要hook子组件：<C @hook:mounted="childMounted"></C>