Carousel v-model is not in sync when using arrow navigation buttons

[lunfel]

Overview of the problem

Buefy version: [0.8.10] (0.8.9 is also affected)
Vuejs version: [2.5.18]
OS/Browser: Linux Ubuntu

Description

The v-model of Carousel component is not reactive on slide changes through previous and next arrow navigation buttons.

Steps to reproduce

1. Create a simple b-carousel component with a v-model using this code (code from simple example from docs with added v-model):

<template>
    <b-carousel v-model="selected">
        <b-carousel-item v-for="(carousel, i) in carousels" :key="i">
            <section :class="`hero is-medium is-${carousel.color}`">
                <div class="hero-body has-text-centered">
                    <h1 class="title">{{carousel.text}}</h1>
                </div>
            </section>
        </b-carousel-item>
    </b-carousel>
    <span>{{ selected }}</span>
</template>

<script>
export default {
    data(){
        return {
            selected: 0,
            carousels: [
                { text: 'Slide 1', color: 'primary' },
                { text: 'Slide 2', color: 'info' },
                { text: 'Slide 3', color: 'success' },
                { text: 'Slide 4', color: 'warning' },
                { text: 'Slide 5', color: 'danger' }
            ]
        }
    }
}
</script>

2. Click on navigation buttons
3. The value of selected will stay at 0
4. (optional) When using indicators, the value will update

Expected behavior

I would expect my v-model to be in sync with the actual selected slide regardless of the method I choose to change my slide

Actual behavior

My v-model is only in sync when using indicators

Discussion / Solution

In the docs, it states those two events:

Name	Description	Parameters
change	Triggers when carousel item value is changed	value: Boolean, value: String
input	Triggers when indicator-mode value is changed	value: Boolean, value: String

I feel like change should be input in fact. That way, v-model would always stay in sync with the component.

This is the api I would suggest, but it is a breaking change for current users

Name	Description	Parameters
input	Triggers when carousel item value is changed	value: Boolean, value: String
indicator-change	Triggers when indicator-mode value is changed	value: Boolean, value: String

Workaround

The current workaround (not tested yet) would be to update the v-model manually through @change event.

// Untested
<b-carousel @change="value => selected = value"></b-carousel>

[apolokaklab]

@lunfel Hi, Actually that was intentional, so that I could make the b-carousel work with the b-carousel-list. for now you can use event @change like this

[jtommy]

Close #2619