Vue3中子组件watch监听props传的值，无法触发监听

父组件：

<template>
<Popup  :flag="flag" @changeFlag="changeFlag"/>
</template>

<script setup>
import {ref} from 'vue';
import Popup from './Popup.vue';
const flag = ref(false)
function changeFlag(){
    flag.value = false
}
</script>

子组件： 

<template>
  <button @click="showPop">
</template>

<script setup>
import {ref, defineProps, defineEmits, watch} from "vue";
const emit = defineEmits(['changeFlag']);
const props = defineProps({
  flag:{
    type:Boolean
  }
});
watch(() => props.flag, (newValue, oldValue) => {
  console.log('flag 变化了', newValue, oldValue);
},{
  deep:true,
});
function showPop() {
  emit('changeFlag');
}
</script>

当点击子组件button时，控制台没有打印任何内容。

原因：

function changeFlag(){
    flag.value = false
}

并没有修改flag的值，依然是false，无法触发监听.。

修改为

function changeFlag(){
    flag.value = !flag.value
}

每次点击button，flag的值在false和true之间变化，子组件的watch就能监听到