Vue3 v-if cannot load lazy component

Question

The code are very simple. The about component can not be rendered.

<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 { defineComponent, ref } from "vue";
export default defineComponent({
  components: {
    about: () => import("@/views/About.vue")
  },
  setup() {
    const sh = ref(false);
    return {
      sh
    };
  }
  // data: () => ({
  //   sh: false
  // })
});
</script>

I tried it in vue2 project(JS+vue2.6.11), it worked fine just like always.

Is it a bug or I got something wrong? Thank you.

Answer 1

YES. however, the lazy component should be declared like this.

about: () => defineAsyncComponent(() => import("@/views/About.vue")) // wrong

<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 be declared here too
//const about = defineAsyncComponent(() => import("@/views/About.vue"));
export default defineComponent({
  components: {
    about: defineAsyncComponent(() => import("@/views/About.vue"))
  },
  data: () => ({ sh: false })
});
</script>

https://vuejsdevelopers.com/2020/07/13/vue-async-components-suspense/

Answer 2

<template>
 <div>
    <h1>O_o</h1>
    <component :is="name"/>
    <button @click="onClick">Click me !</button>
 </div>
</template>

<script>
import { defineAsyncComponent, defineComponent, ref, reactive, computed } from "vue"

export default defineComponent({
  name: 'HelloWorld',
    components: {           
      about: defineAsyncComponent(() => import("../views/About.vue")),
    },
    data: () => ({
      boardFields: [],
            sh: false
    }),
    setup () {
      const isShow = ref(false);
      const name = computed (() => isShow.value ? defineAsyncComponent(() => import("../views/AddPicture.vue")) : '')


      const onClick = () => {
          isShow.value = !isShow.value;
      }               
       
      return {          
          onClick,
          name,
          isShow
      }
  }
})
</script>