@foreach($products as $product)
  <select name="size" id="size">
       <option value="1">S</option>
       <option value="2">M</option>
       <option value="3">L</option>
  </select>
  <livewire:add-to-cart-button :product="$product" />
@endforeach

Solution this

@foreach
<select class="form-select form-select-sm me-2" id="size" name="size">
  <option value="1">S</option>
  <option value="2">M</option>
  <option value="3">L</option>
</select>
<livewire:carts.add-to-cart :product="$product" :size="1" />
<script>
  document.addEventListener('livewire:init', () => {
    let size = document.querySelector("[name='size']");
    size.addEventListener('change', (event) => {
      console.log(event.target.value);
      Livewire.dispatch("get-size-value"', {
        sizeId: event.target.value
      })
    })
  });
</script>
@endforeach

In component, we get that value

use Livewire\Attributes\On;

#[On('get-size-value')]
public function size($sizeId)
{
    dd($sizeId);
   //Do what can you do

}