Buefy Timepicker watching on change

Question

Good morning. I have a problem with the buefy timepicker. It works if I use the "clear" or "Now" buttons but not on selecting time. This seems to have started with a recent buefy update.

https://codepen.io/anon/pen/JqBKGE?&editable=true&editors=101

<div id="app" class="container">
    <textarea style="width: 100%;" readonly>{{ time }}</textarea>

    <b-field label="Select time">
        <b-timepicker v-model="time"
                      inline
                      placeholder="Click to select...">

            <button class="button is-primary"
                    @click="time = new Date()">
                <b-icon icon="clock"></b-icon>
                <span>Now</span>
            </button>

            <button class="button is-danger"
                    @click="time = null">
                <b-icon icon="close"></b-icon>
                <span>Clear</span>
            </button>
        </b-timepicker>
    </b-field>

</div>

JS

const example = {
    data() {
        return {
            time: new Date()
        }
    },
    watch: {
        time: {
            handler: function() {
                console.log(this.time);
            }
        }
    }
}


const app = new Vue(example)

app.$mount('#app')

Any suggestions?

Answer 1

Seems to be an issue with the buefy Timepicker https://github.com/buefy/buefy/issues/1418

Edit: This was fixed with Buefy release 0.7.7