Vue event handler on dynamically inserted string does not work

Other solution using Vue components (codepen):

<script src="https://unpkg.com/vue"></script>
<div id="app">      
  <div id="someId"></div> <button v-on:click="replace">Click Me to replace div contents</button>
  <component :is="currentView"></component>
</div>

<script>
let app = new Vue({
  el: '#app',
  data: {
    currentView: null   
  },
  methods:{
    replace: function(){
      var templateFromServer = getTemplate();
       var comp=Vue.component('template-from-server', {
          template: templateFromServer,
          methods:{
            clickMe:function (){
              console.log("click");
            }            
          }
        });   
      this.currentView = comp;
    }   
  }
});

function getTemplate(){
  return "<a href v-on:click.prevent='clickMe'>Click Me</a>"
}
</script>

Since v-html isn't compiled you will have to create a mini component like this to get around the issue:

new Vue({
  el: '#app',
  data () {
    return {
      data: ``
    }
  },
  
  computed: {
    compiledData () {
      return {
      	template: `<p>${this.data}</p>`
      }
    }
  },
  
  methods: {
    replace () {
       this.data = `Now click on me <a href='#' @click.prevent='alert("yo")'> here </a>`
    }
  }
})

<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>


<div id="app">
  <component :is="compiledData" ></component>
  <button v-on:click="replace">Click Me to replace div contents</button>
</div>

The above code compiles the string content and thus you can run/execute the function as intended