title: Why change data in beforeCreated/created/beforeMount can not trigger watch in VUE?
body: <p>Why change data in beforeCreated/created/beforeMount can not trigger watch in VUE?</p>
  
  <pre><code>&lt;template&gt;
    &lt;div&gt;
      &lt;titi :namer="parentName"&gt;&lt;/titi&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    components: {
      titi: {
        template: "&lt;h1&gt;{{namer}}&lt;/h1&gt;",
        props: ["namer"],
        watch: {
          namer: {
            immediate: false,
            handler(val, oldVal) {
              console.log("jackieyin", val);
            }
          }
        },
        mounted() {
          console.log("jackieyin", "mounted");
        }
      }
    },
    data: function() {
      return {
        parentName: "jackieyin"
      };
    },
    beforeCreate() {
      console.log(222);
      this.parentName = "sunwukong";
    },
    created() {
      this.parentName = "kewu";
    },
    beforeMount() {
      this.parentName = "tangseng";
    },
    mounted() {
      // var that = this;
      // this.parentName = "tyty";
      // setTimeout(() =&gt; {
      //   that.parentName = "shaseng";
      // }, 500);
    }
  };
  &lt;/script&gt;
  </code></pre>
  
  <p>I try to change data in these lifecycle, but can not trigger the child element props watch. You can try it here:
  <a href="https://codesandbox.io/s/vue-watch-inx4z" rel="nofollow noreferrer">https://codesandbox.io/s/vue-watch-inx4z</a></p>