Simple counter example as a component class

So I was trying to demo the concept of Sprig class components to a colleague with a simple example

<?php

namespace sprig\components;

use putyourlightson\sprig\base\Component;

class HelpSupport extends Component
{
    public int $count = 2;
    protected $_template = '_components/helpSupport';

    public function updateCount()
    {
        $this->count = $this->count * 2;
    }
}

and then the component

<div class="container"
     id="helpSupport">
    <form sprig
          s-action="updateCount"
          s-replace="#hello"
    >
        <button>
            increase counter
        </button>
    </form>
</div>

<div id="hello">
    {{ count }}
</div>

it works on the first click but then stops. What’s missing?

[bencroker]

That s-replace crept back in somehow, removing it should work.

<div class="container"
     id="helpSupport">
        <button sprig
          s-action="updateCount"
          s-val:count="{{ count }}">
            increase counter
        </button>
</div>

<div id="hello">
    {{ count }}
</div>

[bencroker]

Since we’re already doing this, here would be my version of a counter component.

<button sprig s-action="decrement">-</button>
<input type="text" value="{{ count }}">
<button sprig s-action="increment">+</button>