Cannot execute method when v-btn clicked with Vuetify - vue.js

Question

I can't execute method when clicking v-btn.
my template
<template>
<v-app>
<v-main>
<v-card class="mx-auto" max-width="500" tile>
<v-text-field
label="Main input"
hide-details="auto"
v-model="newTodo"
></v-text-field>
<v-list disabled>
<v-subheader>TODOS</v-subheader>
<v-list-item-group v-model="todos" color="primary">
<v-list-item v-for="todo in todos" v-bind:key="todo.id">
<v-list-item-content>
<v-list-item-title v-text="todo.text"></v-list-item-title>
</v-list-item-content>
<v-list-item-action>
<v-btn color="blue-grey" class="white--text" v-on:click="test">
<v-icon dark>mdi-delete</v-icon>
</v-btn>
</v-list-item-action>
</v-list-item>
</v-list-item-group>
</v-list>
</v-card>
</v-main>
</v-app>
</template>
my script
<script>
export default {
name: "app",
data: () => ({
todos: [],
newTodo: ""
}),
created() {
this.reload();
},
methods: {
reload() {
let vm = this;
const axios = require("axios").create({
baseURL: "http://localhost:5000",
headers: {
"Content-Type": "application/json"
},
responseType: "json"
});
axios
.get("/get_todos")
.then(function(response) {
// handle success
console.log(response);
vm.todos = response.data;
})
.catch(function(error) {
// handle error
console.log(error);
})
.finally(function() {
// always executed
});
},
test() {
console.log("test");
}
}
};
</script>
What I've tried
I replaced the "v-on:click" with "#click", "#onclick" and "#click.native" but failed to see "test" on the console.
Version of plugins
Vue: v2.6.12
Vuetify: v2.3.16

Answer 1

As Michal Levý said, I tried removing disabled from v-list. I succeeded to execute test method.