I don't know why it can't run in the project and how to change it

<template>
<div>
   <p>First name: {
    {
     firstName }}</p>
   <p>Last name: {
    {
     lastName }}</p>
<user-name
   v-model:first-name="firstName"
   v-model:last-name="lastName">
   </user-name>
</div>
</template>


<script>
export default {
    
    name: 'Item',
    props: {
    
           firstName: String,
           lastName: String
       },
    emits: ['update:firstName', 'update:lastName'],
    template: ` <input type="text" :value="firstName" @input="$emit('update:firstName', $event.target.value)"> <input type="text" :value="lastName" @input="$emit('update:lastName', $event.target.value)"> `
   };
   
   const HelloVueApp = {
    
      components: {
    
         Item,
      },
      data() {
    
    return {
    
      firstName: 'John',
      lastName: 'Doe',
    };
  },
}
Vue.createApp(HelloVueApp)

</script>