Livewire component tag showing weird strings

Hello, I've declared a livewire component that goes by the name "add-article"

it has its own model and blade component

when I reuse the blade component using this tag <livewire:add-article />

it shows this string

< wire:id="zvTZIl428DcClvOG5inZ" wire:initial-data="{"fingerprint":{"id":"zvTZIl428DcClvOG5inZ","name":"add-article","locale":"en"},"effects":{"listeners":[]},"serverMemo":{"children":[],"errors":[],"htmlHash":"250c6c27","data":{"title":null,"body":null,"image":null,"rules":{"title":"required|min:3|max:20","body":"required|min:5|max:256","image":"required"},"messages":{"required":"\u0647\u0630\u0627 \u0627\u0644\u062d\u0642\u0644 \u0645\u0637\u0644\u0648\u0628","body.min":"\u064a\u062c\u0628 \u0623\u0644\u0627 \u064a\u0642\u0644 \u0627\u0644\u0645\u0648\u0636\u0648\u0639 \u0639\u0646 5 \u0627\u062d\u0631\u0641","title.min":"\u064a\u062c\u0628 \u0623\u0644\u0627 \u064a\u0642\u0644 \u0627\u0644\u0639\u0646\u0648\u0627\u0646 \u0639\u0646 \u0663 \u0627\u062d\u0631\u0641"}},"dataMeta":[],"checksum":"0a379aa14e22effc233682470802845d4c28b94e82105e3bf1bfdf11a3d4bab7"}}"!-- Start Add Blog Section -->

here is the index.html part where I declare it

<div class="edit-blog">
                                <!-- Start Add Blog -->
                                <livewire:add-article />
                                <!-- End Add Blog Section -->

and here is the component itself

<!-- Start Add Blog Section -->
<div class="add-blog">
    <div class="card mb-4">
        <div class="card-header">
            <i class="fas fa-chart-area ml-1"></i>
            اضافة مقال
        </div>

        <div class="card-body">
            <!-- Start Form ----------------->
            <form wire:submit.prevent="addArticle">
                <div class="row">
                    <div class="col-12 col-md-6">
                        <div class="form-group">

                            <label for="formGroupExampleInput">عنوان المقال</label>
                            <!-- Blog Title Input
                            -------------------------->
                            <input type="text" wire:model="title" class="form-control" id="formGroupExampleInput">
                            @error('title') <span class="text-danger">{{ $message }}</span> @enderror
                        </div>
                    </div>
                    <div class="col-12 col-md-6">
                        <div class="form-group">
                            <label>اضافة صورة للمقال</label>

                            <!-- Upload Blog Image Input
                            -------------------------->
                            <div class="custom-file">
                                <input type="file" wire:model="image" class="custom-file-input" id="customFile">
                                <label class="custom-file-label" for="customFile">تحميل صورة</label>
                                @error('image') <span class="text-danger">{{ $message }}</span> @enderror
                            </div>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label for="formGroupExampleInput2">محتوى المقال</label>

                    <!-- blog Content
                    -------------------------->
                    <textarea class="form-control" wire:model="body" id="formGroupExampleInput2" cols="30"
                              rows="5"></textarea>
                    @error('body') <span class="text-danger">{{ $message }}</span> @enderror
                </div>

                <!-- button Submit Form
                -------------------------->
                <button class="btn btn-primary">إضافة</button>
            </form>
            <!-- End Form
            --------------->
        </div>
    </div>
</div>