vue 子组件watch监听不到prop的解决

父组件日期区间选择框，子组件数据根据日期区间显示对应数据，

当日期区间改变后，子组件对应数据自动更新，尝试百度后好多几个最终才可解决

父子组件是单向数据流，父组件值改变时子组件可以拿到改变后的值，但通过watch监测不到变量的变化。所以一直无法更新

最终代码：

父组件代码

<template>
  <div>
    ddd
    <el-date-picker
      v-model="dates"
      type="daterange"
      align="left"
      format="yyyy-MM-dd"
      value-format="yyyy-MM-dd"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      :clearable="false"
      @blur="changeDate"
    />
    <sun ref="sun" :query-form="queryForm" />
  </div>
</template>
 
<script>
  import sun from '@/views/toutiao/briefing/components/sun'
  export default {
    name: 'Fater',
    components: {
      sun,
    },
    data() {
      return {
        dates: [],
        queryForm: {
          start_time: '',
          end_time: '',
          pageSize: 15,
        },
      }
    },
    watch: {
      dates(newValue, oldValue) {
        console.log(newValue, oldValue)
        if (newValue == null) {
          this.queryForm.start_time = this.convertToLateDate(-1)
          this.queryForm.end_time = this.convertToLateDate(-1)
        } else {
          this.queryForm.start_time = newValue[0]
          this.queryForm.end_time = newValue[1]
        }
      },
    },
    methods: {
      // 格式化时间，获取当前时间的指定的时间值
      convertToLateDate(day) {
        var data = new Date()
        var Da = new Date(data.getTime() + 24 * 60 * 60 * 1000 * day)
        // 以上两行代码为关键代码，若想要返回一天后的时间，则可以将第二行代码更换为下面代码
        // var Da = new Date(data.getTime() + 24 * 60 * 60 * 1000);
        // 若是想要返回值为当前时间，则上面两行代码可以直接修改为下面代码即可。
        // var Da = new Date()
        var y = Da.getFullYear()
        var m = Da.getMonth() + 1
        var d = Da.getDate()
        var H = Da.getHours()
        var mm = Da.getMinutes()
        m = m < 10 ? '0' + m : m
        d = d < 10 ? '0' + d : d
        H = H < 10 ? '0' + H : H
        // return y + '-' + m + '-' + d + ' ' + H + ':' + mm
        return y + '-' + m + '-' + d
      },
      changeDate() {
        console.log('aaaaaaaaa')
      },
    },
  }
</script>
 
<style scoped></style>

子组件代码：

<template>
  <div>子组件</div>
</template>
 
<script>
  import { get } from '@/api/common'
 
  export default {
    name: 'Sun',
    props: {
      queryForm: {
        type: Object,
        default: () => {},
      },
    },
    watch: {
      /*queryForm(value) {
        console.log('dddd')
        this.fetchData()
      },*/
      queryForm: {
        // 很重要！！！
        // immediate: true,
        deep: true,
        handler(val) {
          this.fetchData()
        },
      },
    },
    methods: {
      async fetchData() {
        console.log('调用了')
      },
    },
  }
</script>
 
<style scoped></style>