События кликов в нижнем столбце DevExtreme DxDataGrid не запускаются

У меня есть следующий код:

<template>
    <div>
        <DxDataGrid :dataSource="viewerRoles">
            <DxColumn data-field="name"
                      caption="Ansicht" />
            <DxColumn data-field="description"
                      caption="Beschreibung" />
            <DxColumn type="buttons">
                <DxButton icon="preferences"
                          @click="test" />
            </DxColumn>
        </DxDataGrid>
        <button @click="test"></button>
    </div>
</template>

<script>
    import { DxDataGrid, DxColumn, DxButton } from 'devextreme-vue/data-grid'

    export default {
        name: 'Test',
        components: {
            DxDataGrid, DxColumn, DxButton
        },
        data() {
            return {
                viewerRoles: []
            }
        },
        async created() {
            const svcResp = await this.$http.get('Settings/ViewerRoles');

            if (svcResp.status === 200)
                this.viewerRoles = svcResp.data;
        },
        methods: {
            test() { alert('') }
        }
    }
</script>

Странно то, что если я нажму HTML <button>, браузер покажет предупреждение. Но на <DxButton> этого нет. Насколько я вижу, в консоли отладки ошибок нет.

Что не так с моим кодом?