modal is not shown up when convert to vue 3

Question

I am using vue latest version 3.4.21 and tried to convert a modal from vue2. My codes have:

main.js as:

import { createApp } from 'vue';
import * as uiv from 'uiv';

const app = createApp({
  
  data() {
    return {
      myModalOpen: false,
     ...
    }
  },
});

and a template with a modal in it, and modelValue is assigned to "myModalOpen"

<template>
      <modal v-model:modelValue="myModalOpen" title="Update Value" :transition-duration="0">
         <form method="POST" action="/myaction">
            <button type="submit" class="btn btn-primary">Update</button>
        </form>
    </modal>
</template>

there is a link to open up the modal:

<li class="nav-item">
      <a id="mawb-display" href="#" class="nav-link" role="button" @click.prevent="myModalOpen=true">
        <strong>MAWB:</strong>
      </a>
</li>

However, when I click on the link MAWB above, the popup is not shown

Using Vue development tools, I could see that there is a warning: update:modelvalue:⚠️ Not declared (as the attached image) with the details:

"the event update:modelvalue is not declared in emits option"

https://i.stack.imgur.com/Oo9sJ.png

Could you please help

Note: the modal worked fine in Vue 2, I just changed this in Vue 2, from:

<modal v-model="myModalOpen" .../>

to (for Vue 3):

<modal v-model:modelValue="myModalOpen" .../>