vue.jsのdraggableの実装

前提・実現したいこと

Reffect様を参考にローカル環境(wamp)にてvue.jsでdraggableを実装しようとしています。

発生している問題・エラーメッセージ

dragstartイベントが発生しません。
該当のタグtrにはdraggable="true"と表示されておりますが、dragstartイベントの中にconsole.logをしかけても反応しません・・・

該当のソースコード

HTML
1<!doctype html>
2<html lang="ja">
3<head>
4<meta charset="UTF-8">
5<meta name="viewport" content="width=device-width, initial-scale=1.0">
6<title>drag_drop_table</title>
7<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
8<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
9<script type="text/javascript" src="js/axios.min.js" defer="defer"></script>
10<script type="text/javascript" src="js/drag_drop_table_test.js" defer="defer"></script></head><body>
11
12	<div id="app" class="container mt-5">
13	    <h1>{{ message }}</h1>
14	    <table class="table table-striped table-bordered">
15	        <thead>
16	          <tr class="thead-dark">
17	            <th>ID</th><th>NAME</th><th>EMAIL</th>
18	          </tr>
19	        </thead>
20	        <tbody>
21	          <tr draggable @dragstart="dragList($event, index)" is="tbldts-table" v-for="(tbldt,index) in tbldts" v-bind:tbldt="tbldt" v-bind:key="tbldt.id" v-bind:index="index"></tr>
22	        </tbody>
23	    </table>
24	</div>
25
26</body>
27</html>

JS
1Vue.component('tbldts-table',{
2    template : `<tr><td>{{ tbldt.id }}</td>
3                 <td>{{ tbldt.name }}</td>
4                 <td>{{ tbldt.email }}</td>
5                 </tr>`,
6    props : ['tbldt','index'],
7});
8
9const app = new Vue({
10
11    el: "#app",
12    data: {
13
14        message: 'HTML Drag&Drop in vue.js page',
15        tbldts : [],
16
17    },
18    mounted: function(){
19        axios.get("./db.php").then(response => this.tbldts = response.data);
20    },
21    methods:{
22  dragList(event, listIndex){
23    console.log(listIndex)
24  }
25}
26})