Modal work but it won't display properly when calling form another Vuejs component

I have a modal in a child vue component called from a parent component, when triggering and calling it the page get effected and get “modal-open” added to the body, but the modal it self doesn’t show.

this is my index.blade.php file:

@extends('layouts.app')
@section('header')
<header class="header header-inverse bg-fixed" style="background-image: url({{asset('assets/img/bg-laptop.jpg')}})" data-overlay="8">
    <div class="container text-center">
        <div class="row">
            <div class="col-12 col-lg-8 offset-lg-2">
                <h1>{{ $series->title }}</h1>
                <p class="fs-18 opacity-70">Customize series lessons</p>
            </div>
        </div>
    </div>
</header>
@endsection
@section('content')
<div class="section" style="background-color: black">
    <div class="container">
        <div class="row gap-y">
            <div class="col-12">

                <vue-lsns default_lessons="{{$series->lessons}}"></vue-lsns>

            </div>
        </div>
    </div>
</div>
@endsection

this is my lessons.vue file:

<template>
<div class="container text-center" style="font-weight: bold;">
    <h1 class="text-center">
        <button class="btn btn-primary" @click="createNewLesson()">
            Create New Lesson
        </button>
    </h1>
    <ul class="list-group" style="background-color: white;">
        <li class="list-group-item" v-for="lesson in formattedLessons">
            {{lesson.title}}
        </li>
    </ul>
    <create-lesson></create-lesson>
</div>
</template>
<script>
export default {
    name: "Lessons",
    props: ['default_lessons'],
    components: {
        "create-lesson": require('./children/CreateLesson')
    },
    data(){
        return{
            lessons: this.default_lessons
        }
    },
    computed: {
        formattedLessons(){
            return JSON.parse(this.lessons)
        }
    },
    methods:{
        createNewLesson(){
            this.$emit('create-new-lesson')
        }
    }
}
</script>

this is my CreateLesson.vue file:

<template>
<!-- Modal -->
<div class="modal fade" id="createLessonModal" role="dialog" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Create New Lesson</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                .................
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>
</template>
<script>
export default {
    name: "CreateLesson",
    mounted(){
        this.$parent.$on('create-new-lesson', () => {
            console.log('Hi Parent')
            $('#createLessonModal').modal()
        })
    }
}
</script>

Hi @abunima,

This post was moved to a different board that fits your topic of discussion a bit better. This means you’ll get better engagement on your post, and it keeps our community organized so users can more easily find information.

As you’ll notice, your topic is now here in the Project Development Help and Advice board. No action is needed on your part; you can continue the conversation as normal here.

Cheers!