親コンポーネント内のボタン押下で、子コンポーネントのイベントを呼び出したい

Question

環境

• Vue 2.6.11
• Vue CLI 4.5.6
• Vuetify 2.3.15

質問内容

親コンポーネント内のボタン押下で、子コンポーネントのイベントを呼び出したいです。

以下のコード（一部抜粋）で、その処理を実現しようと思っておりました。

// 親コンポーネントのテンプレート
<template>
  <v-container>
    <TaskList ref="child">
      <template v-slot:del-btn>
        <v-btn @click="deleteTask">
          delete
        </v-btn>
      </template>
    </TaskList>
  </v-container>
</template>

// 親コンポーネントのscript
method: {
  deleteTask() {
    this.$refs.child.deleteTask();
  },
}

// 子（TaskList）コンポーネントのテンプレート
<template>
  <div>
    <slot name="del-btn"></slot>
  </div>
</template>

// 子（TaskList）コンポーネントのscript
method: {
  deleteTask() {
    // 省略
  }
}

上記コードで、以下のような処理を想定しておりました。

親にあるボタン押下
⇒親のscriptにあるdeleteTaskが呼び出される
⇒子のdeleteTaskが呼び出される

と思いきや、子のdeleteTaskメソッドが呼び出されません。
デベロッパーツールを確認したところ、

[Vue warn]: Property or method "deleteTask" is not defined on the instance but referenced during render.

と表示されており、WebStormを見ると、親コンポーネント側のdeleteTaskで、

Unresolved variable or type deleteTask

というエラーが表示されておりました。

slotを使っているためにこのような問題が起きているのか、それ以外に原因があるのか…
解決策が分からず困っております。

何かわかることがあれば、ご教示いただけると幸いです。
よろしくお願いいたします。

追記（2020/11/07時点）

vue.jsのSlotからScoped Slotまでを理解しようを参考に親と子のコンポーネントを修正。

// 子コンポーネント
<template>
  <div>
　 （…省略）
    <slot name="del-btn" :deleteAccount="deleteAccount"></slot>
  </div>
</template>

// 親コンポーネント
<template>
 <PWList>
　 （…省略）   
   <template v-slot:del-btn="{ deleteAccount }">
     <v-btn @click="deleteAccount" class="mr-4">
       delete
     </v-btn>
   </template>
 </PWList>
</template>

ただ、子コンポーネントの"deleteAccount"に波線が引かれており、

Unresolved variable or type deleteAccount 

というメッセージが表示されておりました。
何か追記し忘れがあるのでしょうか？

Answer 1

スペルミスでした…
methodではなく、methodsでした。