vue.jsの文字列にv-onを入れる

下記はvue.jsで文字列の中にv-on:clickをいれたものですが動作しません。
動作しない原理を教えてほしいのです。
文字列ではなく直接tableをhtmlにかけば？みたいな回答はご遠慮ください。
今回は文字列の中にv-onを入れるとなぜ動作しないかを知りたいのです。

javascript
1<!DOCTYPE html>
2<html>
3<head></head>
4<body>
5<div id="app">
6<div v-html="table"></div>
7</div>
8<script src="https://unpkg.com/vue@next"></script>
9<script>
10const appdata = {
11    data() {
12      return {
13        table: '<table><thead><tr><th v-on:click="onclick">head</td></th></thead><tbody><tr><td>tabletest</td></tr></tbody></table>'
14      }
15    },
16    methods:{
17        onclick() {
18            console.log("click")
19        }
20    }
21}
22Vue.createApp(appdata).mount('#app')    
23</script>
24</body>
25</html>

コードを下記のようにv-htmlではなくコンポーネントにしてみました。
上のテーブルはhtmlに直書きしたものです。下のテーブルがコンポーネントです。
直書きしたものはonclickが動作します。しかしコンポーネントにしたものは動作しません。
デバックモードでタグを見ると両方ともv-onの部分が消えています。ということはvueで読み込まれたということだと思いますがなぜ動作しないのでしょうか？

javascript
1<!DOCTYPE html>
2<html>
3<head></head>
4<body>
5<div id="app">
6<div>
7<vontest/>
8</div>
9<div>
10<table><thead><tr><th v-on:click="onclick">head2</td></th></thead><tbody><tr><td>tabletest2</td></tr></tbody></table>
11</div>
12</div>
13<script src="https://unpkg.com/vue@next"></script>
14<script>
15const appdata = {
16    methods:{
17        onclick() {
18            console.log("click")
19        }
20    }
21}
22
23let app = Vue.createApp(appdata)
24 
25app.component('vontest', {
26    template: `<table><thead><tr><th v-on:click="onclick">head</td></th></thead><tbody><tr><td>tabletest</td></tr></tbody></table>`
27})
28  
29app.mount('#app')  
30
31</script>
32</body>
33</html>

行動規範の内容に同意します

回答2件

ベストアンサー

コンポーネントインスタンスに紐づいたメソッドを参照してあげてください。

Vue.js

javascript
1const appdata = {
2    methods:{
3        onclick() {
4            console.log("click")
5        }
6    }
7}
8
9let app = Vue.createApp(appdata)
10 
11app.component('vontest', {
12    // ↓
13    methods: {
14        onclick() {
15            console.log('コンポーネントのクリックイベント')
16        }
17    },
18    // ↑
19    template: `<table><thead><tr><th v-on:click="onclick">head</td></th></thead><tbody><tr><td>tabletest</td></tr></tbody></table>`
20})