Problem

I got the following error in my Vue.js + TypeScript project:

<my-input> misses props: value

Component Definition

I followed the Vue.js documentation on the usage of v-model on components as described here.

MyInput.vue

My component for which I want to use the v-model keyword looks like this:

<template>
  <div>
    <input :value="value" @input="$emit('input', $event.target.value)" />
  </div>
</template>

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

@Component
export default class MyInput extends Vue {
  @Prop({ type: String, required: true }) private readonly value!: string;
}
</script>

MyFirstView.vue

I now want to use myInput component in the following way:

<template>
  <div>
    <my-input v-model="myValue" />
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import MyInput from '@/components/MyInput.vue';

@Component({
  components: { MyInput }
})
export default class MyFirstView extends Vue {
  myValue = 'my test value';
}
</script>

Questions

So accordingly to the official documentation the usage of v-model in my-input resolves to this:

<my-input v-bind:value="myValue" v-on:input="myValue = $event" />

So I obviously set the value property with the v-model keyword, right? But why do I get that error that the value prop wouldn't have been set?

When I change the required keyword to false the error vanishes but this can't be the right solution, right? Because I want the value property to be required.

Used IDE: VSCode with ESLint+Prettier and Vue.js 2.6.11