Livewire 3 and change the other component

The error message $(...).steps is not a function indicates that the steps function from the jQuery Steps library is not being recognized. This could be due to a few reasons:

1. The jQuery Steps library is not being loaded properly.
2. The Livewire component is being re-rendered without re-initializing the jQuery Steps plugin.

To resolve this issue, you can try the following steps:

1. Make sure that the jQuery Steps library and the jQuery Validation library are being loaded correctly. Check that the file paths in the <script> tags are correct and that the files exist in the specified locations.

2. Wrap the jQuery Steps initialization code inside a Livewire wire:ignore directive. This will prevent Livewire from re-rendering the component and breaking the jQuery Steps plugin.

Here's an example of how you can modify the code:

@push('scripts')
    <script src="{{ asset('assets/vendor_components/jquery-steps-master/build/jquery.steps.js')}}"></script>
    <script src="{{ asset('assets/vendor_components/jquery-validation-1.17.0/dist/jquery.validate.min.js')}}"></script>

    <script>
        $(document).ready(function () {
            console.log('ready');

            // Wrap the initialization code inside a Livewire wire:ignore directive
            Livewire.on('submitted-form', function () {
                $('.validation-wizard').steps({
                    headerTag: "h6",
                    bodyTag: "section",
                    transitionEffect: "none",
                    titleTemplate: '<span class="step">#index#</span> #title#',
                    labels: {
                        finish: "Submit"
                    },
                    onStepChanging: function (event, currentIndex, newIndex) {
                        return currentIndex > newIndex || !(3 === newIndex && Number($("#age-2").val()) < 18) && (currentIndex < newIndex && (form.find(".body:eq(" + newIndex + ") label.error").remove(), form.find(".body:eq(" + newIndex + ") .error").removeClass("error")), form.validate().settings.ignore = ":disabled,:hidden", form.valid());
                    },
                    onFinishing: function (event, currentIndex) {
                        return form.validate().settings.ignore = ":disabled", form.valid();
                    },
                    onFinished: function (event, currentIndex) {
                        console.log('finished');
                        Livewire.dispatch('submitted-form');
                    }
                });

                $('.validation-wizard').validate({
                    ignore: "input[type=hidden]",
                    errorClass: "text-danger",
                    successClass: "text-success",
                    highlight: function (element, errorClass) {
                        $(element).removeClass(errorClass);
                    },
                    unhighlight: function (element, errorClass) {
                        $(element).removeClass(errorClass);
                    },
                    errorPlacement: function (error, element) {
                        error.insertAfter(element);
                    },
                    rules: {
                        email: {
                            email: true
                        }
                    }
                });

                $('.repeater').on('change', function (e) {
                    @this.groupa = $('.repeater').repeaterVal();
                });

                $('.repeater').repeater({
                    show: function () {
                        $(this).slideDown();
                    },
                    hide: function (deleteElement) {
                        if (confirm('Are you sure you want to delete this record?')) {
                            $(this).slideUp(deleteElement);
                        }
                    }
                });
            });
        });
    </script>
@endpush

By wrapping the initialization code inside the Livewire wire:ignore directive, the Livewire component will not re-render the code and the jQuery Steps plugin will be initialized properly.

Remember to include the @push and @endpush directives in your Blade template to include the JavaScript code.

I hope this helps! Let me know if you have any further questions.