Removing computed property

app.js

@@ -1,19 +1,15 @@
+import BooksPage from './pages/BooksPage.js';
+
 new Vue({
   el: '#app',
   data: {
-    route: '/pages/BooksPage.js'
+    page: BooksPage
   },
   methods: {
     navigate(event) {
-      this.route = event.target.pathname;
-    }
-  },
-  computed: {
-    page() {
-      //console.log(this.route); // Uncomment this and it works
-      return () => import(
+      this.page = () => import(
         /* webpackChunkName: "pages/[request]" */
-        `./pages/${this.route.split('/').pop()}`
+        `./pages/${event.target.pathname.split('/').pop()}`
       );
     }
   }

index.html

@@ -16,12 +16,13 @@
 </body>
 <script type="text/javascript">
     var script = document.createElement('script');
-    script.type = 'text/javascript';
     try {
         Function('import("")');
         script.src= "app.js";
+        script.type = 'module';
     } catch(e) {
         script.src= "dist/build.js";
+        script.type = 'text/javascript';
     }
     document.body.appendChild(script);
 </script>