Quasar v2 month picker

MonthPicker.vue

<template>
  <q-input
    square
    dense
    mask="##.####"
    outlined
    v-bind="$attrs"
    :model-value="modelValue"
    @update:model-value="setInputValue"
    style="width: 125px"
  >
    <template v-slot:append>
      <q-icon class="cursor-pointer" name="las la-calendar" @click.stop>
        <q-popup-proxy ref="datePicker" transition-hide="scale" transition-show="scale">
          <q-date
            ref="calendar"
            no-unset
            square
            emit-immediately
            years-in-month-view
            default-view="Months"
            @update:model-value="setValue"
            mask="MM.YYYY"
            minimal
            :model-value="modelValue"/>
        </q-popup-proxy>
      </q-icon>
    </template>

  </q-input>
</template>

<script>
export default {
  name: 'MonthPicker',

  methods: {
    setValue (value, reason) {
      if (reason === 'year') {
        this.$refs.calendar.setView('Months')
      } else if (reason === 'month') {
        this.$emit('update:modelValue', value)
        this.$refs.datePicker.hide()
      }
    },

    setInputValue (value) {
      this.$emit('update:modelValue', value)
    }
  },

  props: {
    modelValue: {
      type: String
    }
  },

  emits: ['update:modelValue']
}
</script>