Id of item do not pass to the bootstarap modal in vue - vue.js

Question

I have this code that does not pass the id of the item of array to the bootstrap modal
I need help with this because it takes too much time.
<script>
export default {
data() {
return {
lists: [
{id: 1, name: "Name 1"},
{id: 2, name: "Name 2"},
{id: 3, name: "Name 3"},
{id: 4, name: "Name 4"}
],
delete_id: null
}
},
methods: {
passId(id){
this.delete_id = id;
},
postDelete() {
// this part return null
console.log(this.delete_id)
}
}
}
</script>
<template>
<div>
<!-- delete card item -->
<div class="modal fade" id="delete_todo_item" tabindex="-1" user="dialog" aria-labelledby="exampleModalCenterTitle"aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" user="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" >delete</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div style="margin: 0 auto;" class="text-center">
<h2 style="font-size: 15px;color: red;">sure_to_delete</h2>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">close
</button>
<button class="btn btn-primary" data-dismiss="modal" #click="postDelete()">delete
</button>
</div>
</div>
</div>
</div>
<div v-for="item in lists" :key="item.id">
{{item.name}}
<i class="la la-trash" href="#delete_todo_item" data-toggle="modal" #click="passId(item.id)"></i>
</div>
</div>
</template>
The issue is when I click on the delete button of the modal I return null in console.
My version of vue is 2.6.1.
I need to know if there is an issue. I really can't understand what is going wrong.