Unable to call component method. Public method [onRobortsGenerator] not found on component: [frontend.pages]

Hello, I'm new to livewire & alpine JS, so I'm trying to do a RobotsGenerator tool the component has the render function plus the onRobortsGenerator function which will record the history in the backend onClick the button to generate the robots txt, but when I try to click the button it shows unable to call the component method.

Here is my component code:

namespace App\Http\Livewire\Frontend\Tools;

use App\Services\BaseComponent;

class RobotsGenerator extends BaseComponent
{  
    public function onRobortsGenerator(){
        $this->toolHistory('Robots Generator');
        dd("You run on me");
    }

    public function render(){
        return view('livewire.frontend.tools.robots-generator');
    }
}

BaseComponent:

namespace App\Services;

use Livewire\Component;
use App\Models\Admin\History;
use DateTime;
use GeoIp2\Database\Reader;
use GeoIp2\Exception\AddressNotFoundException;

class BaseComponent extends Component
{
    public function toolHistory(string $toolName)
    {
        $history             = new History;
        $history->tool_name  = "$toolName";
        $history->client_ip  = request()->ip();

        require app_path('Classes/geoip2.phar');

        $reader = new Reader(app_path('Classes/GeoLite2-City.mmdb'));

        try {

            $record           = $reader->city(request()->ip());

            $history->flag    = strtolower($record->country->isoCode);

            $history->country = strip_tags($record->country->name);
        } catch (AddressNotFoundException $e) {}

        $history->created_at = new DateTime();
        $history->save();
    }
}

and my blade is:

<script defer src="https://unpkg.com/[email protected]/dist/cdn.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.8.1/ace.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.8.1/theme-clouds.min.js"></script>
<script>
    "use strict";
    document.addEventListener('livewire:load', function() {
        window.RobotstxtComponent = function() {
            console.log("This");
            return {
                usual: 'allowed',
                delay: 'default',
                sitemap: '',
                dirs: '',

                google: 'allowed',
                google_images: 'allowed',
                google_mobile: 'allowed',
                msn: 'allowed',
                yahoo: 'allowed',
                yahoo_mm: 'allowed',
                yahoo_blogs: 'allowed',
                ask: 'allowed',
                gigablast: 'allowed',
                dmoz: 'allowed',
                nutch: 'allowed',
                alexa: 'allowed',
                baidu: 'allowed',
                naver: 'allowed',
                msn_pic: 'allowed',

                text: '',

                editor: null,

                init() {
                    this.editor = ace.edit(this.$refs.editor);
                    this.editor.session.setOption("showPrintMargin", false);
                },

                generate() {
                    this.text = '';

                    this.text +=
                        `\nUser-agent: Googlebot\nDisallow: ${this.google == 'allowed' ? '' : '/'}`;
                    this.text +=
                        `\nUser-agent: googlebot-image\nDisallow: ${this.google_images == 'allowed' ? '' : '/'}`;
                    this.text +=
                        `\nUser-agent: googlebot-mobile\nDisallow: ${this.google_mobile == 'allowed' ? '' : '/'}`;
                    this.text +=
                        `\nUser-agent: Robozilla\nDisallow: ${this.dmoz == 'allowed' ? '' : '/'}`;
                    this.text +=
                        `\nUser-agent: Slurp\nDisallow: ${this.yahoo == 'allowed' ? '' : '/'}`;
                    this.text +=
                        `\nUser-agent: Gigabot\nDisallow: ${this.gigablast == 'allowed' ? '' : '/'}`;
                    this.text +=
                        `\nUser-agent: MSNBot\nDisallow: ${this.msn == 'allowed' ? '' : '/'}`;
                    this.text +=
                        `\nUser-agent: Teoma\nDisallow: ${this.ask == 'allowed' ? '' : '/'}`;
                    this.text +=
                        `\nUser-agent: Nutch\nDisallow: ${this.nutch == 'allowed' ? '' : '/'}`;
                    this.text +=
                        `\nUser-agent: baiduspider\nDisallow: ${this.baidu == 'allowed' ? '' : '/'}`;
                    this.text +=
                        `\nUser-agent: naverbot\nDisallow: ${this.naver == 'allowed' ? '' : '/'}`;
                    this.text +=
                        `\nUser-agent: yeti\nDisallow: ${this.naver == 'allowed' ? '' : '/'}`;
                    this.text +=
                        `\nUser-agent: yahoo-mmcrawler\nDisallow: ${this.yahoo_mm == 'allowed' ? '' : '/'}`;
                    this.text +=
                        `\nUser-agent: psbot\nDisallow: ${this.msn_picsearch == 'allowed' ? '' : '/'}`;
                    this.text +=
                        `\nUser-agent: yahoo-blogs/v3.9\nDisallow: ${this.yahoo_blogs == 'allowed' ? '' : '/'}`;
                    this.text +=
                        `\nUser-agent: ia_archiver/v3.9\nDisallow: ${this.alexa == 'allowed' ? '' : '/'}`;

                    this.text += `\nUser-agent: *\nDisallow: ${this.usual == 'allowed' ? '' : '/'}`;

                    if (this.delay != 'default')
                        this.text += '\nCrawl-delay: ' + this.delay;

                    this.dirs.split(',').forEach(item => {
                        if (item.trim())
                            this.text += '\nDisallow: ' + item;
                    });

                    if (this.sitemap)
                        this.text += '\nSitemap: ' + this.sitemap;

                    this.editor.session.setValue(this.text);
                }
            }
        }
    });
