$refsで子コンポーネントのメソッドにアクセスしたい


#1

以下のようなファイルを作成し、子コンポーネントのメソッドを実行したいのですが、未定義エラーが発生します。
色々試してみたのですが、原因がわからずここにたどり着きました。

[child-a]の中に[child-b]のコンポーネントを作成し、
[child-a]のボタンをクリックに[child-b]の[action_b()]を実行させたい。というのがやりたいことになります。

ご教授、解決策のほど、よろしくお願いします。

エラーメッセージ

Uncaught TypeError: Cannot read property ‘action_b’ of undefined

index.html

<!DOCTYPE html>
<html>
<head>
...
</head>
<body>
  <div id="app">
        <child-a></child-a>
  </div>
  
</body>
</html>

<script>
const app = new Vue
({
 el : "#app"
 ,components: {
    "child-a" : child_a
  }
})

const child_a =
{ 
  template: 
  `
  <div>
    <button @ckick="action_a">click</button>
    <child-b ref="child"></child-b>
  </div>
  `
  ,data()
  {
  }
  ,methods: 
  {
    action_a()
    {
       this.$refs.child.action_b();
    } 
  }
  ,components: {
    "child-b" : child_b
  }
}

const child_b =
{ 
  template: 
  `
  <div>
    <p>BBBBBBB</p>
  </div>
  `
  ,data()
  {
  }
  ,methods: 
  {
    action_b()
    {
       console.log("action_b","start!");
    } 
  }
}


</script>

記載した内容は、

app
└ child-a
└ child-b
というコンポーネントの配置後の実行時を記載していますが、

app
┝ child-a
└ child-b
という配置でも試した(タグやコンポーネントの記述位置を変更)のですが、同じエラーメッセージが出力されます。

よろしくお願いします。