Alpine js unable to access $wire inside template loop - laravel-livewire

Question

I am trying to iterate over the colors array of alpine's x-data and inside every button trying to get and then set the color value via livewire's underlying alpine object $wire's $wire.set method.
However it gives me error that $wire is not defined in any place whether it is inside #click or if function like setColor is defined and then I access $wire over there.
button {
padding: 0;
background: none;
border: none;
}
button span {
display: inline-block;
width: 15px;
border-radius: 10px;
margin: 4px;
height: 15px;
}
<script src="https://unpkg.com/alpinejs#3.10.3/dist/cdn.min.js"></script>
<div class="space-x-2 mb-2" x-data="{
colors:['#800000','#e50000','#ff4081',
'#ff7fab','#f900ea','#ea80fc',
'#bf55ec','#9b59b6','#7c4dff',
'#0231e8','#81b1ff','#3397dd',
'#3082b7','#04a9f4','#02bcd4',
'#1bbc9c','#2ecd6f', '#f9d900',
'#af7e2e','#ff7800','#e65100',
'#b5bcc2','#667684'],
setColor(value) {
$wire.set('status.color', value)
}
}">
<!-- Also $wire not working inside #click directly -->
<template x-for="(color,index) in colors">
<button #click="setColor(color)" class="btn p-0 shadow-none" type="button" #click="setColor(color)">
<span :style="{'background-color': color}">
</span>
</button>
</template>
</div>