Attempt to watch an element of a reactive object throws an error

[danyadev]

Version

3.0.0-alpha.10

Reproduction link

https://jsfiddle.net/qcom4adj/

Steps to reproduce

1. Create a reactive object (const state = reactive({ hasUsers: false }))
2. Start watching the key in this object (watch(state.hasUsers, () => { ... }))

What is expected?

Message in the console:
key 'hasUsers' has been changed!

What is actually happening?

Message in the console:
[Vue warn]: Unhandled error during execution of watcher getter
TypeError: fn is not a function

[posva]

You need to use a function because you are passing a raw value when reading state.hasUsers.

   watch(() => state.hasUsers, () => {
      	console.log('key \'hasUsers\' has been changed!');
      });

The only cases when you don't need to pass a function is when you pass a Ref (result of a computed, ref, or toRefs).

IMO we should yield a warning as this is very likely to bite many if not most people starting with the composition API

[yyx990803]

Closing but open to a PR to warn this case.