livewire reset() method not working

hi everyone i have an application manage the comments but there is an issue which is when i create a comment using modal and set for it some alpine JS the comment created successfully and show the flash message but when i try to create another comment i found the inputs fill with the old data i set the reset() method but is not working i used the livewire Forms code as bellow

public CreateComment $comment;

public function create(){
    $validated = $this->validate();
    ModelsComment::create([
        'title' => $validated['title'],
        'content' => $validated['content'],
    ]);
    $this->dispatch('close_modal');
    session()->flash('success', 'comment created successfully !');
    $this->comment->reset();
}

the form as bellow

class CreateComment extends Form { // validation #[Rule('required|min:3|max:100')] public $title;

#[Rule('required|min:5|max:200')]
public $content;

public function resetProperties(){
    $this->reset();
}

}

the modal as bellow

    <x-create-comment title="Create New Comment">
        {{-- the first way to passing data to modal using the slot tag --}}
        <x-slot:body>
            <form>
                <div class="my-6">
                    <label for="default-input"
                        class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">title comment</label>
                    <input wire:model='comment.title' type="text" id="default-input"
                        class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-teal-500 focus:border-teal-500 block w-full p-2.5">
                    @error('comment.title')
                        <span class="text-red-500 text-sm text-left mt-2">{{ $message }}</span>
                    @enderror
                </div>
                <div>
                    <div
                        class="w-full mb-4 border border-gray-200 rounded-lg bg-gray-50 dark:bg-gray-700 dark:border-gray-600">
                        <div class="px-4 py-2 bg-gray-50 rounded-t-lg dark:bg-gray-800">
                            <textarea wire:model='comment.content' id="comment" rows="10"
                                class="bg-gray-50 w-full px-0 text-sm text-gray-900 border-0 focus:ring-0" placeholder="Write a comment..."></textarea>
                        </div>
                        <div class="flex items-center justify-between px-3 py-2 border-t dark:border-gray-600">
                            <div>
                                @error('comment.content')
                                    <span class="text-red-500 text-sm text-left mt-2">{{ $message }}</span>
                                @enderror
                            </div>
                            <button type="submit" wire:click.prevent='create'
                                class="inline-flex items-center transition-all bg-teal-500 py-2.5 px-4 text-xs font-medium text-center text-white  rounded-lg focus:ring-4 focus:ring-teal-200 hover:bg-teal-700 active:bg-teal-900">
                                Post comment
                            </button>
                        </div>
                    </div>
                </div>
            </form>
        </x-slot>

        {{-- the second way to passing data to the modal --}}
        {{-- @slot('body')
            <h1>this is the content ...</h1>
        @endslot --}} --}}
    </x-create-comment>