How to use single-spa-vue - 3 common examples

import Vue from 'vue'
import singleSpaVue from 'single-spa-vue';
import App from './App.vue'

Vue.config.productionTip = false;

const vueLifecycles = singleSpaVue({
    Vue,
    appOptions: {
        el: '#app4',
        render: h => h(App)
}
});

export const bootstrap = [
    vueLifecycles.bootstrap,
];

export function mount(props) {
    createDomElement();
    return vueLifecycles.mount(props);
}

import Vue from 'vue';
import singleSpaVue from 'single-spa-vue';
import App from './App.vue'

const vueLifecycles = singleSpaVue({
  Vue,
  appOptions: {
    el: '#vue',
    render: r => r(App)
  } 
});

export const bootstrap = [
  vueLifecycles.bootstrap,
];

export const mount = [
  vueLifecycles.mount,
];

export const unmount = [

import Vue from 'vue/dist/vue.min.js';
import singleSpaVue from 'single-spa-vue';
import DemoGrid from './demo-grid.component.js';
import {showFrameworkObservable, getBorder} from 'src/common/colored-border.js';

const vueLifecycles = singleSpaVue({
  Vue,
  appOptions: {
    el: '#vue-app',
    template: `
      <div id="vue-app">
        <div>
          <div>(built with Vue.js)</div>
          <form id="search">
            <div class="row">
              <div class="input-field col s12">
                <div class="input-field">
                  <input name="query">
                  <label for="query" class="active">Search</label>
                </div>
              </div>
            </div></form></div></div>