app-bar.ts

import { inject, ref, provide } from '@vue/composition-api';

export function useAppBarProviders() {
  const title = ref('');

  function updateTitle(newTitle: string) {
    title.value = newTitle;
  }

  provide('updateAppBarTitle', updateTitle);

  return { title };
}

export function useAppBarInjections(title?: string) {
  const updateAppBarTitle = inject<(title: string) => void>(
    'updateAppBarTitle'
  );

  if (!updateAppBarTitle) {
    throw new Error(
      "We could not find injections provided by 'useAppBarProviders', make sure to call it on an ancestor of this component"
    );
  }

  if (title) {
    updateAppBarTitle(title);
  }

  return { updateAppBarTitle };
}

home.vue

<script lang="ts">
import { defineComponent } from '@vue/composition-api';
import { useAppBarInjections } from 'composables/app-bar';

export default defineComponent({
  name: 'PageHome',
  setup() {
    useAppBarInjections('Home page title');
  }
});
</script>

main-layout.vue

<script lang="ts">
import { defineComponent } from '@vue/composition-api';
import { useAppBarProviders } from 'composables/app-bar';

export default defineComponent({
  name: 'MainLayout',
  setup() {
    const leftDrawerOpen = ref(false);
  
    return {
      leftDrawerOpen,
      ...useAppBarProviders(),
    };
  },
});
</script>

<template>
  <q-layout view="lHh Lpr lFf">
    <q-header elevated>
      <q-toolbar>
        <q-btn
          flat
          dense
          round
          icon="mdi-menu"
          aria-label="Menu"
          @click="leftDrawerOpen = !leftDrawerOpen"
        />

        <q-toolbar-title class="text-weight-bold q-ml-lg">{{
          title
        }}</q-toolbar-title>
      </q-toolbar>
    </q-header>
    
    <!-- other stuff -->
  </q-layout>
</template>