在VueJS 2中将事件从父组件发送到子组件

Question

我有一个VueJS 2应用程序，我在其中将事件从父级发送到子级。

父级在子级组件内部存储的集合中添加一个集合记录。

parent.js：

    addResearchTopic() {
        axios.post(`/research-topic/add`, {
            title:      this.addTopicDialog.fields.title,
            init_url:   this.addTopicDialog.fields.init_url,
        })
        .then(r => {
            if(r.status == 200) {
                //emitting event to child component
                this.$emit('research-topic-add', r.data.topic);

                this.addTopicDialog.title       = '';
                this.addTopicDialog.init_url    = '';

                this.addTopicDialog.show = false;
            }
        }).
        catch(e => {
            if(e.response.data.errors) {
                this.addTopicDialog.errors = e.response.data.errors;
            }
        });
    }

但是子组件没有收到发出的事件。

<template @research-topic-add="addResearchTopic">
    ...component contents
</template>

<script>
    export default {
        data() {
            return {
                emptyTopics: []
            }
        },
        methods: {
            addResearchTopic(topic) {
                this.emptyTopics.push(Object.assign({}, topic));
            }
        }
    }
</script>

为什么子组件没有收到发出的事件？