[SOLVED] livewire validation is working real-time message "required.validation" show this Problem

livewire validation is working real-time message "required.validation" show this Problem

livewire validation is working real-time message show "required.validation" but I see the display message "first_name field is required"

This is my livewire component code

public $first_name = '';
public $last_name = '';
public $email = '';
public $phone_number = '';
public $password = '';
public $password_confirmation = '';
public $business_name = '';
public $comments = '';
public $solutions_of_interest = '';

protected $rules = [

    'first_name' => 'required',
    'first_name' => 'required|max:255',
    'last_name' => 'required|max:255',
    'phone_number'      => 'required|digits:9',
    'business_name' => 'required|max:255',
    'solutions_of_interest' => 'required|max:255',
    'email' => 'required|email|unique:users',
    'password' => 'required|min:8|confirmed',
    'password_confirmation' => 'required|min:8',
   
];

public function save()
{
    $this->validate();

        User::create([
            'first_name' => $this->first_name,
            'last_name' => $this->last_name,
            'email' => $this->email,
            'phone_number' => $this->phone_number,
            'password' => Hash::make($this->password),
            'business_name' => $this->business_name,
            'comments' => $this->comments,
            'solutions_of_interest' => $this->solutions_of_interest,
            'email_verified_at' => Carbon::now(),
            'phone_number_varified' => 1,
        ]);

        // $this->reset();
        session()->flash('success','User Created Successfully.');


}

public function updated($property)
{
    $this->validateOnly($property);
}

this is my livewire blade component code

    <div class="col-xl-6 col-lg-6 col-md-6 col-sm-6 col-12">
        <input type="text" class="form-control" wire:model="first_name"
            autocomplete="first_name" autofocus placeholder="First Name">

        @error('first_name') <span class="text-danger">{{ $message }}</span>@enderror
    </div>
    <div class="col-xl-6 col-lg-6 col-md-6 col-sm-6 col-12">
        <input type="text" class="form-control" wire:model="last_name"
            autocomplete="last_name" autofocus placeholder="Last Name">
        @error('last_name')
            <span class="text-danger">{{ $message }}</span>
        @enderror
    </div>

see this image enter image description here

Solution