Open q-dialog nested in q-menu

[MobideoNetser]

Hello,
I'm tiring to open a menu, and then open a dialog from the menu.
The dialog is nested in the menu so the relation is child-parent. If the connection is of sibling, it working fine.
Currently clicking on the dialog will close it, no matter if it is the cancel button (which is fine) or the body of message (which is wrong).

Here is my codePen-
https://codepen.io/mobideonetser/pen/dyNxbMr

I found this implementation of vue 2, I guesses it should be very close to this but on vue 3 and quasar beta (I tried to convert it to vue 3 and child-parent relation without success) .
https://codepen.io/dsl101/pen/jJZXeE

Thanks

links to screen shot:
https://ibb.co/tMQwp3q
https://ibb.co/GRCR3mb
https://ibb.co/JcQ4FV7

Version: Quasar 2 beta, vue 3.
https://next.quasar.dev/vue-components/dialog

Here is the code:

<template>
<div >
      <span> click    <!-- dont use a button here-->
        <q-menu v-model="showing"><ul><li>moshe</li><li>zuchnic</li></ul>
        <li > 
           <input type="button" value="closeIcosn" v-close-popup label="Close Icon" color="primary" @click="icon = true" />
        </li>
      </q-menu> 
      </span>
      
      <q-dialog v-model="icon"> 
      <q-card>
      <div>some div </div>
        <q-card-actions align="right">
            <input  type="button" value="Cancel" color="primary" v-close-popup>
         </q-card-actions>
      </q-card>
    </q-dialog>
     </div> 
    
</template>

<script>

import { ref } from 'vue'
export default {
  

setup () {
var showing=ref(false);

   
     
    return {
      showing , icon: ref(false),
    }}
    
  
};
</script>