AppHeader.vue

<template>
    <v-app-bar
        app
    color="indigo-lighten-1"
    clipped-left
  >
        <!-- Кнопка раскрытия меню -->
        <v-app-bar-nav-icon
            app
            variant="text"
            @click="drawer =! drawer"
        />
        <!-- Текст в заголовке -->
            <v-app-bar-title  class="headline">
                <span class="justify-center font-weight-light"> {{ title }}</span> <!-- Объект меню  -->
            </v-app-bar-title>
        <v-spacer></v-spacer>
        <!-- Кнопка ЛК/Авторизации -->
        <v-btn
                v-if="authorized"
                href="/auth/logout"
                target="_self"
                icon="mdi-account"
                outlined
                small
        >
        </v-btn>
        <!-- Навигационное меню -->

    </v-app-bar>
  <app-navigation-drawer :drawerStateInput="drawer" />

</template>

<script>

import { ref, watch } from 'vue'
import AppNavigationDrawer from './AppNavigationDrawer.vue'

export default {

    props:{
        title: {
            type:String,
            required:true
        }
    },

    components: {
        AppNavigationDrawer,
    },

    setup() {
        let authorized = ref(false)

    let userPage = ref(null)


        const drawer = ref(false)

        watch(drawer, (newValue) => {
            drawer.value = newValue
    })


        return {
            authorized,
            drawer,
            userPage
        }
    }
}
</script>