How to make vue3 darkmode with props and localstorage?

I have 2 vue file and I want to make darkMode. When I click on the image on Navbar there is no effect on Content.vue. I tried with props but it dont work because I import Navbar in Content.vue not the opposite. I use localstorage, but its not reactive, so if I click the image in navbar the content is not reacts.

Navbar.vue

  <template>
      <nav class="navbar">  
          <ul>
            <img
              src="https://img.icons8.com/android/48/ffffff/sun.png"
              @click="darkMode = !darkMode"
              v-if="darkMode"
            />
            <img
              src="https://img.icons8.com/ios-filled/50/ffffff/moon-man.png"
              @click="darkMode = !darkMode"
              v-if="!darkMode"
            />
          </ul>
        </div>
      </nav>
    </template>

<script>
export default {
  name: "Navbar",
  data() {
    return {
      darkMode: "",
    };
  },
  watch: {
    darkMode: function () {
      localStorage.setItem("darkMode", this.darkMode);
    },
  },
  created() {
    this.darkMode = localStorage.getItem("darkMode");
  },
  mounted() {
    if (localStorage.getItem("darkMode") == "true") {
      this.darkMode = true;
    } else {
      this.darkMode = false;
    }
  },
};
</script>    

Content.vue

<template>
  <Navbar />
  <div :class="{ dark: dark }">
    <h1>Test</h1>
  </div>
  </div>
</template>

<script>
import Navbar from './Navbar'
export default {
  name: "Content",
  components: { Navbar },
  data() {
    return {
    };
  },
};
</script>