Vueで孫コンポーネントのbootstrapが反映されない

Question

お世話になっております。

vueで、子コンポーネントまでは反映されているのは確認できているのですが、孫コンポーネントが反映されていなくて苦戦しております。

App.vue

<template>
  <div class="container">
    <wantGrid :wants="wants">
    </wantGrid>
  </div>
</template>

<script>
import WnatGrid from './components/WantGrid'
import NewWant from './components/NewWant'

export default {
  data () {
    return {
      wants:
        ['遊園地行きたい', 'たくさん食べたい','ご飯']
    }
  },
  methods:{

  },
  components:{
    wantGrid: WnatGrid,
    newWant: NewWant
  }

}
</script>

<style>
</style>

WantGrid.vue

<template>
    <div class="row">
            <app-want v-for='(want, index) in wants' :key='index'>
            {{want}}
            </app-want>
    </div>
</template>

<script>
import Want from './Want.vue';

export default {
    props:['wants'],
    componetns:{
        appWant: Want
    }
}
</script>

<style>

</style>

want.vue

<template>
    <div class="col-6">
        <div class="card">
            <div class="card-body">
                <slot></slot>
            </div>
        </div> 
    </div>
</template>

<script>
</script>

<style>
    .panel-body{
        font-size: 24px;
        color:aquamarine;
    }
</style>

index.htmlにて、cdn経由でbootstrap入れております。

containerやrowはブラウザで確認できるので、want.vueのみ反映されておりません。

エラ〜メッセージは、

[Vue warn]: Unknown custom element: <app-want> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

と出ております。

nameオプション、の使い方がドキュメントを見てもわかりません。

また、自分で考えて、ケバブケース、あたりがいけないのかとも考えたのですが、これも違いそうです。

どのように直せば、cardが反映されるのでしょうか。

お手数おかけしますが、アドバイスよろしくお願いいたいします。

Answer 1

WantGrid.vue

<script>
import Want from './Want.vue';

export default {
    props:['wants'],
    componetns:{
        appWant: Want
    }
}
</script>

componetnsではなくcomponentsですね(スペルミスでは？)

Comments

[masaking]

反映されました....
今まで僕がした中で、圧倒的な凡ミス及び駄質問でした。
1時間かけてこの間違いを見つけられなかったとかもう本当にあれですね。
ご指摘いただき、本当にありがとうございます。