Passing function to component doesn't work

[folmert]

I've added vue-select component scenarios into my own forked vue-play.

play/VSelect.vue:

<template>
    <v-select :on-change="onchangeCallback" v-model="selected" :options="options"></v-select>
</template>

<script>
    import Vue from 'vue'
    import vSelect from 'vue-select'

    Vue.component('v-select', vSelect);

    export default {
        props: {
            options: {
                default: function() { return ['one', 'two'] },
                type: Array
            },
            onchangeCallback: {
                default: () => {
                    alert('change');
                    console.log('change');
                },
                type: Function
            }
        },
        data() {
            return {
                selected: null
            }
        }
    }
</script>

play/VSelect.play.js:

import {play} from '../src/play'
import VSelect from './VSelect.vue'

play(VSelect)
    .name('VSelect')
    .displayName('VSelect')
    .add('default', '<v-select />')
    .add('multiple', '<v-select multiple />')
    .add('onchangeCallback', {
        template: `<v-select />`,
    });

Now when I have :on-change="onchangeCallback" defined in VSelect.vue it works:

<template>
    <v-select :on-change="onchangeCallback" v-model="selected" :options="options"></v-select>
</template>

but when I move :on-change="onchangeCallback" along with onchangeCallback into VSelect.play.js:

.add('onchangeCallback', {
        template: `<v-select  :on-change="onchangeCallback" />`,
        methods:  {
            onchangeCallback() {
                alert('change');
                console.log('change');
            }
        }
    });

it doesn't work any more, I don't get any alert.