Version

3.0.4

Reproduction link

https://jsbin.com

Steps to reproduce

<a-directory-tree
                    v-if="treeData"
                    :treeData="treeData"
                    :replaceFields="{
                        children:'children',
                        title:'name',
                        key:'id'
                    }"
                    default-expand-all @select="onSelect" @expand="onExpand">
                </a-directory-tree>

返回数据前treeData为布尔值，利用计算属性处理为数组整个页面无法渲染

What is expected?

异步后台数据返回后渲染组件（v-if）

What is actually happening?

加上v-if判断组件无法渲染

Read and follow https://new-issue.vuejs.org/?repo=vuejs/vue-next&lang=zh-cn#why-repro And open issues in English

You should use defineAsyncComponent() declared lazy component.

<template>
  <div id="nav">
    <button @click="sh = !sh">{{ sh }}</button>
    <p v-if="sh">v-if</p>
    <about v-if="sh" />
  </div>
</template>
<script lang="ts">
import { defineAsyncComponent, defineComponent } from "vue";
// lazy component can ne declared there too
//const about = defineAsyncComponent(() => import("@/views/About.vue"));
export default defineComponent({
  components: {
    about: defineAsyncComponent(() => import("@/views/About.vue"))
  },
  data: () => ({ sh: false })
});
</script>