I'm trying to learn Laravel with Vuejs (v3). I have 3 components: App.vue, Navbar.vue, and Sidebar.vue

What I'm trying to do is, onclick of sidebar-btn:

1. Change value of variable isSidebarActive to !isSidebarActive ---- DONE
2. Change class of fontawesome (dependent on isSidebarActive). ---- DONE
3. Show Sidebar.vue (dependent on isSidebarActive)

I tried using props but error says I can't change the value, so I tried using emits but I still can't seem to get it right.

app.js

require('./bootstrap');

import { createApp }    from 'vue'
import App              from './App.vue'
import router           from './routes'

// Partials
import Navbar           from './components/Navbar.vue'
import Sidebar          from './components/Sidebar.vue'

createApp(App)
.component('navbar', Navbar)
.component('sidebar', Sidebar)
.use(router)
.mount('#app')

App.vue

<template>
    <navbar></navbar>
    <sidebar v-bind:class="{ active: isSidebarActive }"></sidebar>

    <router-view></router-view>
</template>

<script>
export default {
    name: "App",
    data() {
        return {
            isSidebarActive: false,
        };
    },
}
</script>

Navbar.vue

<template>
<nav class="navbar navbar-expand-md navbar-dark bg-dark shadow-sm sticky-top">
    <div class="container">
        <div class="navbar-brand" >
            <span class="h4">
                Hello World!
            </span>

            <!-- Button to toggle Sidebar -->
            <span class="btn btn-outline-light btn-sm ms-2" id="sidebar-btn" style="border: 1px white" @click="toggleSidebar()">
                <i v-bind:class="[isSidebarActive ? 'fas fa-arrow-left' : 'fas fa-bars']" title="Sidebar Menu"></i>
            </span>
        </div>
    </div>
</nav>
</template>

<script>
export default {
    name: "Navbar",
    data() {
        return {
            isSidebarActive: false,
        };
    },
    emits: ['isSidebarActive'],
    methods: {
        toggleSidebar:function () {
            this.isSidebarActive = !this.isSidebarActive
            this.$emit("isSidebarActive", this.isSidebarActive)
        },
    },
}
</script>