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) {