Bind Vue click function on dynamically created content from jquery - development

Bind Vue click function on dynamically created content from jquery

First of all I am new to vuejs., currently working on a project made using Laravel. I am using Vue where ever I feel the need for it. On a certain page I am using datatable to load list of machine requests

$list = LicenceRequests::orderBy('allocated')->with('users.userDetails')->where('users_id', '!=', 1)->get();
    return Datatables::of($list)
      ->addColumn('actions', function ($list) {
          return '<button data-id="'.$list->id.'" class="btn btn-success" @click="allocateEvent">Allocate</button>';
      })
      ->addIndexColumn()
      ->rawColumns(['actions'])
      ->make(true);

I have added a click function so that When the datatable is rendered, a Vue function can be called. In the blade template, I am using the following html code :

  <div id="content" class="content">
    <div class="block">
        <div class="block-content">

            <table class="table table-bordered table-striped " id="requestList">
                <thead>
                    <tr>
                        <th>Sr. No</th>
                        <th class="hidden-xs" >Name</th>
                        <th class="hidden-xs" >Email</th>
                        <th class="hidden-xs" >Requests</th>
                        <th class="hidden-xs" >Allocated</th>
                        <th class="hidden-xs" >Date requested</th>
                        <th class="hidden-xs" >Machine address</th>
                        <th class="text-center">Actions</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
</div>?

For the datatable, I am calling it on the page load function as follows :

$(function (){
$('#requestList').dataTable({
    processing: false,
    serverSide: true,
    ajax: '{!! route('admin.getLicenceRequests') !!}',
    columns: [
    {data: 'DT_Row_Index', orderable: false, searchable: false},
    { data: 'users.user_details.name', name: 'name' },
    { data: 'users.email', name: 'email' },
    { data: 'number', name: 'number' },
    { data: 'allocated', name: 'allocated' },
    { data: 'request_generated_on', name: 'request_generated_on' },
    { data: 'machine_address', name: 'machine_address' },
    { data: 'actions', name: 'actions',orderable: false, searchable: false }

    ],
    lengthMenu: [[ 10, 15, 20], [ 10, 15, 20]]
});

});

I am initializing Vue on the same page

var vm = new Vue({
el: '#content',
methods: {
    allocateEvent: function() {
        console.log("hello");
    }
}

})

The problem is that the function is not called when I press the button on the rendered html of datatable. If I bind the function to any otehr element fn the page it will work. Is there something I am missing or some Vue related code that I am not adding?

P.S I know this is not how Vue should be used with laravel blade. I just wanted to know why the above code is not working when it should.
Thanks

from Laravel Questions and Answers https://laravelquestions.com/laravel/bind-vue-click-function-on-dynamically-created-content-from-jquery/
via Lzo Media