动态异步自定义选择组件和Vue.js2

Question

我有一堆代码：

<service-type-select v-model="form.service_type_id.value"></service-type-select>

和我的自定义组件：

<template>
    <select @change="change" name="filter_service_type_id_eq">
        <option value="">Example</option>
        <option v-for="service_type in service_types" :value="service_type.id">
            {{ service_type.name }}
        </option>
    </select>
</template>

<script>
    export default {
        data: function() {
            return {
                service_types: [],
                url: '/servicetypes'
            }
        },
        model: {
            prop: 'value',
            event: 'change'
        },
        props: [ 'value' ],
        mounted() {
            this.setServiceTypes(this.url);
        },
        methods: {
            setServiceTypes: function(url) {
                axios.get(url).then(response => {
                    this.service_types = JSON.parse(response.data.content);
                });
            },
            change: function(event) {
                const select = event.target;
                this.$emit('change', select.options[select.selectedIndex].value);
            }
        }
    }
</script>

当我阅读文档时：vue docs我认为我可以v-model使用select change，因为root应该调用@change事件。来自doc的简单示例在我的情况下不起作用或者我做错了什么。我必须自动调用@change事件，而不是我需要的事情。有人可以解释一下吗？