VueJS #click not working in a foreach loop - php

Question

I'm using VueJS CDN in my PHP project.
I created a loop (foreach) which fetches records and displays them in a table. I would like to load up a modal when I click on a button inside the table but it's not working or giving me any error as to why it isn't working.
Taking the button outside the table/loop works fine and accesses the VueJS method.
var app_admin = new Vue({
el: '#orders',
data: {
},
mounted: function(){
},
methods: {
getOrderDetails( order_id, order_no ){
alert( order_id +' | '+ order_no );
},
}
});
<div class="page-content-inner is-webapp" id="orders" v-cloak>
<?php
$get_orders = $db_con->prepare("SELECT oid, order_no, rider, created_at, status FROM ". ODS ." ORDER BY created_at DESC");
$get_orders->execute();
if ( $get_orders->rowCount() > 0 ){
?>
<div class="table-wrapper" data-simplebar>
<table id="empty-datatable" class="table is-datatable is-hoverable table-is-bordered">
<thead>
<tr>
<th>Order_No</th>
</tr>
</thead>
<tbody>
<?php
$rows = $get_orders->fetchAll();
foreach ( $rows as $row ){
?>
<tr>
<td>
<?php
if ( $row['status'] == 'Waiting' ){
?>
<button #click="getOrderDetails('show', <?=$row['oid'].', '.$row['order_no']; ?>)">Click</button>
<?php
}
?>
</td>
</tr>
<?php
}
?>
</tbody>
</table>
</div>
<div id="paging-first-datatable" class="pagination datatable-pagination">
<div class="datatable-info">
<span></span>
</div>
</div>
<?php
} else {
?>
<div class="col-12">
<div class="message is-primary">
<a class="delete"></a>
<div class="message-body">No Record Found!</div>
</div>
</div>
<?php
}
?>
<!-- PANEL -->
<?php
//include 'panels/Orders.All.OrderDetails.Panel.php'; // Order Details
?>
<!--// PANEL -->
</div>
The button doesn't access the getOrderDetails function while in the loop but taking it out works. What could I be doing wrong?