how i can access ref value i a diffrent commponnet file?

here is App.vue

<script setup>
import Nav from "./components/Nav.vue";
</script>

<template>
  <Nav/>
</template>

………………………………………………………….

and here is Nav.vue

<script setup>
import { ref } from "vue";
import plusIcon from "../assets/plusIcon.svg";
import dotsIcon from "../assets/dotsIcon.svg";

import AddCountdownForm from "../components/AddCountdownForm.vue";

const showAddCountdownForm = ref(false);
</script>

<template>
  <div class="relative">
    <nav class="w-full top-0 fixed h-20 bg-gray-200 backdrop-blur-xl mb-14">
      <div
        class="container h-full p-1 flex items-centerm justify-between "
      >
        <!-- add countdown button -->
        <div
          class="my-auto w-14 h-14 p-1 cursor-pointer relative transition-all "
          id="addBtn"
          @click="showAddCountdownForm = true"
        >
          <plusIcon class="fill-indigo-500 h-12 w-12" />
        </div>
        <!-- setting button -->
        <div class="my-auto w-14 h-14 p-1 cursor-pointer relative" id="setting">
          <dotsIcon class="fill-indigo-500 h-12 w-12" />
        </div>
      </div>
    </nav>
    <AddCountdownForm v-show="showAddCountdownForm === true" />
  </div>
</template>

and here is AddCountdownForm.vue

………………………………………………………….

<template>
  <div
    class="h-screen w-full bg-gray-200/50 backdrop-blur-sm relative flex md:justify-center md:items-center"
  >
    <div
      class="absolute h-1/2 w-full bg-gray-300 bottom-0 md:bottom-auto md:w-1/2"
    >
      <div class="w-full bg-white h-12 ml-0">
        <div>close</div>
      </div>
      <div>Text</div>
    </div>
  </div>
</template>

when i click on Plus icon i can show the form but i want to know how to hide it if showAddCountdownForm is in a diffrent file