Merhabalar yine ben Web Geliştirme de avare avare geziniyorum yine. Bu sefer ki sorunum VueJS üzerine...

Sorunum şu ki geliştirdiğim proje de bir tema değiştirici yapmaya çalışıyorum fakat emit() yapısı çalışmıyor..

Navbar.vue


<script setup>
  import { RouterLink, RouterView } from 'vue-router'

  defineProps(['mode'])
  defineEmits(['toggle'])

</script>
<template>
  <div>
    <nav class="navbar navbar-expand-lg" id="navbar">
      <div class="container-fluid">
        <a href="/" class="navbar-brand">
          <span>osman<span>beyhan</span></span>
        </a>
        <div class="iconsTwo">
          <i class="bi bi-sun-fill d-block d-lg-none" id="icon" @click="$emit('toggle')"></i>
          <i class="bi bi-list navbar-toggler" data-bs-toggle="offcanvas" href="#offcanvasMenu" aria-controls="offcanvasMenu"></i>
        </div>
        <div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasMenu" aria-labelledby="offcanvasMenuLabel">
          <div class="offcanvas-header">
            <h5 class="offcanvas-title" id="offcanvasMenuLabel">
              <a href="/">
                <span>osman<span>beyhan</span></span>
              </a>
            </h5>
            <i class="bi bi-x-lg btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></i>
          </div>
          <div class="offcanvas-body">
            <ul class="navbar-nav">
              <li class="nav-item">
                <a class="" href="/about">About Me</a>
              </li>
              <li class="nav-item">
                <a class="" href="/projects">Projects</a>
              </li>
              <li class="nav-item">
                <a class="" href="/contact">Contact</a>
              </li>
            </ul>
            <hr id="line">
            <ul class="nav-item  d-flex d-md-flex" id="icons">
              <li>
                <a class="" target="_blank" href="https://www.instagram.com/osmn_byhn/?hl=tr">
                  <i class="fa-brands fa-instagram"></i>
                </a>
              </li>
              <li>
                <a class="" target="_blank"  href="https://github.com/osmn-byhn">
                  <i class="fa-brands fa-github"></i>
                </a>
              </li>
              <li>
                <a class="" target="_blank"  href=" https://wa.me/905350217844">
                  <i class="fa-brands fa-whatsapp"></i>
                </a>
              </li>
              <li>
                <a class="" target="_blank"  href="https://www.linkedin.com/in/osman-beyhan-12304b23a/">
                  <i class="fa-brands fa-linkedin"></i>
                </a>
              </li>
              <br>
              <li id="ayrac" class="d-none d-lg-block"> | </li>
              <li>
                <i class="bi bi-sun-fill d-none d-lg-block mysun" id="icon"></i>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </nav>
  </div>
</template>

<style lang="scss" scoped>
  @import '/public/Navbar.scss';
  @import '/public/Theme.scss';

</style>

App.vue


<script setup>
  import { RouterLink, RouterView } from 'vue-router'
  import Navbar from './components/Navbar.vue'
  
  defineProps({
    mode: {
      type: String,
      default: 'dark'
    }
  })

  function toggle() {
    if (this.mode === "dark") {
      this.mode = "light"
      console.log(mode)
    } else {
      this.mode = "dark"
      console.log(mode)

    }
  }
</script>

<template>
  <div class="app" :class="mode">
    <Navbar :mode="mode" @toggle="toggle" />
    <RouterView />
  </div>
</template>

<style scoped lang="scss">
  @import '../public/App.scss';
  @import '../public/Theme.scss';

</style>

icon id'li güneş ikonuna tıklandığında mode değerini light ile değiştirilmesini istiyorum. fakat App.vue içindeki toggle fonksiyonu çalışmıyor veya erişemiyorum ve şu hata ile karşılaşıyorum:

yardım ederseniz sevinirim 😁