Vue コンポーネント自体にクリックイベントをつける方法

Zenn 初投稿です！

コンポーネント自体にクリックイベントを付与したかった

タイトル通り、Vue コンポーネント自体にクリックイベントを付与したかったですが、思うようにいかず、ドハマリ。。
Vue.js では、下記のような方法でコンポーネントにイベントを付与しても function は実行されない様子。

<Component @click="function">button</Component>

解決方法

Vue コンポーネント自体にクリックイベントを仕込みたいときは、以下のように書くと OK でした。
肝は click の後ろの.nativeです。
.nativeがなければクリックイベントは発火しません。

<Component @click.native="function">button</Component>

参考

公式による解説は↓にありました。
> コンポーネントにネイティブイベントをバインディング

また、公式でも触れている通り、ちゃんと実装するなら$listenersを使った方が良いとのこと。