gc-global-ref.html

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<div id="app"></div>

<script>
  const { ref, computed, h } = Vue

  class HeavyObject {
    foo = 123
  }

  const someObjectRef = ref(null)

  const initSomeObject = () => {
    const someObject = new HeavyObject()
    someObjectRef.value = someObject
    cleanup.register(someObject, 'someObject')
    console.log('init object')
  }

  const cleanup = new FinalizationRegistry(key => {
    if (key === 'someObject') {
      console.log('someObject cleared')
    }
  })

  const Comp = {
    setup() {
      let someObjectComputed = computed(() => someObjectRef.value)

      const access = () => {
        console.log('access object', JSON.stringify(someObjectComputed.value))
      }

      const clear = () => {
        someObjectRef.value = null
        someObjectComputed = undefined
        console.log('someObjectRef was cleared')
      }

      initSomeObject()
      access()
      clear()

      return () => 'hi'
    }
  }

  const app = Vue.createApp({
    setup() {
      const show = ref(true)
      return () => [
        h('button', { onClick: () => (show.value = !show.value) }, 'toggle'),
        show.value ? h(Comp) : null
      ]
    }
  })

  app.mount('#app')
</script>

gc.html

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<div id="app"></div>

<script>
  const { ref, computed, h } = Vue

  class HeavyObject {
    foo = 123
  }

  const cleanup = new FinalizationRegistry(key => {
    if (key === 'someObject') {
      console.log('someObject cleared')
    }
  })

  const Comp = {
    setup() {
      let someObjectRef = ref(null)
      let someObjectComputed

      const access = () => {
        someObjectComputed = computed(() => someObjectRef.value)
        console.log(JSON.stringify(someObjectComputed.value))
      }

      const clear = () => {
        someObjectRef.value = null
        someObjectComputed = undefined
        console.log('someObjectRef was cleared')
      }

      const initSomeObject = () => {
        const someObject = new HeavyObject()
        someObjectRef.value = someObject
        cleanup.register(someObject, 'someObject')
      }
      initSomeObject()

      return () => {
        return h('div', [
        h(
            'button',
            {
              onClick: access
            },
            'access'
          ),
          h(
            'button',
            {
              onClick: clear
            },
            'clear'
          )
          // JSON.stringify(someObjectRef.value),
          // JSON.stringify(someObjectComputed.value)
        ])
      }
    }
  }

  const app = Vue.createApp({
    setup() {
      const show = ref(true)
      return () => [
        h('button', { onClick: () => (show.value = !show.value) }, 'toggle'),
        show.value ? h(Comp) : null
      ]
    }
  })

  app.mount('#app')
</script>