Executing bootstrap vue component with vuejs 3 without webpack

I want to integrate a component into existing legacy application which uses angular js 1. I want to replace it with vuejs 3 and problem is that I cannot use webpack. I have created a standalone webpage with vuejs3 and bootstrap vue but somehow the component does not render. Any help or guidance what I am doing wrong? Is it doable with vuejs 3 to run a standalone component without any webpack?

Interesting thing is that it render the html page with a warning in console.

Index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Test</title>
  <!-- Add Bootstrap and Bootstrap-Vue CSS to the <head> section -->
  <link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css"/>
  <link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css"/>

<!-- Add Vue and Bootstrap-Vue JS just before the closing </body> tag -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.1/vue.global.js"></script>
<script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>
</head>

<body>
  <h1>Static HTML With Vue.js Single File Component</h1>

  <div id="app">
    
  </div>

  <script type="module">
    import app from './app.js'
    const {createApp} = Vue;
    createApp(app).mount('#app');
</script>
</body>
</html>

app.js

export default {
    data() {
      return {
        perPage: 3,
        currentPage: 1,
        items: [
          { id: 1, first_name: 'Fred', last_name: 'Flintstone' },
          .............
        ]
      }
    },
    computed: {
      rows() {
        return this.items.length
      }
    },
  
    template: `
        <div class="overflow-auto">
    <b-table
      id="my-table"
      :items="items"
      :per-page="perPage"
      :current-page="currentPage"
      small
    ></b-table>
    <b-pagination v-model="currentPage"  :total-rows="rows"  :per-page="perPage"  aria-controls="my-table"></b-pagination>

    <p class="mt-3">Current Page: {{ currentPage }}</p>

  </div>
    `,
};