How do i install 3rd party node modules, init it and pass it to other html page to use?

Hi , i have this 2 code ,

js/app.js

//*** this is where i import the 3rd party node module that i npm installed it...
import { Auth, BaseModel, Model, Rpc, Utils } from 'orm-webkit/lib/index.js';

// Import main app component
import App from '../app.f7.html';

//this is where i initialize the Authentication class , using constant ...
const auth = new Auth();
//after that i not sure where should i putting my auth from this app.js so that
//my other html template pages can make use of it ...

var app = new Framework7({
  root: '#app', // App root element
  component: App, // App main component

  name: 'mos_app', // App name
  theme: 'auto', // Automatic theme detection
  // App root data
  data() {
    return {
        apiUrl: "https://api.hnpwa.com/v0/",
        api: null ,
        auth: auth    <====== this is where i tried to pass the auth variable initialized above 
    }
  },
  // App routes
  routes: routes,
});

But in my other html page ,i.e. home.f7.html , such as as below ,

<template>
  <div class="page" data-name="home">
    <!-- Top Navbar -->
    <div class="navbar navbar-large">
      <div class="navbar-bg"></div>
      <div class="navbar-inner">
        <div class="left">
          <a href="#" class="link icon-only panel-open" data-panel="left">
            <i class="icon f7-icons if-not-md">menu</i>
            <i class="icon material-icons if-md">menu</i>
          </a>
        </div>
        <div class="title sliding">mos_app</div>
        <div class="right">
          <a href="#" class="link icon-only panel-open" data-panel="right">
            <i class="icon f7-icons if-not-md">menu</i>
            <i class="icon material-icons if-md">menu</i>
          </a>
        </div>
        <div class="title-large">
          <div class="title-large-text">mos_app</div>
        </div>
      </div>
    </div>
    <!-- Toolbar-->
    <div class="toolbar toolbar-bottom">
      <div class="toolbar-inner">
        <a href="#" class="link">Left Link</a>
        <a href="#" class="link">Right Link</a>
      </div>
    </div>
    <!-- Scrollable page content-->
    <div class="page-content">
      <div class="block block-strong">
        <p>Here is your blank Framework7 app. Let's see what we have here.</p>
      </div>

      <div class="block-title">Navigation</div>
      <div class="list">
        <ul>
          <li>
            <a href="/about/" class="item-content item-link">
              <div class="item-inner">
                <div class="item-title">About</div>
              </div>
            </a>
          </li>
          <li>
            <a href="/form/" class="item-content item-link">
              <div class="item-inner">
                <div class="item-title">Form</div>
              </div>
            </a>
          </li>
        </ul>
      </div>

      <div class="block-title">Modals</div>
      <div class="block block-strong">
        <div class="row">
          <div class="col-50">
            <a href="#" class="button button-raised button-fill popup-open" data-popup="#my-popup">Popup</a>
          </div>
          <div class="col-50">
            <a href="#" class="button button-raised button-fill login-screen-open" data-login-screen="#my-login-screen">Login Screen</a>
          </div>
        </div>
      </div>

      <div class="block-title">Panels</div>
      <div class="block block-strong">
        <div class="row">
          <div class="col-50">
            <a href="#" class="button button-raised button-fill panel-open" data-panel="left">Left Panel</a>
          </div>
          <div class="col-50">
            <a href="#" class="button button-raised button-fill panel-open" data-panel="right">Right Panel</a>
          </div>
        </div>
      </div>

      <div class="list links-list">
        <ul>
          <li>
            <a href="/dynamic-route/blog/45/post/125/?foo=bar#about">Dynamic (Component) Route</a>
          </li>
          <li>
            <a href="/load-something-that-doesnt-exist/">Default Route (404)</a>
          </li>
          <li>
            <a href="/request-and-load/user/123456/">Request Data & Load</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>

 //Q1. How I get the value of my *** auth ** variable here ?
 //Q2. Do i have to put my auth variable within the export default { }  below ?
 //Q3. How do i get my f7 variable , i.e. the app variable created var app = new Framework7 ?

  export default {
    on: {
      pageMounted: function() {
          console.log(self);
      },
    }
  }
</script>

I have listed my questions Q1 , Q2 and Q3 above,
Appreciate for any advice or assistance for my ES6 JS script beginner questions, thanks.

Q1/Q2:

i never done it this way, i use vue + vuex. but give it a try,

Doc explanation:

$root If you use Main App Component then it refers to its instance.

Otherwise, it refers to root data and methods you have specified in data and methods properties on app init

Doc example:

var app = new Framework7({
  // root data
  data: function () {
    return {
      username: 'johndoe'
    }
  },
  // root methods
  methods: {
    helloWorld: function () {
      app.dialog.alert('Hello world!');
    }
  }
});

// then in component:
console.log(this.$root.username); // -> 'johndoe';

this.$root.helloWorld(); // -> call alert

so try something like this:

  export default {
    on: {
      pageMounted: function() {
          console.log(this.$root.auth);
      },
    }
  }

Docs:
https://framework7.io/docs/router-component.html#component-context

Q3:

console.log(this)