append div with additional functon

Question

I have an odd task. I am simply trying to add an additonal function on an element when its clicked. I cant seem to trigger the addScroll function that is found within my methods. As you can see, the div should be appended to the screen when the button is clicked. Once that div is clicked as well, the remove method is applied and I also want to apply the addScrollBack().

new Vue({
  el: "#app",
  data: {
    chocs: [
      { text: "Learn JavaScript", done: false },
      { text: "Learn Vue", done: false },
      { text: "Play around in JSFiddle", done: true },
      { text: "Build something awesome", done: true }
    ]
  },
  methods: {
  addScrollBack: function(){
  alert("test");
  },
handlePosterClick: function(choc){
alert("ckciked")

     window.top.$(".2l-body").css("overflow","hidden");
    
$("#cook").append(`<div style="background-color:blue;height:200px; width:300px" onclick="document.querySelector('#popover-div').remove();addScrollBack();>test</div>`);
   
   },
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div id="cook">

  </div>
  <button v-on:click="handlePosterClick(choc)">
        Book
        </button>
</div>

Answer 1

Not clear, but suggestion is use v-html instead of append

new Vue({
  el: "#app",
  data: {
    cook: "Old content OR blank",
    chocs: [
      { text: "Learn JavaScript", done: false },
      { text: "Learn Vue", done: false },
      { text: "Play around in JSFiddle", done: true },
      { text: "Build something awesome", done: true }
    ]
  },
  methods: {
  addScrollBack: function(){
  alert("test");
  },
handlePosterClick: function(choc){

//alert("ckciked " + choc)
// window.top.$(".2l-body").css("overflow","hidden");


// inline Scripting not recommanded,
 this.cook= `<div style="background-color:blue;height:200px; width:300px" >test</div>`;
   
   },
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div id="cook" v-html="cook">
    
  </div>
  <button v-on:click="handlePosterClick('choc')">
        Book
        </button>
</div>