Vueファイルの中でonclickイベントで関数を使いたい

Question

前提・実現したいこと

単一コンポーネントのvueファイルの中でonclickイベントで関数を発火させて使いたいです
@click等での実行は選択できません
なぜかというとApiで返される値（<div onclick="hoge('fuga')">クリック</div>のようなonclickイベントのhtml構文）をv-htmlでハンドリングしてDOM生成するのでこちらでは@click等の形に書き換えることができません...

該当のソースコード

- main.js -

import Vue from 'vue'
import App from './App'

new Vue({
  el: '#app',
  render: h => h(App)
})

- App.vue -

<template>
  <div id="app">
    <div onclick="hoge('fuga')">クリック</div>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {

    }
  }
}
</script>

試したこと

- App.vue -

<template>
  <div id="app">
    <div onclick="hoge('fuga')">クリック</div>
  </div>
</template>

<script>
function hoge(value){
  console.log(value)
}
export default {
  name: 'App',
  data() {
    return {

    }
  }
}
</script>

上記のように普通にscriptタグの中で書けば呼べると思いましたがnot definedとなってしまいます。
こちらはどのように書けばvueファイルの中でonclickを使い関数を呼べるのでしょうか？
お手数ですがご教示いただければ幸いです。よろしくお願いいたします。

Comments

[plasticgrammer]

イベントハンドラ（上記hoge関数）をmethodsに記載する方法では上手くいかないのでしょうか。

[span]

ご回答ありがとうございます。
onclickイベントではmethodsにアクセスできないのです
onclickでmethodsにアクセスする方法がありますでしょうか？
ご教示いただければ幸いです。

Answer 1

createdでwindowオブジェクトと紐づけるのはどうでしょうか。

<template>
  <div id="app">
    <div onclick="hoge('fuga')">クリック</div>
  </div>
</template>

<script>

export default {
  name: 'App',
  data() {
    return {

    }
  },
  created() {
    window.hoge = this.hoge;
  },
  methods: {
    function hoge(value){
      console.log(value)
    }
  }
}
</script>

Comments

[span]

なるほどcreatedでwindowオブジェクトに関数登録すればよかったのですね！
恥ずかしながらこの発想は出てきませんでした…ご教示ありがとうございました！

Answer 2

Answer 3

App.vue は以下のようにしてみましょう。
つまり、関数は外ではなく、methodsの中に書かなければなりません。

<template>
  <div id="app">
    <div onclick="hoge('fuga')">クリック</div>
  </div>
</template>

<script>

export default {
  name: 'App',
  data() {
    return {

    }
  },
  methods: {
    function hoge(value){
      console.log(value)
    }
  }
}
</script>

Comments

[span]

ご回答ありがとうございます
@clickを使うことができないのでmethodsをハンドリングする事ができないのです…