关于下拉列表选择事件

Vue代码如下：

<template>

<div class="panel-body">
    <div class="container">
        <div>
                <div class="form-group">
                    <label for="name">选择角色：</label>
                    <select>
                        <option v-for="r in roles">
                            <a v-on:click="clickRole(r.id)">{r.role}</a>
                        </option>
                    </select>
                </div>

        </div>
    </div>
    <a v-for="role in roles" v-on:click="clickRole(role.id)">{role.role}</a>
</div>

</template>

<script>

var data = {
    roles: [],
}
export default {
    data() {
        return data;
    },
    methods: {
        clickRole(id) {
            console.log(id)
        }
    },
    mounted() {
        axios.get('/roles/all').then(function (response) {
            data.roles = response.data
        })
    }
}

</script>

在下拉列表中的clickRole()方法不生效，在其他的a标签中生效。请问如何在列表中的clickRole()方法生效。谢谢！