Vuetify.js and date-picker watch doesn't trigger on month

Question

Running Vue.js and Vuetify.js .

I'm testing the data-picker and the watch method for triggering events on change of month. However, it only seems watch is noticing change of year , and not month .

HTML

<div id="app">
  <v-app>

    <v-date-picker ref="picker" v-model="date" :picker-date.sync="pickerDate" type="month"></v-date-picker>

  </v-app>
</div>

JS:

new Vue({
  el: "#app",
  data() {
    return {
      pickerDate: null,
      date: null,
    };
  },
  watch: {
    pickerDate(val) {
      console.log(val)
    }
  }
});

Codepen example shown here: https://codepen.io/alfredballe84/pen/varGWe?editors=1111

Answer 1

You should watch date not pickerDate but it's will trigger yyyy-mm

  new Vue({
      el: "#app",
      data() {
        return {
          pickerDate: null,
          date: null,
        };
      },
      watch: {
        date(val) {
          console.log(val)
        }
      }
    });

Answer 2

I solved your problem by changing the v-model="date"

to:

v-model="pickerDate"