vue中watch监听路由传来的参数变化

一个组件内写了个编程路由，通过交互触发

 this.$router.push({
          name: "Result",
          query: {
            // 发送搜索词给result
            title: this.inputVal,
          },

在接收参数的路由组件中watch内

 watch: {
    // 监视搜索词变化
    "$route.query.title": {
      immediate: true,
      handler() {
        this.search();
      },
    },
  },

这样直接监视传来的参数有效

如果用data接收参数，在监视就没效
在data内

 data() {
    return {
      searchVal:this.$route.query.title,
      }
   }
   
 watch: {
    // 监视搜索词变化
    searchVal: {
      immediate: true,
      deep: true,
      handler() {
        console.log("a");
        this.search();
      },
    },
  },

深度监视也无效