I currently have a small Vue project with the CompositionAPI where I now have a problem.
I have one parent component and two child components. A child component is there to display all users (where there is also the option to delete and edit the user). The other child component is there to edit the user.

The flow goes something like this: The user presses edit user, then a method is triggered in the parent component, where the ID of the user to be edited is also passed and then the ID should be passed as prop to the second child component (where an API request is then made to load and insert all user data).
This all works as it should, but the ID of the user in the parent component is still the correct one and then no longer in the child component (it is always undefined).

I have tried everything with v-bind and ‘:’, but I don’t know what else to do. The funny thing is that if I just enter a number like 10 in :edit-user-id then everything works perfectly, but only until I want to use the variable again. I hope someone can help me. The code is here:

Userlistview.vue

<script setup>
  const emit = defineEmits(['update-user']);

  function pressEdit(id) {
    emit('update-user', id);
  }

  function fetchAllUsers(){
    // all User get fetched here
  }
</script>

<template>
  <button class="button" v-on:click="pressEdit(user.userid)">Edit</button>
</template>

Adminview.vue

<script setup>
  let isEditActive = ref(false);
  let editUserId = ref();

  function userUpdateDone(){
    isEditActive.value = false;
    userlistBinding.value.fetchAllUsers();
  }

  function userUpdatePress(id) {
    editUserId.value = id;
    isEditActive.value = true;
  }
</script>

<template>
 <Userlistview ref="userlistBinding" @update-user="userUpdatePress($event)"/>

 <Usereditview v-if="isEditActive" :edit-user-id="editUserId.value" @update-user= "userUpdateDone()"/>
</template>

Usereditview.vue

<script setup>
  const props = defineProps({editUserId: Number});
  const emit = defineEmits(['update-user']);

  function loadUser() {
    // here get the user loaded with the specific id from the props
  }

  function updateUser() {
    // here gets the user updated -> if the respone is ok then this line of code will be executed
    emit('update-user');
  }
</script>