w-input :model-value does not seem to be bidirectionally reactive

[Ophitoxaemia]

Using this code, which sets model-value to the reactive prop firstName:

And referencing the documentation that says model-value "Gets updated on text input."

However, we can see in the app, the values marked by the red arrows on the left are different. If the reactivity was bidirectional, I would expect the {{ firstName }} in the template to track the value in the input field.

Further, we can see in the console.log that the event param str tracks the value, while firstName.value does not change.

I can get my desired behavior by changing the definition of w-input to this:

and processing the event param like this:

However, this looks more like one way reactivity than two way to me. I would have expected the values marked by the red arrows on the left to be the same.

Original code:

<template>
<div v-if="props.pdata.table" id="app" class="d-block">
  <w-table
    :headers="props.pdata.table.headers"
    :items="props.pdata.table.items"
    :selectable-rows="1"
    :selected-rows="[1]"
    @row-select="props.pdata.selectionInfo = $event">
  </w-table>
  <div v-if="props.pdata.selectionInfo.item">
    <w-input @update:model-value="handleInput" :model-value="firstName">First Name</w-input> 
  </div>
  firstName should be here: {{ firstName }}
</div>
</template>

<script setup>
import { ref } from 'vue'

const props = defineProps({pdata: Object})

const firstName = ref("default")

const handleInput = (str) => {
  console.log("1--"+str+"<<<")
  console.log("2--"+firstName.value+"<<<")
  props.pdata.table.items[props.pdata.selectionInfo.item.id-1].firstName = firstName.value
}
</script>

package.json, snipped

  "devDependencies": {
    "@vitejs/plugin-vue": "^5.0.4",
    "electron": "^29.1.1",
    "electron-builder": "^24.13.3",
    "vite": "^5.1.5",
    "vite-plugin-electron": "^0.28.4",
    "vite-plugin-electron-renderer": "^0.14.5",
    "vue": "^3.4.21"
  },
  "dependencies": {
    "wave-ui": "^3.18.0"
  }