Can I mutate $state within a callback?

[matthewmullin01]

Svelte 5 + Sveltekit 2

Here is a minimal reproducible example: Svelte REPL

<script>
  class Counter {
    count = $state(0);

    constructor() {
      setInterval(() => {
        this.count = Math.floor(Math.random() * 100);
        console.log('[CLASS]', this.count);
      }, 2000);
    }
  }

  let { count } = new Counter();

  function logCount() {
    console.log('[COMPONENT]', count);
  }
</script>

<button onclick={logCount}> Log Count </button>
<br /><br />
<div>Count: {count}</div>

In this example I'm trying to update state within a setInterval. Notice that the count value updated inside the setInterval is not propagating to the component.

For more context: My actual use case is tying page store data to some custom class state. Ideally this can be done with $derived states once SvelteKit expose stores as runes, but currently I'm doing this within page.subscribe callbacks.

Is there a clean~ish workaround in the mean time?

[ryanatkn]

The issue is destructuring in let { count } = new Counter();, changing it to let counter = new Counter(); and then using counter.count works as expected.