页面中没有div b，为什么？

Question

<template>
    <div class="test">
        <template v-if="arr && arr.length">
            <div class="a">rendered in dom</div>
            <div class="b">
                <span>not render</span>
                <el-button>but this child component is created, we can see it in vue-devtool</el-button>
            </div>
        </template>
        <div class="c" v-else>test</div>
        <el-dialog append-to-body :modal="false" :visible="visible" @close="visible = false">1</el-dialog>
    </div>
</template>

<script>
export default {
    name: 'HelloWorld',
    data() {
        return {
            arr: [],
            visible: true
        };
    },
    mounted() {
        this.arr = [1, 2];
    }
};
</script>

有很多解决方案，例如： 添加键，更改不同的标签等等，但是为什么呢？

最重要的是，如果删除对话框，它可能会带有期望！