Is it possible put in directives in v-html directive?

I'm making some web features. But i have one problem. I wanted to create several html structures that added vue directives with v-html, but I couldn't. So, How can i render vue directives with v-html?

Of course i know this can cause xss vulnerability, but i will filter any critical tags so i don't care.

please share your tips!!

---

1. I already use Vue.compile function. But, it supports only full build and this don't match with my case.

2. <button @click="go()">go</button> this is what i want to make using v-html. But @click directive is not rendered...

---

this is App.vue result

Imgur

But go button couldn't call go function.

---

App.vue

<template>
  <div id="app">
    <input type="text" v-model="name" />
    <p v-html="name"></p>
    <!-- Below tag is what i want to make using v-html -->
    <!-- <button @click="go()">gogo</button> -->
  </div>
</template>

<script>
// import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'app',
  data:function(){
    return {
      name:'',
    }
  },
  methods:{
    go(){
      alert('hi');
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>