[Vuejs]-Conditional template rendering with props in Vue3?

As @neha-soni said,

After running the code, it is working fine

Vue recommends to use kebab-cased event listeners in templates. Your toggleDrawer will auto-converted into kebab case when you use it in the parent component. So In app.vue you can use it like @toggle-drawer,

 <NavBar :clicked="clicked" @toggle-drawer="toggleMenu()" />

From vue doc link

event names provide an automatic case transformation. Notice we emitted a camelCase event, but can listen for it using a kebab-cased listener in the parent. As with props casing, we recommend using kebab-cased event listeners in templates.

After running the code, it is working fine. I have a few feedbacks to remove unnecessary code which is creating confusion and then you can see its working.

1. Because props are immutable (read-only) in the child component that means their value will not be changed so there is no point to pass props value back (by doing emit("toggleDrawer", !props.clicked)) to the parent because the parent already has their original status.
2. Another point is, you are passing the data (props data) from the event by doing emit("toggleDrawer", !props.clicked) but not using it when calling the function @toggleDrawer="toggleMenu()" in App.vue, so better to remove this data passing code.
3. The clicked property is updating in the parent (App.vue) as well as inside the child components. Just console and print the clicked property in the child and parent template like {{ clicked }} at the top and you can see the updated status-

const toggleMenu = () => {
  console.log('Before______', clicked.value)
  clicked.value = !clicked.value;
  console.log('After______', clicked.value)
};