I have created a very simple Vue 3 Component:

<template>
  <input type="text" :value="value" >
</template>

<script lang="ts">

import { defineComponent } from 'vue'
export default defineComponent({
  props:{
    value: {type: String, default: ''}
  }
});
</script>

With below HTML, I am trying to render the component in browser:

<div id="app">
  {{message}}

  <my-input></my-input>
</div>

This works correctly, but it fail when I try to pass value attribute to this component:

<my-input :value="message"></my-input>

This is error, I get in browser console:

Uncaught DOMException: Failed to execute 'setAttribute' on 'Element': '0' is not a valid attribute name.
at patchAttr (https://unpkg.com/vue@next:9333:18)
at patchProp (https://unpkg.com/vue@next:9539:11)
at mountElement (https://unpkg.com/vue@next:6051:27)
at processElement (https://unpkg.com/vue@next:6024:15)
at patch (https://unpkg.com/vue@next:5944:23)
at ReactiveEffect.componentUpdateFn [as fn] (https://unpkg.com/vue@next:6484:23)
at ReactiveEffect.run (https://unpkg.com/vue@next:580:31)
at setupRenderEffect (https://unpkg.com/vue@next:6603:11)
at mountComponent (https://unpkg.com/vue@next:6386:11)
at processComponent (https://unpkg.com/vue@next:6344:19)

Any remarks why I am getting this error. Thanks for your help.