Uncaught ReferenceError: hello is not defined

I am trying to use vue router and I get the error in the title. Can someone help?

main.js:10 Uncaught ReferenceError: hello is not defined
    at main.js:10:28

line 10: { path: '/h', component: hello, name: 'hello'},

main.js

Vue.use(httpVueLoader);
httpVueLoader.register(Vue, 'hello.vue');

var Home = Vue.extend({
  template: '#home'
});

const routes = [
  { path: '/', component: Home},
  { path: '/h', component: hello, name: 'hello'},
]
const router = new VueRouter({
  routes   //  short for `routes: routes`
});

var app = new Vue({
  router,
  el: '#app',
  // components: {
  //   'hello': window.httpVueLoader('./hello.vue'),
  // },  
  data: function () {
    return {
      activeUser: 'aba',
      state: ""
    };  
  },
});
app.use(router);
app.mount('#app');

hello.vue

<template id="hello">
  <div >
    <div>
      <hr/>
      This is hello.vue  component 
    </div>
  </div>
</template>

<script>
  export default {
    name: "hello",
    template: '#hello',
    data() {
      return {
        state01: ""
      };
    }
  };
</script>

index.html

<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title>Vcdn5</title>
  <!-- <meta name="viewport" content="width=device-width, initial-scale=1"> -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/3.6.2/vue-router.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-vue/2.22.0/bootstrap-vue.min.js"></script> 
  <script src="https://cdn.jsdelivr.net/npm/http-vue-loader@1.3.5"></script>
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
  <script type="module" src="./src/main.js"></script>
</head>
<body>
<!-- ================================================= -->
<main id="app">
  <div>
    <b-navbar toggleable="md" type="dark" variant="dark">
      <b-navbar-toggle target="nav_collapse"></b-navbar-toggle>
      <b-navbar-brand to="/">Vuecdn5</b-navbar-brand>
      <b-collapse is-nav id="nav_collapse">
        <b-navbar-nav>
          <b-nav-item to="/">Home</b-nav-item>
          <b-nav-item to="/h">hello</b-nav-item>
        </b-navbar-nav>
      </b-collapse>
    </b-navbar>
    <!-- routes will be rendered here -->
    <router-view />
  </div>
  <!-- <hello></hello> -->
</main>
<!-- ================================================= -->
<template id="home">
  <div>Home view</div>
</template>
<!-- ================================================= -->
</body>
</html>

FranckFreiburger / http-vue-loader

Uncaught ReferenceError: hello is not defined #133