[SOLVED] bulma-calendar not updating as Vue.js component

bulma-calendar not updating as Vue.js component

I am learning Vue.js and would like to implement the bulma-calendar module in my app. I came this far, but the calendar is somehow not updating, when I am selecting a new Date.

Sorry if I can't specify the problem more, as I said declarative programming is very new to me.

The template I got from the official website of bulma-calendar: https://demo.creativebulma.net/components/calendar/v6//#integration

Vue.component("comp-calendar", {
  template: `
    <div>
        <input ref="calendarTrigger" type="date">
    </div>
    `,

  data: function () {
    return {
      date: new Date(),
    };
  },

  mounted: function () {
    const options = {
      type: "date",
      color: "danger",
      dateFormat: "DD-MM-YYYY",
      startDate: this.date,
      displayMode: "inline",
    };
    const calendar = bulmaCalendar.attach(
      this.$refs.calendarTrigger,
      options
    )[0];
    calendar.on("date:selected", (e) => (this.date = e.date));
  },
});

var app = new Vue({
  el: "#app",
});

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- import bulma -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css">
    <!-- import bulma-calendar -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma-calendar@6.0.9/dist/css/bulma-calendar.min.css">
</head>

<body>
    <div id="app">
        <comp-calendar></comp-calendar>
    </div>

    <!-- import bulma-calendar -->
    <script src="https://cdn.jsdelivr.net/npm/bulma-calendar@6.0.9/dist/js/bulma-calendar.min.js"></script>
    <!-- import https://vuejs.org -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
    <script src="src/js/test.js"></script>
</body>

Any help? Thanks

EDIT: Did not help:

[...]
<input type="date">
[...]
const calendar = bulmaCalendar.attach('[type="date"]', options)[0];
calendar.on("select", (e) => (this.date = e.date))

Solution

Probably a bug in 6.0.9. Working with 6.0.0 (according to documentation here: https://creativebulma.net/product/calendar/demo) worked fine.