Version

3.2.11

Reproduction link

sfc playground repro

Steps to reproduce

see sfc playground link

What is expected?

should work:

@click="async function(){}"
@click="async ()=>{ }"

like:

@click="function(){}"
@click="()=>{}"

What is actually happening?

async keyword prevent detection of inline handler, and wrap it as an expression.

  <button @click="async ()=> stuff() ">
    non callable
  </button>

 _createElementVNode("button", {
      onClick: _cache[0] || (_cache[0] = $event => (async ()=> stuff() ))
    }, " non callable "),

notes

as seen in case 3,4 in the repro link, there is an unintentional behavior that fixes the handler, by using ( ) to wrap an async arrow function. @click="(async ()=>{ await stuff() })" it works with ()=>{} but not with function