Strange behaviour in component

I've built a pretty simple Livewire component for a Counter (code below).

• Pressing the + and - buttons works as expected, it updates the number in the tags.
• Changing the counter by putting a value in the input also works.

PROBLEM: pressing the + or - buttons doesn't update the value of the counter in the text input field... even though it is supposed to be bound to the variable, which is proven as it works the other way around.

What am I not seeing/missing here?

PS1. It is not a caching issue. I checked that. PS2. I am aware that I can use the magical $set action instead of the two functions, but that doesn't change the situation (nor my question thus)

<div>
    <p>{{$counter}}</p>
    <button wire:click="increment()">+</button>
    <button wire:click="decrement()">-</button>

    <input wire:model.live="counter" type="text">
</div>

class Counter extends Component
{
    public $counter = 0;

    public function increment()  { 
      $this->counter++;
    }

    public function decrement()  { 
      $this->counter--;
    }

    public function render() {
        return view('livewire.counter');
    }
}