How to change Date Value through the V-Calendar and manually per Text Field

Hello V-Calendar Community,

i was asked to write a Date Component where you can select through the V-Calendar and through manual input (while keeping the right format 'DD.MM.YYYY'. But i have not found one Example where someone tries it.

Even in this Example at the end of the Page where it is shown how parsing dates works (here) the Value of the Calendar automatically changes after i manually type in a other date. But if i try this example out in my Code it doesn't work.

In my current code the Value changes only when i pick it through the Calendar when i manually type it in it doesn't update the value.

<template>
  <div>
    <vc-date-picker v-model="datum" mode="date" locale="de" color="blue">
      <template #default="{ inputValue, inputEvents }">
        <v-text-field
          :value="inputValue"
          outlined
          append-icon="mdi-calendar"
          v-on="inputEvents"
        />
      </template>
    </vc-date-picker>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";

@Component
export default class DatePicker extends Vue {
  @Prop()
  private label!: string;

  @Prop({ default: "" })
  private value!: Date;

  get datum(): Date {
    return this.value;
  }

  set datum(date: Date) {
    this.$emit("input", date);
  }
}
</script>

Using Vue: 2.16.4 VCalendar: 2.4.1

Hope someone can help me.

nathanreyes / v-calendar

How to change Date Value through the V-Calendar and manually per Text Field #1186