Very Basic, Ref doesn't react to property change as expected

[mordini]

Hello! This is embarrassingly basic, but the struggle is getting to me, something in the fundamentals of reactivity I'm missing...
Been searching for a solution for two days now.

App.vue

1. I have a property I wish to track changes to and update DOM accordingly.

Tone.Transport.position

2. It's a timer from Tone.js. When you click "Start, it runs.
   Tone.Transport.position

3. It doesn't appear as though my ref is reactive, as if it's not monitoring changes to the property. (which is probably isn't)
   I know it's updating in the back, and set the value on it manually with a button just to verify.
   I expected it to update DOM and display timer real-time.

<div>Position Ref: {{ transportPosition }}</div>
const transportPosition = ref(Tone.Transport.position);

My understanding was pointing a ref to some property creates a reactive variable that tracks when the argument is changed, and then updates automatically. Is there something I'm missing in the fundamentals? I've poured over the documentation, tried watchers which ofc don't work because it's not reactive.

What am I doing wrong? I feel like I ran into this before and resolved by returning the var, but that was in Pinia.

Vue Essentials, Reactivity Fundamentals

Thanks in advance, as I'm losing my mind!

[LinusBorg]

There are several aspects form why this won't work.

Disclaimer: Before I go into them, I'll just say that the recommendation is to not use complex 3rd party objects (like i.e. Tone.Transport) as reactive data. complex classes like this one have to many ways in which they cn change their internal state that bypasses reactivity's change detection. Vue's recommendation is to use plain objects for reactive state only.

With that out of the way, here's why your code does not work - it's fundamentaly a misunderstanding about Javascript foremost:

You are severing the connection between the property Tone.Transport.position and the initial value of it that you pass to ref(). Here's your code, slightly re-written:

const position = Tone.Transport.position
const transportPosition = ref(position);

Question: what will happen to the position variable when Tone.Transport.position changes?
Anwser: Nothing. it will still be the initial value.

The same goes for the ref you created. it will contnue to hold the initial position as its value.

Now you could try and create a reactive proxy for the Transport, but that's not recommended for the reasons mentioned in my initial disclaimer. Rather, use Tone's callback API to get the position and write it to a ref, like this:

const position = ref()
// https://tonejs.github.io/docs/14.7.77/Transport#scheduleRepeat
Tone.Transport.scheduleRepeat((time) => {
  position.value = time // or use Tone.Transport.position if you need to, I'm not familiar with that library
}, "8n")

[mordini]

THANK YOU! This helps very much in multiple ways, knew there was some fundamental nonsense going on.

so it's not problematic/non-performant to use a scheduler like setInterval to refresh the reference?

I ended up using setInterval to refresh it when turned on and cleared when turned off pending feedback, and I'll check scheduleRepeat to see if it resolves any timing issues that might take place that's Tone-specific (though for just REF refreshes, setInterval should be fine)

Duly noted on the disclaimer. That was also a concern, since Tone.Transport did have a lot of under-the-hood modifications going on, it seemed it would cause issues. I thought if I pointed just at the position property it would simply "watch" that one point of interest. I'll keep that in mind moving forward.

// INTERVAL FOR REFRESHING DOM
let refreshTransportRefInterval = setInterval(refreshTransportPosition, 1);

// STOP THAT INTERVAL FROM FIRING
clearInterval(refreshTransportRefInterval);

/** Refresh the Transport Position text for the DOM */
function refreshTransportPosition() {
  transportPosition.value = Tone.Transport.position;
}