点击按钮时调用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方法（该方法稍后有望成为maps prop的有效过滤器方法），但该按钮在按下该按钮时不会发出警告。

我尝试了一些类似v-on:click的变体，但无济于事。 任何帮助将不胜感激！