How to disable or enable button with Alpine js - html

Question

I have this increment and decrement dropdown on my page. I want to add a max-min value to it, and when the max or min value is reached, I what my button to be disabled.
I am new to Alpine.
If you have any suggestions for my code, I will be pleased and open to them, and I would appreciate it. 
<!-- Occupancy -->
<div class="relative md:w-auto w-full">
<div class="flex justify-center">
<div
x-data="{
open: false,
total: 0,
incrementTotal() {
this.total++;
},
decrementTotal() {
this.total--;
},
toggle() {
if (this.open) {
return this.close()
}
this.$refs.button.focus()
this.open = true
},
close(focusAfter) {
if (! this.open) return
this.open = false
focusAfter && focusAfter.focus()
}
}"
x-on:keydown.escape.prevent.stop="close($refs.button)"
x-on:focusin.window="! $refs.panel.contains($event.target) && close()"
x-id="['dropdown-button']"
class="relative w-full"
>
<!-- Button -->
<button
x-ref="button"
x-on:click="toggle()"
:aria-expanded="open"
:aria-controls="$id('dropdown-button')"
type="button"
class="flex items-center gap-2 bg-white px-15 md:py-20 py-18 md:w-[90px] w-full rounded-md shadow flex-row"
>
<div class="flex flex-row space-x-16">
<x-icons.user-account class="w-24 h-24 text-black cursor-pointer" />
<div class="text-base text-left">
<span x-text="total" class="w-[30px] text-center" :value="total"></span>
</div>
</div>
</button>
<!-- Panel -->
<div
x-ref="panel"
x-show="open"
x-transition.origin.top.left
x-on:click.outside="close($refs.button)"
:id="$id('dropdown-button')"
style="display: none;"
class="absolute right-0 md:top-full top-[90%] mt-16 p-24 z-50 md:w-[300px] w-full rounded-md bg-white shadow-2xl space-y-24"
>
<div class="font-bold text-2xl text-black text-left">
<p>Heading here</p>
</div>
<div class="flex flex-row justify-between items-center w-full" x-data="{ number: 0 }">
<div class="flex flex-col text-base text-black w-full">
<p>Something</p>
<div class="text-gray-700">
<p>Something else</p>
</div>
</div>
<div class="flex space-x-8 items-center md:justify-center justify-end w-full text-base" x-data="{ count: 1, buttonDisabled: false }" x-modelable="count" x-model="number">
<button class="rounded-full border-1 border-gray-700 p-10" #click="count--; decrementTotal(); if(total < 1){total = 1; buttonDisabled = true} else{buttonDisabled = false}" x-bind:disabled="buttonDisabled"><x-icons.minus class="w-16 h-16"/></button>
<span x-text="number" class="w-[30px] text-center" required min="1" max="6" :value="total"></span>
<button class="rounded-full border-1 border-gray-700 p-10" #click="count++; incrementTotal(); if(total > 6){total = 6; buttonDisabled = true} else{buttonDisabled = false}" x-bind:disabled="buttonDisabled"><x-icons.plus-add class="w-16 h-16"/></button>
</div>
</div>
<div class="flex flex-row justify-between items-center w-full" x-data="{ number: 0 }">
<div class="flex flex-col text-base text-black w-full">
<p>Something 2</p>
<div class="text-gray-700">
<p>Something else 2</p>
</div>
</div>
<div class="flex space-x-8 items-center md:justify-center justify-end w-full text-base" x-data="{ count: 1, buttonDisabled: false }" x-modelable="count" x-model="number">
<button class="rounded-full border-1 border-gray-700 p-10" #click="count--; decrementTotal(); if(total < 1){total = 1; buttonDisabled = true} else{buttonDisabled = false}" x-bind:disabled="buttonDisabled"><x-icons.minus class="w-16 h-16"/></button>
<span x-text="number" class="w-[30px] text-center" required min="1" max="6" :value="total"></span>
<button class="rounded-full border-1 border-gray-700 p-10" #click="count++; incrementTotal(); if(total > 6){total = 6; buttonDisabled = true} else{buttonDisabled = false}" x-bind:disabled="buttonDisabled"><x-icons.plus-add class="w-16 h-16"/></button>
</div>
</div>
</div>
</div>
</div>
</div>
In my code after one click the button is disabled.