Use single-file component

apimail/templates/apimail/message_list.html

@@ -10,11 +10,11 @@
 {% block content %}
 
   <b-list-group id="message-header-list">
-    <message-header
+    <message-header-list-item
 	v-for="message in apidata.results"
 	v-bind:message="message"
 	v-bind:key="message.id"
-    ></message-header>
+    ></message-header-list-item>
   </b-list-group>
 
 {% endblock content %}

scipost/static/scipost/assets/vue/components/MessageHeaderListItem.vue

+<template>
+  <b-list-group-item :id="'item' + [[ message.uuid ]]">
+    On {{ message.data.Date }}, from {{ message.data.from }}
+  </b-list-group-item>
+</template>
+
+<script>
+export default {
+    name: "message-header-list-item",
+    props: {
+	message: {
+	  type: Object,
+	  required: true
+	}
+    }
+}
+</script>

scipost/static/scipost/assets/js/main.js → scipost/static/scipost/assets/vue/message_list.js

 import Vue from 'vue';
-import BootstrapVue from 'bootstrap-vue';
 
+import BootstrapVue from 'bootstrap-vue';
 Vue.use(BootstrapVue);
 
 import 'bootstrap/dist/css/bootstrap.css';
 import 'bootstrap-vue/dist/bootstrap-vue.css';
 
-import MessageHeaderList from '../vue/components/MessageHeaderList.vue';
 
-export default {
-    components: {
-	MessageHeaderList,
-    },
-}
+import MessageHeaderListItem from './components/MessageHeaderListItem.vue'
+Vue.component('message-header-list-item', MessageHeaderListItem);
 
-window.Vue = Vue;
+
+var messageList = new Vue({
+    el: '#message-header-list',
+    data: {
+	apidata: [],
+	results: [],
+    },
+    created: function () {
+	fetch('/mail/api/stored_messages')
+	    .then(stream => stream.json())
+	    .then(data => this.apidata = data)
+	    .catch(error => console.error(error))
+    }
+})

webpack.dev.config.js

@@ -20,7 +20,6 @@ module.exports = {
             "./scipost/static/scipost/assets/js/newsticker.js",
         ],
 	vue: [
-            // "./scipost/static/scipost/assets/js/main.js",
             "./scipost/static/scipost/assets/vue/message_list.js",
 	],
     },
@@ -104,9 +103,9 @@ module.exports = {
     resolve: {
 	alias: {
 	    // If using the runtime only build
-	    // 'vue$': 'vue/dist/vue.runtime.esm.js'
+	    'vue$': 'vue/dist/vue.runtime.esm.js'
 	    // Or if using full build of Vue (runtime + compiler)
-	    'vue$': 'vue/dist/vue.esm.js'
+	    // 'vue$': 'vue/dist/vue.esm.js'
 	}
     },
 }