Livewire 3, data not binding problem

Hi Everyone,

for quite a while I'm struggling with the issue below. I have this simple component:

namespace App\Livewire\Livewiretest;

use Livewire\Component;

class Livewiretest extends Component
{
    public $test='hello';
    
    public function render()
    {
        return view('livewire.livewiretest.livewiretest');
    }
}

and

the following template:

<div>

    <input type="text" wire:model="test">

    <p>this is a: {{ $test }}</p>
</div>

In my understanding when I write something in the input the $test variable should be updated and should display however it is not working and nothing is happening.

If I change the code like this:

namespace App\Livewire\Livewiretest;

use Livewire\Component;

class Livewiretest extends Component
{
    public $test='hello';
    
    public function render()
    {
        return view('livewire.livewiretest.livewiretest');
    }

    public function save()
    {
        
    }

<div>
    {{-- Stop trying to control. --}}

    <form>
    <input type="text" wire:model="test">
    <button wire:click.prevent="save()">Submit</button>
    </form>

    <p>this is a: {{ $test }}</p>
</div>

and this works after submitting the $test variable is updated.

So can anybody help me and explain what I am doing wrong?:) Thanks HT