Insert Row is not working with click event

I can insert rows with this code, it works;

 const { data, error } = await supabase
  .from('myrow')
  .insert([
    { id: 11, desc: 'heyrow' },
  ])

 const { data, error } = await supabase
  .from('myrow')
  .insert([
    { id: 11, desc: 'heyrow' },
  ])

 const { data, error } = await supabase
  .from('myrow')
  .insert([
    { id: 11, desc: 'heyrow' },
  ])

 const { data, error } = await supabase
  .from('myrow')
  .insert([
    { id: 11, desc: 'heyrow' },
  ])

But it inserts only on page re-loads of course. When i try to wrap it in a async function;

async function insert() {
 const { data, error } = await supabase
   .from('myrow')
  .insert([
    { id: 11, desc: 'heyrow' },
  ])
}

async function insert() {
 const { data, error } = await supabase
   .from('myrow')
  .insert([
    { id: 11, desc: 'heyrow' },
  ])
}

async function insert() {
 const { data, error } = await supabase
   .from('myrow')
  .insert([
    { id: 11, desc: 'heyrow' },
  ])
}

async function insert() {
 const { data, error } = await supabase
   .from('myrow')
  .insert([
    { id: 11, desc: 'heyrow' },
  ])
}

and put it on a click event; (vue/nuxt3)

<button @click="insert()">click</button>

<button @click="insert()">click</button>

<button @click="insert()">click</button>

<button @click="insert()">click</button>

Row insert is not working with click event. What am i doing wrong?