title: Append Vue component with JQuery after mounting
body: <p>I am getting vue components from server like this:</p>
  
  <pre><code>Vue.component('events', function(resolve, reject){
      template: response.data
  })
  </code></pre>
  
  <p>where response.data is the html from the server</p>
  
  <p>Now i am using JQuerys Data Tables to display some data and i want to add a button in one of the columns that will be a vue-component and that will execute a method on click from the main component where the data table is initialized.</p>
  
  <p>However because i am building the Data tables from server, by the time i finish building the table, the main component is already mounted and the buttons v-on:click event doesn't work.</p>
  
  <p>I tried with several answers i've found on google about similar topic but couldn't solve it.</p>
  
  <p>Here's my code that i am using to fill the datatable:</p>
  
  <pre><code>mounted(){
      events = [];
      let self = this.$data;
      self.dataTable = $("#events-table").DataTable({});
      Request.call("event", "get", null, null, "GET", "JSON")
         .then(function(response){
             let evts = response.data.events;
             if(evts.length &gt; 0){
                evts.map(function(event){
                events.push(event);
             })
  
             let button = {
                props: ['text'],
                methods:{
                   testing(){
                       this.$emit('testing');
                   }
                },
                template: '&lt;button id="tester" v-on:click="testing"&gt;{{ text }}&lt;/button&gt;'
            };
  
            let btnComp = Vue.extend(button);
  
            let btn = new btnComp({
                propsData: {
                   text: 'kire'
                }
            }).$mount();
  
            events.map(function(event,index){
               self.dataTable.row.add([
                  event.Region,
                  event.Title,
                  event.ImageURL,
                  event.Link,
                  event.Description,
                  event.Type,
                  event.IsActive,
                  '&lt;div class="tester"&gt;&lt;/div&gt;'
               ]).draw(false);
             })
             $(".tester").append(btn.$el);
           }
        })
  },
  </code></pre>
  
  <p>I am new at Vue &amp; don't have pretty much experience at it, so every answer is appreciated.</p>