Capture value of input counter created with tailwind and alpine JS

I have a counter made with Tailwind and Alpine JS. I am trying to capture the value of the input field when the user types in or uses the counter buttons, but I am only able to capture the value when a user types their response. Any ideas on how to capture the values when the user uses the counter buttons to increment or decrement?

<!-- counter -->

<div class="z-50 relative" x-data="{ quantity : 0 }">
    <div class="fisker-bold text-gray-900 text-center mx-auto text-sm"&开发者_如何学编程gt;
        Quantity</div>
    <div class=" mt-1 mb-3 flex rounded-md justify-center">
        <button @click="quantity--" type="button"
            class=" relative inline-flex items-center space-x-2 px-4 py-2  text-sm font-medium rounded-l-md text-gray-700 bg-gray-50 hover:bg-gray-100 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 bg-gray-300">
            -
        </button>
        <div class="relative flex items-stretch focus-within:z-10">
            <input type="text" x-model="quantity" name="qty-1" id="qty-1"
                class="text-center focus:ring-blue-500 focus:border-indigo-500 block w-20 text-gray-900 rounded-none pl-3 sm:text-sm border-gray-300 bg-gray-300"
                value="0">
        </div>
        <button @click="quantity++" type="button"
            class="relative inline-flex items-center space-x-2 px-4 py-2  text-sm font-medium rounded-r-md text-gray-700 bg-gray-50 hover:bg-gray-100 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 bg-gray-300">
            +
        </button>
    </div>
</div>
<!-- counter -->

 <script>
        $(function () {
            $("#qty-1").on("change", function () {
                var text = $(this).find('option:selected').text();
                $('#qty').text(' x' + text);
               
            });
        });
    </script>