</script>
<div>

    <form wire:submit.prevent="onRobortsGenerator">

        <div x-data="window.RobotstxtComponent()">
            <div class="row">
                <div class="col-md-6 col-12">
                    <div class="form-group">
                        <label class="custom-label">{{ __('Default for All Robots') }}</label>
                        <select x-model="usual" class="custom-input form-select">
                            <option selected value="allowed">{{ __('Allowed') }}
                            </option>
                            <option value="refused">{{ __('Refused') }}</option>
                        </select>
                    </div>
                </div>

                <div class="col-md-6 col-12">
                    <div class="form-group">
                        <label class="custom-label">{{ __('Crawl Delay') }}</label>
                        <select x-model="delay" class="custom-input form-select">
                            <option selected value="default">None</option>
                            <option value="5">5 Seconds</option>
                            <option value="10">10 Seconds</option>
                            <option value="20">20 Seconds</option>
                            <option value="60">60 Seconds</option>
                            <option value="120">120 Seconds</option>
                        </select>
                    </div>
                </div>
            </div>

            <div class="form-group mb-3">
                <div class="row g-2">
                    <div class="col-md-12">
                        <label class="custom-label">{{ __('Sitemap') }}</label>
                        <input x-model="sitemap" type="text" class="custom-input"
                            placeholder="{{ __('Sitemap URL') }}">
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-4 col-12">
                    <div class="form-group">
                        <label class="custom-label">Google</label>
                        <select x-model="google" class="custom-input form-select">
                            <option selected value="allowed">{{ __('Allowed') }}</option>
                            <option value="refused">{{ __('Refused') }}</option>
                        </select>
                    </div>
                </div>

                <div class="col-md-4 col-12">
                    <div class="form-group">
                        <label class="custom-label">Google Images</label>
                        <select x-model="google_images" class="custom-input form-select">
                            <option selected value="allowed">{{ __('Allowed') }}</option>
                            <option value="refused">{{ __('Refused') }}</option>
                        </select>
                    </div>
                </div>

                <div class="col-md-4 col-12">
                    <div class="form-group">
                        <label class="custom-label">Google Mobile</label>
                        <select x-model="google_mobile" class="custom-input form-select">
                            <option selected value="allowed">{{ __('Allowed') }}</option>
                            <option value="refused">{{ __('Refused') }}</option>
                        </select>
                    </div>
                </div>

                <div class="col-md-4 col-12">
                    <div class="form-group">
                        <label class="custom-label">MSN Search</label>
                        <select x-model="msn" class="custom-input form-select">
                            <option selected value="allowed">{{ __('Allowed') }}</option>
                            <option value="refused">{{ __('Refused') }}</option>
                        </select>
                    </div>
                </div>

                <div class="col-md-4 col-12">
                    <div class="form-group">
                        <label class="custom-label">Yahoo</label>
                        <select x-model="yahoo" class="custom-input form-select">
                            <option selected value="allowed">{{ __('Allowed') }}</option>
                            <option value="refused">{{ __('Refused') }}</option>
                        </select>
                    </div>
                </div>

                <div class="col-md-4 col-12">
                    <div class="form-group">
                        <label class="custom-label">Yahoo MM</label>
                        <select x-model="yahoo_mm" class="custom-input form-select">
                            <option selected value="allowed">{{ __('Allowed') }}</option>
                            <option value="refused">{{ __('Refused') }}</option>
                        </select>
                    </div>
                </div>

                <div class="col-md-4 col-12">
                    <div class="form-group">
                        <label class="custom-label">Yahoo Blogs</label>
                        <select x-model="yahoo_blogs" class="custom-input form-select">
                            <option selected value="allowed">{{ __('Allowed') }}</option>
                            <option value="refused">{{ __('Refused') }}</option>
                        </select>
                    </div>
                </div>

                <div class="col-md-4 col-12">
                    <div class="form-group">
                        <label class="custom-label">Ask/Teeoma</label>
                        <select x-model="ask" class="custom-input form-select">
                            <option selected value="allowed">{{ __('Allowed') }}</option>
                            <option value="refused">{{ __('Refused') }}</option>
                        </select>
                    </div>
                </div>

                <div class="col-md-4 col-12">
                    <div class="form-group">
                        <label class="custom-label">GigaBlast</label>
                        <select x-model="gigablast" class="custom-input form-select">
                            <option selected value="allowed">{{ __('Allowed') }}</option>
                            <option value="refused">{{ __('Refused') }}</option>
                        </select>
                    </div>
                </div>

                <div class="col-md-4 col-12">
                    <div class="form-group">
                        <label class="custom-label">DMOZ Checker</label>
                        <select x-model="dmoz" class="custom-input form-select">
                            <option selected value="allowed">{{ __('Allowed') }}</option>
                            <option value="refused">{{ __('Refused') }}</option>
                        </select>
                    </div>
                </div>

                <div class="col-md-4 col-12">
                    <div class="form-group">
                        <label class="custom-label">Nutch</label>
                        <select x-model="nutch" class="custom-input form-select">
                            <option selected value="allowed">{{ __('Allowed') }}</option>
                            <option value="refused">{{ __('Refused') }}</option>
                        </select>
                    </div>
                </div>

                <div class="col-md-4 col-12">
                    <div class="form-group">
                        <label class="custom-label">Alexa / Wayback</label>
                        <select x-model="alexa" class="custom-input form-select">
                            <option selected value="allowed">{{ __('Allowed') }}</option>
                            <option value="refused">{{ __('Refused') }}</option>
                        </select>
                    </div>
                </div>

                <div class="col-md-4 col-12">
                    <div class="form-group">
                        <label class="custom-label">Baidu</label>
                        <select x-model="baidu" class="custom-input form-select">
                            <option selected value="allowed">{{ __('Allowed') }}</option>
                            <option value="refused">{{ __('Refused') }}</option>
                        </select>
                    </div>
                </div>

                <div class="col-md-4 col-12">
                    <div class="form-group">
                        <label class="custom-label">Naver</label>
                        <select x-model="naver" class="custom-input form-select">
                            <option selected value="allowed">{{ __('Allowed') }}</option>
                            <option value="refused">{{ __('Refused') }}</option>
                        </select>
                    </div>
                </div>

                <div class="col-md-4 col-12">
                    <div class="form-group">
                        <label class="custom-label">MSN PicSearch</label>
                        <select x-model="msn_pic" class="custom-input form-select">
                            <option selected value="allowed">{{ __('Allowed') }}</option>
                            <option value="refused">{{ __('Refused') }}</option>
                        </select>
                    </div>
                </div>
            </div>

            <div class="form-group">
                <label class="custom-label">{{ __('Disallowed Directories') }}</label>
                <input x-model="dirs" type="text" class="custom-input"
                    placeholder="{{ __('Comma Separated Disallowed Directories') }}">
            </div>

            <div class="col-12 col-md-12" x-cloak x-show="text">
                <div x-ref="editor" id="editor" class="form-control"></div>
            </div>
        </div>

        <div class="form-group mb-3 text-center" wire:click="onRobortsGenerator">
            <button class="btn btn-info" wire:loading.attr="disabled" x-on:click="generate()">
                <span>
                    <div wire:loading.inline wire:click="onRobortsGenerator">
                        <x-loading />
                    </div>
                    <span wire:click="onRobortsGenerator">{{ __('Generate Robots.txt') }}</span>
                </span>
            </button>
        </div>
    </form>
</div>