Laravel Jetstream - Inertia - Button Component does not respond to click events - laravel

Question

<jet-button class="bg-green-600 m-auto"
#click="creatingProductCategory = true"
>Create New</jet-button>
<jet-dialog-modal :show="creatingProductCategory" #close="creatingProductCategory = false">
<template #title>Create New Product</template>
<template #content>
<form #submit.prevent="submit">
<div>
<jet-label for="email" value="Product Category"/>
<select name="" id=""
class="block w-full border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 rounded-md shadow-sm"
>
<option value="1">Macrame</option>
<option value="2">Coords</option>
<option value="3">Plant</option>
<option value="4">Accessories</option>
</select>
</div>
<div class="mt-4">
<jet-label for="email" value="Product Name"/>
<jet-input id="email" type="email" class="mt-1 block w-full" v-model="form.email"
placeholder="Enter Product Name"
required autofocus/>
</div>
<div class="mt-4">
<jet-label for="password" value="Price"/>
<jet-input id="password" type="password" class="mt-1 block w-full"
placeholder="Enter Price"
v-model="form.password" required autocomplete="current-password"/>
</div>
<div class="flex items-center justify-end mt-4">
<jet-button class="ml-4" :class="{ 'opacity-25': form.processing }"
:disabled="form.processing">
Create
</jet-button>
</div>
</form>
</template>
</jet-dialog-modal>
This is the button component i have used that comes within jetstream templates.
But when i click the button the value of the variable 'creatingProductCategory' doesnt change.
Iam missing something important here !
Also if you have links to some good documentation it would be of great help :)

Answer 1

As Rwd mentiond in comment you need to add .native to #click:
<jet-button type="button" #click.native="someFunction" class="mr-4">
press button
</jet-button>

Answer 2

I got a simple way around it.
<button class="bg-green-600 m-auto inline-flex items-center px-4 py-2 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-gray-700 active:bg-gray-900 focus:outline-none focus:border-gray-900 focus:shadow-outline-gray transition ease-in-out duration-150"
#click="creatingProductCategory = true"
>Create New</button>
I used generic html5 buttons and gave it the class that was being used in jetstream buttons . It loooks exactly the same and the click handler works now