Vue define a custom component

Questions
1

Below is a quick simple example of what I am trying to accomplish. I have been having issues finding any examples that work for the newest version. I simply want to declare the component and use it within my page templates. It would be great if someone created a tutorial or any documentation on how to work this into the framework.

Below is what I have been trying based on a v2 example and I dont know if the code even worked then.

<template>
  <f7-navbar transparent>
      <f7-nav-left>
        <f7-link icon-ios="f7:menu" icon-aurora="f7:menu" icon-md="material:menu" href="/leftsidebar/" data-ignore-cache="true"></f7-link>
      </f7-nav-left>
      <f7-nav-right>
        <f7-link icon-ios="f7:person_fill" icon-aurora="f7:person_fill" icon-md="material:person" href="/rightsidebar/" data-ignore-cache="true"></f7-link>
      </f7-nav-right>
    </f7-navbar>
</template>
<script>
import { defineComponent } from '@vue/composition-api';
import { f7Navbar, f7NavLeft, f7NavRight,f7Link } from 'framework7-vue';
export default defineComponent({
  name: 'myheader',
  components: {
    f7Navbar, 
    f7NavLeft, 
    f7NavRight,
    f7Link
  },
  props: {
    title: { type: String, required: false, default: '' },
  },
});
</script>

Below is the page Code

<template>
  <f7-page theme-dark>
    <myheader></myheader>
  </f7-page>
</template>
<script>
  import myheader from '@/components/header.vue';
  export default {
    components: {
      myheader,
    },
    props: {
      f7router: Object,
    },
    data() {
      return {
        
      };
    },
    methods: {
     
    },
  }
</script>

And Finally this is my app.js file

// Import Vue
import { createApp, Vue } from 'vue';
// Composition API
import VueCompositionApi from '@vue/composition-api';
// Import Framework7
import Framework7 from 'framework7/lite-bundle';
// Import Framework7-Vue Plugin
import Framework7Vue, { registerComponents } from 'framework7-vue/bundle';
// Import Framework7 Styles
import 'framework7/framework7-bundle.css';
// Import Icons and App Custom Styles
import '../css/icons.css';
import '../css/app.css';
// Import App Component
import App from '../components/app.vue';
// Init Framework7-Vue Plugin
Framework7.use(Framework7Vue);
Vue.use(VueCompositionApi);
Vue.config.productionTip = true;
// Init App
const app = createApp(App);
// Register Framework7 Vue components
registerComponents(app);
// Mount the app
app.mount('#app');

Any help on figuring this out is greatly appreciated.

2 
<template>
  <f7-page theme-dark>
    <template #fixed>
      <myheader></myheader>
    </template>
  </f7-page>
</template>
3

It is not in the HTML. The issue is in the way I have to declare the libraries. I receive errors in reference to using

import { defineComponent } from '@vue/composition-api';

and

Vue.use(VueCompositionApi);
Vue.config.productionTip = true;