Render many Livewire components at once?

@ctrlaltdelme, Hi, see bellow example;

 <?php

namespace App\Livewire;
use App\Models\Category As Categories;
use Flux\Flux;
use Livewire\Component;

class Category extends Component
{
    public $name, $is_countable, $update, $categoryId;
    public function render()
    {
        return view('livewire.category')->with([
            'categories' => Categories::all(),
        ]);
    }

    public function save()
    {
        $this->update = false;
        $validated = $this->validate([
            'name' => 'required',
            'is_countable' =>'required',
        ]);
        Categories::create($validated);
        session()->flash('success','Category added successfully !');
        $this->reset();
        Flux::modal('category-modal')->close();
    }

    public function edit($id)
    {
        //dd('hi');
        $this->categoryId = $id;
        $this->update = true;
        $cat = Categories::findOrFail($this->categoryId);
        $this->name = $cat->name;
        $this->is_countable = $cat->is_countable;
        Flux::modal('category-modal')->show();
    }
    public function updateCat()
    {
        Categories::where('id', $this->categoryId)->update([
            'name' => $this->name,
            'is_countable' => $this->is_countable,
        ]);
        session()->flash('success','Changes applied successfully !');
        Flux::modal('category-modal')->close();
        $this->reset();
    }

    public function delete($id)
    {
        $this->categoryId = $id;
        $cat = Categories::findOrFail($this->categoryId);
        $cat->delete();
        session()->flash('success','Category deleted successfully !');
    }
} 

///

<flux:modal name="category-modal" class="md:w-96">
    <div class="space-y-6">
        <div>
            <flux:heading size="lg">Category Information</flux:heading>
            {{-- <flux:text class="mt-2">Category details.</flux:text> --}}
        </div>
        <flux:input wire:model='name' label="Category name" placeholder="Category name" />

        <flux:radio.group wire:model="is_countable" label="Is this category countable?">
            <flux:radio value="1" label="Yes" checked />
            <flux:radio value="0" label="No" />

        </flux:radio.group>

        <div class="flex">
            <flux:spacer />
            @if ($update)
                <flux:button wire:click='updateCat' icon='pencil-square' size='sm' type="submit" variant="danger">Save Changes
                </flux:button>
            @else
                <flux:button wire:click='save' icon='plus-circle' size='sm' type="submit" variant="primary">Add category
                </flux:button>
            @endif

        </div>
    </div>
</flux:modal>
{{-- @if (session('success'))
    <div class="p-3 bg-green-700 text-white rounded text-center">{{ session('success') }}</div>
@endif --}}

@if (session('success'))
    <flux:callout variant="success" icon="check-circle" heading=" {{ session('success') }}"/> 
@endif
<table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
    <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
        <tr>
            <th scope="col" class="px-3 py-2">
                ID
            </th>
            <th scope="col" class="px-3 py-2">
                Name
            </th>
            <th scope="col" class="px-3 py-2">
                is_countable ?
            </th>
            <th scope="col" class="px-3 py-2" colspan="2">
                Actions
            </th>
        </tr>
    </thead>
    <tbody>

        @forelse ($categories as $category)
        <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 border-gray-200">
            <td class="px-3 py-2">{{ $category->id }}</td>
            <td class="px-3 py-2">{{ $category->name }}</td>
            <td class="px-3 py-2">{{ $category->is_countable }}</td>
            <td><flux:button icon='pencil-square' size='sm' variant='primary' wire:click='edit({{ $category->id }})'>Edit</flux:button> </td>
            <td><flux:button  icon='minus-circle' size='sm' wire:click="delete({{ $category->id }})" wire:confirm='Are you sure deleting {{ $category->name }}?'
                variant="danger">Delete</flux:button></td>
        </tr>
        @empty
            <tr>
                <th colspan="4" class="px-3 py-2" align="center">No category found !</th>
            </tr>
        @endforelse
    </tbody>
</table>