Why do I get a cross-origin error using vue3 watch?

Question

I have a web application built using vue3. If I have the following code:

// ranges.js
watch(user, u => {
  if (u.user) {
    runLoad();
  } else {
    unsub();
  }
});

... I get Uncaught (in promise) DOMException: Blocked a frame with origin "http://localhost:3000" from accessing a cross-origin frame.

If instead, I export those functions and explicitly call them when the user object changes, like this:

// users.js
export async function handleLogin(u) {
  user.user = u;
  runLoad();
}

export function handleLogout() {
  user.user = null;
  unsub()
}

... it works without the error. What's going on? How do I fix this?