[Vuejs]-Why isn't reactive the data with props in this situation?

When you initialize reserveData, you set the room property to the name of your current room ref:

const reserveData = reactive({
  room: room.value.name,
  ...
})

This is a value, not the reactive object. So the room prop is now a string, and it will not change when your room ref changes.

A simple way to fix it is to put the ref into reserverData and extract the room name from there, i.e. reserveData.room.name. Note that in Vue 3.3, you have to use toRef() with a function if you use it on props:

const room = toRef(() => props.room) // in Vue 3.3
const reserveData = reactive({
  room: room,
  ...
})

A better solution is probably to use a watcher that updates reserveData when the room changes:

watch(room, () => reserveData.room = room.value.name)

You have to make your reserveData object as a computed value.

The room property of reserveData object is not reactive because it’s defined only once when component was rendered. If you want to keep there an actual value from a prop, the reserveData object must be computed

const reserveData = computed(() => ({
  employee: false,
  date: false,
  room: room.value.name,
  chosenDesk: false
}))

Also, instead of making reserveData computed, you can make a watch function that will track the prop room change and set a new value for room in the reserveData object.