app_vue2/components/Layout/HeaderComponent.vue

<template>
  <v-app-bar
    :clipped-left="properties.clipped"
    fixed
    app
    class="ot_green ot_white--text"
  >
    <v-btn
      class="menu-btn"
      icon
      @click.stop="properties.miniVariant = !properties.miniVariant"
    >
      <v-icon class="ot_white--text">mdi-menu{{ `${properties.miniVariant ? '' : '-open'}` }}</v-icon>
    </v-btn>

    <v-toolbar-title v-text="properties.title" />

    <v-spacer />

  </v-app-bar>
</template>

<script lang="ts">
  import {defineComponent, reactive, useContext} from '@nuxtjs/composition-api'

  export default defineComponent({
    setup() {
      const {store} = useContext();

      const properties = reactive({
        clipped: true,
        fixed: true,
        miniVariant: false,
        title: store.state.profile.organization.name
      })

      return {
        properties
      }
    }
  })
</script>

<style scoped>

</style>