Invalid value passed by vue parent component to child component through props

Boss, I am a novice. When learning vue components, the child component wants to get the value of the parent component through the props attribute, but it doesn"t work. Can the bosses point out where it is always? thank you very much! The vue version is 2.9.6.

Sub-component code

<template>
  <div>{{msg}}</div>
</template>

<script>
export default {
  props: ["msg"]
}
</script>

<style scoped>

</style>

parent component code

<template>
  <div class="hello">
    <Demo></Demo>
  </div>
</template>

<script>
import Demo from "./Demo.vue"

export default {
  name: "HelloWorld",
  data () {
    return {
      msg: "Welcome to Your Vue.js App"
    }
  },
  components: {
    Demo
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
Jul.29,2021

 <Demo :msg="msg"></Demo>
Menu