Seeking a way to watch for changes via setValue, since <Form onChange/> won't work

[mikestopcontinues]

Is your feature request related to a problem? Please describe.
My current app has a number of forms with duplicated logic, so I have a <CustomForm> element I use to handle the logic. One of the most important parts is that CustomForm handles watching for changes, then sends them to an iframe to make live updates.

This works great for user-initiated changes to form fields, but it fails when I need to use setValue, naturally because it doesn't trigger a change event. One example is a rich text field (using slate). Another is a drag-and-drop avatar uploader.

So I'm seeking some way to watch for all changes to the form data. watch() isn't a great solution because I need to know what field just changed, not just that the entire object changed. I would prefer not to do a deep equal for every character a user types, you know?

Describe the solution you'd like

Some ideas:

• Maybe setValue triggers a synthetic change event.
• Maybe watch() receives a callback function cb(name, value, ref).

Additional context
I've looked through the issues and discussion. It seems like this is a fairly common pain point. That said, I can definitely imagine I'm just missing an easy way to do this as is.

[bluebill1049]

Thanks for the feature request, putting it into the project board.

[bluebill1049]

V7 watch will support this.

watch((d) => {
  console.log('changed here', d)
})

[bluebill1049]

feel free to drop a comment here: #3714