Vue Component inside Livewire Component

Hi all, i’m in the process of moving some vue functionality to livewire. We use some vue custom input components throughout the app. One of these components uses the vue-select plugin/component. Since I can’t change the app all in 1 go to livewire, I’ve been trying to use this vue-select component with livewire. Just to make it clear what’s happening, I’ve even wrapped the vue-select component into my own input component.

This is the custom input component called livewire-select.

<template>
    <vue-select :options="options" placeholder="Role" @input="handle" autocomplete="off" style="width: 350px;"></vue-select>
</template>

<script>
    import VueSelect from 'vue-select';

    export default {
        components: { VueSelect },

        props: {
            options : {
                type: Array,
                default: () => (['Foo', 'Bar'])
            }
        },

        methods: {
            handle(value) {
                this.$emit('input', value);
            }
        }
    }
</script>

And on the livewire side:

<livewire-select class="my-4" wire:model="foo"></livewire-select>

Unfortunately this doesn’t work. The input event is fired. But I never see the changes reflected on the livewire side. If I replace the vue-select component (inside the livewire-select vue component) to a normal select/option, it works fine. I also tried wire:input as a listener.

Anyone know if something like the above is even possible? And if so, what am I missing?