Added vuex as a store and an event bus.

assets/js/pages/booklisting.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <input type="text" v-model="searchTerm" @keydown.enter="search"/>
+    <input type="text" class="form-control" v-model="searchTerm" @keydown.enter="search"/>
     <table class="table">
       <thead>
       <tr>
@@ -39,27 +39,28 @@
 </template>
 
 <script>
-import axios from 'axios';
+import {mapActions, mapState} from "vuex";
 
 export default {
   name: 'BookListing',
   data() {
     return {
       searchTerm: null,
-      books: [],
       selectedBook: null,
       manualMode: false
     }
   },
+  computed: {
+    ...mapState('booksmodule', ['books']),
+  },
   methods: {
+    ...mapActions('booksmodule', [
+      'findAll'
+    ]),
     search: function () {
+      this.$store.commit('increment')
       this.updateHistory();
-      axios.get('/api/books', {
-        params: {title: this.searchTerm},
-        headers: {'accept': 'application/json'}
-      }).then(response => {
-        this.books = response.data;
-      }).finally(() => window.EventBus.$emit('updateBookListingHeader', {searchTerm: this.searchTerm}));
+      this.findAll(this.searchTerm);
     },
     updateHistory: function () {
       if (history.pushState) {

assets/js/pages/booklistingheader.vue

@@ -1,12 +1,12 @@
 <template>
   <div>
-    <h1 v-if="searchTerm" v-html="'Book search: '+searchTerm"></h1>
+    <h1 v-if="searchTitle" v-html="'Book search: '+searchTitle"></h1>
     <h1 v-else>Book list</h1>
   </div>
 </template>
 
 <script>
-import {EventBus} from "../event-bus";
+import {mapState} from "vuex";
 
 export default {
   name: 'BookListingHeader',
@@ -15,14 +15,8 @@ export default {
       searchTerm: null,
     }
   },
-  created() {
-    window.EventBus.$on('updateBookListingHeader', (data) => {
-      this.searchTerm = data.searchTerm;
-    });
+  computed: {
+    ...mapState('booksmodule', ['searchTitle']),
   },
-  mounted() {
-    const urlParams = new URLSearchParams(window.location.search);
-    this.searchTerm = urlParams.get('search') || "";
-  }
 }
 </script>