diff --git a/bookshop/app/vue/app.js b/bookshop/app/vue/app.js
index 8dbb6cdf..7aaa2972 100644
--- a/bookshop/app/vue/app.js
+++ b/bookshop/app/vue/app.js
@@ -3,14 +3,14 @@ const $ = sel => document.querySelector(sel)
 const GET = (url) => axios.get('/browse'+url)
 const POST = (cmd,data) => axios.post('/browse'+cmd,data)
 
-const books = new Vue ({
+const books = Vue.createApp ({
 
-    el:'#app',
-
-    data: {
+    data() {
+      return {
         list: [],
         book: undefined,
         order: { quantity:1, succeeded:'', failed:'' }
+      }
     },
 
     methods: {
@@ -42,7 +42,7 @@ const books = new Vue ({
         }
 
     }
-})
+}).mount("#app")
 
 // initially fill list of books
 books.fetch()
diff --git a/bookshop/app/vue/index.html b/bookshop/app/vue/index.html
index 641914ae..6f94c022 100644
--- a/bookshop/app/vue/index.html
+++ b/bookshop/app/vue/index.html
@@ -5,7 +5,7 @@
     <title> Capire Books </title>
     <link rel="stylesheet" href="https://unpkg.com/primitive-ui/dist/css/main.css">
     <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
+    <script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
     <style>
         .hovering tr:hover td { color:cyan; background: #123; cursor: pointer; }
         .rating-stars { color:teal }
@@ -17,7 +17,7 @@
 <body class="small-container", style="margin-top: 70px;">
 <div id='app'>
 
-    <h1> {{ document.title }} </h1>
+    <h1> Capire Books </h1>
 
     <input type="text" placeholder="Search..." @input="search">
 
diff --git a/reviews/app/vue/app.js b/reviews/app/vue/app.js
index b46a4892..eab4ea6b 100644
--- a/reviews/app/vue/app.js
+++ b/reviews/app/vue/app.js
@@ -4,21 +4,21 @@ const GET = (url) => axios.get('/reviews'+url)
 const PUT = (cmd,data) => axios.patch('/reviews'+cmd,data)
 const POST = (cmd,data) => axios.post('/reviews'+cmd,data)
 
-const reviews = new Vue ({
+const reviews = Vue.createApp ({
 
-    el:'#app',
-
-    data: {
-        list: [],
-        review: undefined,
-        message: {},
-        Ratings: Object.entries({
+    data() {
+        return {
+          list: [],
+          review: undefined,
+          message: {},
+          Ratings: Object.entries({
             5 : '★★★★★',
             4 : '★★★★',
             3 : '★★★',
             2 : '★★',
             1 : '★',
-        }).reverse()
+          }).reverse()
+        }
     },
 
     methods: {
@@ -66,7 +66,7 @@ const reviews = new Vue ({
         datetime: (d) => d && new Date(d).toLocaleString(),
     },
 
-})
+}).mount("#app")
 
 // initially fill list of my reviews
 reviews.fetch()
diff --git a/reviews/app/vue/index.html b/reviews/app/vue/index.html
index a361387f..87b25afa 100644
--- a/reviews/app/vue/index.html
+++ b/reviews/app/vue/index.html
@@ -5,7 +5,7 @@
     <title> Capire Reviews </title>
     <link rel="stylesheet" href="https://unpkg.com/primitive-ui/dist/css/main.css">
     <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
+    <script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
     <style>
         .hovering tr:hover td { color:cyan; background: #123; cursor: pointer; }
         .rating-stars { color:teal }
@@ -18,7 +18,7 @@
 <body class="small-container", style="margin-top: 70px;">
 <div id='app'>
 
-    <h1> {{ document.title }} </h1>
+    <h1> Capire Reviews </h1>
 
     <input type="text" placeholder="Search..." @input="search">
 
