<input type="text" pattern="[0-9,.]{0,10}"/>

Using the mask plugin we can achieve the comma separators inserted to the numbers in the text box instead of writing our own JavaScript.

Replace something like this we get from searching Google

oninput='this.value = this.value.replace(/,/g, "").replace(/\B(?=(\d{3})+(?!\d))/g, ",")'

with this :

x-mask:dynamic="$money($input)"

Finally :

<!-- Alpine Plugins -->
<script defer src="https://unpkg.com/@alpinejs/mask@3.x.x/dist/cdn.min.js"></script>

<!-- Alpine Core -->
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>

<input
    type="text"
    name="bid" 
    placeholder="Enter your bid amount"
    pattern="[0-9,.]{0,10}"
    x-mask:dynamic="$money($input)"
/>