显示内容时的加载指令问题

问：

我创建了一个名为 v-loading 的指令

它的职责是显示一些微调器或一些文本，就像调用 API 时一样loading ...

例如，如果你像这样把这个指令放在 div 元素上并传递它值 它将显示一个加载文本true

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

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

问题是 m 内容加载后不会显示 get false 。

您可以在此处查看工作示例

指令/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
  }
}

有什么问题，我该如何解决这个问题？