Livewire use one component in a multiple time to update input fields - laravel

Question

I'm using AlpineJs and Livewire in an application. I'm new to livewire, Here I want to Update the post name which is showing from a component inside another component. To reuse those I have separated those also there have lots of other features with complex logic.
Problem
The post name isn't changing, Not even fire the wire:model.
#post.table
#foreach ($posts as $index => $post)
<tr>
<td> {{ Str::limit($post->name, 22) }}</td>
<td> {{ $post->description }}</td>
<td> {{ $post->date }}</td>
<td> {{ $post->amount }}</td>
</tr>
<template x-if="some_condition">
<tr>
<livewire:post.post-details :post="$post" :index="$index">
</tr>
</template>
#endforeach
//pagination here
#post.post-details
class PostDetails extends Component
{
protected $post;
public $index;
public function mount($post, $index)
{
$this->post = $post;
$this->index = $index;
}
public function render()
{
return view('livewire.post.post-details', [
'post' => $this->post,
]);
}
}
<div>
<livewire:post.post-name :post="$post" :index="$index">
// Other components are here
</div>
#post.post-name
class PostName extends Component
{
public $post_name;
public $index;
protected $rules = [
'update_post.*.name' => 'required|string',
];
public function mount($schedule_entry, $index)
{
$this->post_name = $post->name;
$this->index = $index;
}
public function render()
{
return view('livewire.post.post-name');
}
public function some_action()
{
//
}
}
<div>
<input type="text" wire:model="update_post.{{ $index }}.name" wire:keydown="some_action" value="{{ $post_name }}">
</div>
If you guys have any better idea to reuse those component feel free to share. Thanks
I have try this two way
https://laravel-livewire.com/docs/2.x/properties#binding-models
https://laracasts.com/discuss/channels/livewire/livewire-save-fields-with-same-name