this.$parent.attribute is a undefined problem in vue
vue2.9.6

<template>
<el-container>
  <h1>{{say}}</h1><br>
  <button @click="changeChild">changeChild</button>
  <child-component ref="child"></child-component>
</el-container>
</template>

<script>
export default {
  data () {
    return {
      say: "I"m parent."
    }
  },
  methods: {
    changeChild () {
    
      //
      this.$refs.child.say = new Date().getTime()
    }
  },
  components: {
    "child-component": {
      data () { return { say: "I"m child." } },
      template: "<div><h1>{{say}}</h1><button @click="changeParent">changeParent</button></div>",
      methods: {
        changeParent () {
        
          //undefinedsay
          console.info(this.$parent.say)
        }
      }
    }
  }
}
</script>

I call this.$parent.say in the subcomponent always undefined, I print out that there is no say attribute in $parent, which is very strange.
all the usages I see on the Internet are used in this way. Why is there nothing wrong with other people"s? Is there something I lack? Or is there something wrong with my usage?
solve, thank you!