loading directive problem with displaying content

Question

I've created a a directive called v-loading

its duty is to show some spinner or some text like loading ... when calling API

for example if you put this directive on div element like this and pass it true value it will show a loading text

<div v-loading="loading">
   some content from Api
</div>

<script setup lang="ts">
   import {ref} from 'vue'
   const loading=ref(true)
</script>

the problem is that m the content will not be displayed after loading get false .

You can see working example here

directives/loading.ts

import Loading from '../components/loading.vue'
import { createApp, ref, inject } from 'vue'

const vLoadingSymbol = Symbol()

export function useIsLoading () {
  const isLoading = inject(vLoadingSymbol)
  if (!isLoading) {
    console.error('Has no isLoading provide!')
  }
  return isLoading
}

export default {
  beforeMount (el:any, binding:any) {
    // create VLoading component
    const vLoading = createApp(Loading)
    // use ref binding state
    const isLoading = ref(false)
    isLoading.value = binding.value
    // provide isLoading state for VLoading component
    vLoading.provide(vLoadingSymbol, isLoading)

    if (!['relative', 'absolute'].includes(el.style.position)) {
      el.style.position = 'relative'
    }

    // bind isLoading ref on el
    el.vLoading = isLoading

    vLoading.mount(el)
  },
  updated (el:any, binding:any) {
    el.vLoading.value = binding.value
  }
}

what's the problem , and How can I fix this ?