I need to send an id from read component to update component. The id must be obtained by function updateItem(). But id is not sent to the child pag

Question

The id is obtaind correctly by function updateItem(id)

<template>
  <UpdateView :itemId="itemId"/>
    <ul>
      <li v-for="item in items" :key="item.id">
        {{ item.name }}: {{ item.description }}
        <img :src="item.photo_url" alt="Country Image" />
        <button @click="deleteItem(item.id)">Delete</button>
        <button @click="updateItem(item.id)">Update</button>
      </li>
    </ul>
  </template>
  
  <script setup>
    import { ref, onMounted, provide } from 'vue'
    import { supabase } from '../supabase'
    import { useRouter } from 'vue-router'
    import UpdateView from './UpdateView.vue'

    const items = ref([])
    const itemId = ref(null)
    const router = useRouter()
  
    provide('itemId', itemId)
  
    async function getItems() {
      const { data } = await supabase.from('tabela1').select()
      items.value = data
    }
  
    async function deleteItem(id) {
      await supabase.from('tabela1').delete().eq('id', id)
      getItems() // Atualiza a lista após deletar o item
    }
  
    function updateItem(id) {
      itemId.value = id
      router.push({ name: 'update' }) // Redireciona para a rota de atualização
      console.log(itemId.value)
    }
  
    onMounted(() => {
      getItems()
    })
  </script>

This page must receive the id, but it not happens

<script setup>
  import { ref, onMounted } from 'vue'
  import { supabase } from '../supabase'

  const item = ref(null)
  const props = defineProps({
    itemId: {
      type: Number,
      required: true
    }
  })

  onMounted(async () => {
    const { data } = await supabase.from('tabela1').select().eq('id', props.itemId.value)
    item.value = data[0]
    console.log(props.itemId)
  })
</script>

<template>
  <div v-if="item">
    <label for="name">Nome</label>
    <input id="name" v-model="item.name" />

    <label for="description">Descrição</label>
    <input id="description" v-model="item.description" />

    <button @click="updateItem">Atualizar</button>
  </div>
</template>

If I put the number 2 in the place of props.itemId.value in the update page It works corectly, but if I put the number 2 in the place of id in itemId.value = id in the read page, It don't work I don't know what is happening