Messy transition to Vue

app/templates/layout.html

@@ -6,6 +6,7 @@
         integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
     <!-- HTMX -->
     <script src="https://unpkg.com/htmx.org@1.5.0"></script>
+    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
     <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.js"></script>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.css" />
     <link rel="stylesheet" href="/colors.css"/>

app/templates/table.html

@@ -1,26 +1,8 @@
 {% extends "layout.html" %}
 
 {% block content %}
+<div id="app">
+  {{ message }}
+</div>
 
-<div id="container"></div>
-
-<script language="javascript">
-    const container = document.querySelector('#container');
-    const data = [
-  { id: 1, name: 'Ted Right', address: '' },
-  { id: 2, name: 'Frank Honest', address: '' },
-  { id: 3, name: 'Joan Well', address: '' },
-  { id: 4, name: 'Gail Polite', address: '' },
-  { id: 5, name: 'Michael Fair', address: '' },
-];
-
-const hot = new Handsontable(container, {
-  data,
-  colHeaders: false,
-  height: 'auto',
-  width: 'auto',
-  minSpareRows: 1,
-  licenseKey: 'non-commercial-and-evaluation'
-});
-</script>
 {% endblock %}