Version

3.0.4

Reproduction link

https://codesandbox.io/s/hungry-microservice-d4f6f?file=/src/App.vue

Steps to reproduce

export default defineComponent({
  name: 'App',
  setup() {
    const obj = {
      reason: '',
      sellChannel: [1, 2],
    }
    const toRefReason = toRef(obj, 'reason')
    const reasonRef = ref('')
    const toRefSellChannel = toRef(obj, 'sellChannel')
    const sellChannelRef = ref([1, 2])
    setTimeout(() => {
      toRefReason.value = 'toRefReason'
      reasonRef.value = 'reasonRef'
    }, 2000)
    watch([toRefReason, toRefSellChannel], ([reason, sellChannel]) => {
      debugger
    })
    watch([reasonRef, sellChannelRef], ([reason, sellChannel]) => {
      debugger
    })
  },
})

What is expected?

only one debugger fired

What is actually happening?

both of debugger fired

The TypeScript declaration of toRef just with object and its key

declare function toRef<T extends object, K extends keyof T>(object: T, key: K): Ref<T[K]>;
```

<!-- generated by vue-issues. DO NOT REMOVE -->

you should :

const obj = reactive({
  reason: '',
  sellChannel: [1, 2],
})

It needs to be a reactive source: https://v3.vuejs.org/api/refs-api.html#toref

Remember to use the forum or the Discord chat to ask questions!