React to changes of vanilla-js Proxy?

I’m trying to write a framework-agnostic hook/composable that hold a bit of state in a vanilla javascript Proxy. I’m looking for a way to watch changes on that proxy from the consuming vue-component.

Here is a minimal example of the composable function:

export const usePython = () => {
  const initialState = {
    loading: true
  }

  const state = new Proxy(initialState, {
    get(obj, prop) {
      if (prop === 'raw') {
        return obj
      } else {
        return obj[prop]
      }
    }
  })

  const w = new Worker('src/composables/worker.js')
  w.onmessage = ({ data: { type, payload } }) => {
    switch (type) {
      case 'ready':
        state.loading = false
        break;
      default:
        break;
    }
  }
  return {
    state
  }
}

The function sets up a web-worker, recieves a message of type "ready" once the worker has initialized and then sets loading to false on the local state object proxy.

In the vue component i’ve got:

<script setup lang="ts">
import { usePython } from './composables/usePython'

const { run, state } = usePython()
</script>

<template>
  {{ state.loading}}
</template>

…But the component does not re-render on changes to state.loading.
I’ve also been trying with watch, watchEffect, computed and even to throw the state proxy to reactive like reactive(state) and reactive(state.raw). Doing this, the reactive object indeed has the loading-property set to false after a while, but it seems it doesn’t trigger any DOM-updates as the value is not set through the reactive-proxy.

I’m aware I could pass an onUpdate() callback to the hook and use it in the set() of the proxy handler - but it would then require to set up a duplicate state in the component and not really using the state of the hook, which doesn’t feel great :confused:

My question is: How can I make my vue component react to changes in a vanilla js Proxy?