There is no div b in page dom, why?

<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>

There are many solutions for this, e.g: add key, change a different tag, and so on, but why ?

Most important, if delete the dialog, it could run with expectations!