Vue.js Componentが読み込めず、表示できません

Question

前提・実現したいこと

vue3でshopcartのデモを試しています。vue.js3のhelloworldを書き換えています。
componentsのProductListの内容をhomeで読み込みたいのですがwarmがでます。
お力を貸していただけますと幸いです。

発生している問題・エラーメッセージ

[Vue warn]: Failed to resolve component: ProductList  
  at <Home onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > 
  at <RouterView> 
  at <App>

該当のソースコード

<template>
  <div class="home">
    <h1>shopping</h1>
    <hr />
    <h2>Products</h2>
    <product-list />
  </div>
</template>

<script>
import ProductList from '@/components/ProductList.vue'
export default {
  name: 'Home',
  Components: {
    ProductList,
  },
}
</script>

<template>
  <div class="hello">
    <ul>
      <li v-for="product in products" :key="product.id">
        {{ product.title }} - {{ product.price }}
      </li>
    </ul>
    <h1>test</h1>
  </div>
</template>

<script>
import shop from '@/api/shop.js'
export default {
  name: 'ProductList',
  date() {
    return {
      products: [],
    }
  },
  created() {
    shop.getProduct((products) => (this.products = products))
  },
}
</script>

試したこと

ProductList.vueの関数や記法が間違っていると考え、下記を追加しましたがこちらも同様のエラーが出ます

<template>
  <h1>aaa</h1>
</template>

<script>
export default {
  name: 'Foo',
}
</script>

補足情報（FW/ツールのバージョンなど）

Vue3.0 vue-router:4.0

Answer 1

コンポーネント化の際の書き方が間違ってる気がします。
警告文はProductListのテンプレートが未定義の名前を参照しているってことです。
Vue3を使用ですが、記法はVue2以前となっているようなので、

export default {
  name: 'Home',
  Components: {
    'product-list':ProductList,
  },
}

その際は、このようにテンプレートの定義を指示する必要があったはずです。

それと子コンポーネントの

export default {
  //name: 'ProductList', 

ここも不要だった気がします。

Answer 2

自己解決しました。大文字だとダメでした

  Components: {
    ProductList,
  },

 　components: {
    ProductList,
  },

あとスペルミスも原因でした

  date() {      //dateじゃなくてdata
    return {
      products: [],
    }