vue3如何使用watch监听props中的数据

const handleClick = () => {
  testStr.value += 'P'
}

watch(
  () => props.testStr,
  (newVal, oldVal) => {
    console.log('监听基本类型数据testStr')
    console.log('new', newVal)
    console.log('old', oldVal)
  }
)

watch(
   props.testStr,
  () => {
    console.log('监听基本类型数据testStr')
  }
)

const handleClick = () => {
  let name = 'lx'
  let age = 18
  dataList.value.push({
    name: (name += '~'),
    age: (age += 1)
  })
}

watch(props.dataList, (newVal, oldVal) => {
  console.log('监听引用类型数据dataList')
  console.log('new', newVal)
  console.log('old', oldVal)
})

const handleClick = () => {
  let name = 'lx'
  let age = 18
  dataList.value=[
  	{
    	name: (name += '~'),
    	age: (age += 1)
  	}
  ]
}

watch(
  () => props.dataList,
  (newVal, oldVal) => {
    console.log('监听引用类型数据dataList')
    console.log('new', newVal)
    console.log('old', oldVal)
  }
)

watch(
  () => props.dataList,
  () => {
    console.log('监听引用类型数据dataList')
    manageData()
    ... // 相应逻辑处理
  }
)

for(let item of res.data){
	dataList.value.push(item)
}

const dataListTest = computed(() => {
  manageData()
  return props.dataList
})

watchEffect(() => {
  manageData()
})