How can I make a modal window open from another file? I can't seem to figure out why it's not working.
file 1:
<template>
<section class="header">
<div class="header-container">
<div class="header_start">
<a href="#!" class="header__logo">YooMoney</a>
</div>
<div class="header-buttons_end">
<button class="header_button" @click="isOpen = true; console.log('Button clicked')">Sign In</button>
<teleport to="body">
<Authorization v-if="isOpen" />
</teleport>
</div>
</div>
</section>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import Authorization from "@/components/ModalWindow/Authorization.vue";
const isOpen = ref(false)
</script>
file 2:
<template>
<MazDialog v-model="isOpen" title="Dialog Title">
<p>
Your content
</p>
<template #footer="{ close }">
<MazBtn @click="close">
Confirm
</MazBtn>
</template>
</MazDialog>
</template>
<script setup>
import { ref } from 'vue'
import MazDialog from 'maz-ui/components/MazDialog'
const isOpen = ref(false)
</script>
Uh, excuse me. I'm just learning.
When I click on 'Sign in', I want to open a modal window from another file.
I'm using nuxt.