单击按钮时调用 Vue 方法

Question

我是 Vue 的新手，我一直在摆弄一个基本组件并尝试让一些交互性发挥作用。然而，当尝试实现某些方法时，我发现实际上什么也没有发生。我的代码如下所示：

var testComponent = Vue.component('testComponent', {
    data: function () {},
    props: [ 'maps' ],
    methods: {
        filt: function() {
            alert("Useful alert");
        }
    },
    template: "<div><button class='btn-primary' @click='filt'>Filter</button></div>"
});

var vm = new Vue({
    el: '#app',
    data: {},
    methods: {},
    computed: {},
    components: {
        TestComponent: testComponent
    },
    ready: function () {}
});

我的 HTML 基本上只包含以下内容：

<test-component></test-component>

我想调用 testComponent 的 filt 方法（该方法稍后有望成为地图道具的工作过滤器方法），但按钮在按下时不会发出警报。

我尝试过一些类似的变体v-on:click，但没有成功。任何帮助将不胜感激！