Vue App.vueの<script>に記述したdataのプロパティが読み込めない理由

VueCLIで構築したサンプルプロジェクトから、すこし手を加えて
App.vueに以下の構文を追加して、マスタッシュ構文を追加しましたがエラーが発生します。
一方で、HelloWorid.vueに同様の構文を追加してもエラーは発生しません。

どちらも単一ファイルコンポーネント？だと思うのですが、どのような違いがありますでしょうか？

エラー

vue.runtime.esm.js?2b0e:619 [Vue warn]: Property or method "msg" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

found in

---> <App> at src/App.vue
       <Root>

App.vue

<template>
  <div id="app">
    <div id="nav">
       {{ msg }}
    </div>
    <router-view/>
  </div>
</template>

<script>

export default {
  name: 'app',
  date:function () {
    return {
      username: null,
      password: null,
      msg: 'AAA'
    }
  },
  computed:{
    
  }
}
</script>

*HelloWorld.vue

<template>
  <div class="hello">
    
    {{ msg1 }}
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data:function() {
    return {
      msg1:'A'
    }
  },
  props: {
    msg: String
  }
}
</script>