Laravel's @vite('resources/js/app.js') and froala editor plugin won't work together

i am using Vue.js based commenting system and inbox messages system in my Laravel website. Also i am using wysiwyg editor (froala editor) in my forms for projects upload etc,

Problem is that i froala editor is not working if i place my app.js asset link in my base app.blade.php file

<script src="{{url("/")}}/assets/bootstrap-5/js/jquery-3.6.1.min.js" data-pagespeed-no-defer   ></script>
<script src="{{asset("assets/bootstrap-5/js/popper.min.js")}}" defer></script>
{{--dasbhoard template's app.js--}}
<script src="{{asset("dashboard/dist/js/app.js")}}"></script>
{{-- including froala scripts files --}}
@include('back.admin.components.froala.footer-scripts-link')
    {{-- app.js for vue app --}}
@vite("resources/js/app.js")


<script src="{{url('/')}}/plugins/select2/dist/js/select2.js" ></script>

<script src="{{url('/')}}/node_modules/compress.js/build/index.js"></script>
<script src="{{url('/')}}/dashboard/dist/js/custom.js"></script>
{{--including froala instance and configuration--}}
@include('back.admin.components.froala.init-and-config')

now this is the way my assets links are placed I have tried moving @vite("resources/js/app.js") up and down to fix this thing but still my froala editor is not working first it was showing an error that there was some issue with sweetalert2 that I used in my vue.js app, I traced that and solved that, but now still froala is not working and there is no error in console tab, editor's layout is loaded completely fine but functions are not working I have clicked every icon and function of the toolbar of editor nothing works, also on click at any function of editor there is no error in the console, I am stuck here completely please guide.

my package.json dependencies object looks like

"dependencies": {
            "autoprefixer": "^10.4.13",
            "compress.js": "^1.2.2",
            "file-loader": "^6.2.0",
            "jquery": "^3.6.1",
            "laravel-echo": "^1.14.1",
            "moment": "^2.29.4",
            "pusher-js": "^7.4.0",
            "sweetalert2": "^11.6.5",
            "tinymce": "^6.2.0",
            "url-loader": "^4.1.1"
        },

I have updated everything to the latest version using npm update. My froala editor version is v4.1.3. Note: I am using froala in blade templates, it is not installed via npm and nither it is being used in vue.js components

I found the solution of this problem we just need to use the alternative initialization method instead of

  var editor = new FroalaEditor('#editorArea',{
   //editor options here

    });

we need to do this way

  document.addEventListener('DOMContentLoaded', function () {
   var editor = new FroalaEditor('#editorArea',{
       //editor options here

     });
     });

and it will work perfectly with Laravel's app.js included on blade template base file