'YourBookings (fix): resolve reactivity issue with vue3.4.0'

Tidied up the computed values in YourBooking to stop relying on
one computed value looking to another for updates - the reactivity
is no longer propagating via this message and appears to be
intentional behaviour of the new refactored reactivity system.
The filter on bookings was removed as it did not work anyway
because the descriptions were not populated. Policies limit users
to typically a couple of bookings, so the filter bar adds visual
clutter without value.
Fixes #30

Author: timdrysdale

src/package.json

@@ -15,13 +15,13 @@
     "bootstrap": "^5.2.3",
     "dayjs": "^1.11.7",
     "mustache": "^4.2.0",
-    "vue": "~3.3.13",
-    "vue-router": "^4.1.6",
-    "xstate": "^4.35.4"
+    "vue": "^3.5.13",
+    "vue-router": "^4.5.0",
+    "xstate": "^4.38.3"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^4.0.0",
+    "@vitejs/plugin-vue": "^4.6.2",
     "sass": "^1.58.3",
-    "vite": "^4.1.1"
+    "vite": "^4.5.5"
   }
 }

src/src/components/YourBooking.js

@@ -1,32 +1,19 @@
-import YourBooking from "./YourBooking.vue";
 import DisplayBooking from "./DisplayBooking.vue";
 import { useBookingService } from "./bookingMachine.js";
 
 export default {
   props: [],
   components: {
-    YourBooking,
-    DisplayBooking,
+      DisplayBooking,
   },
   computed: {
     bookings() {
-      return this.state.context.bookings;
-    },
-    filteredBookings() {
-      var filter = this.filter.toLowerCase();
-      var items = Object.entries(this.bookings);
-
+      var items = Object.entries(this.state.context.bookings);
+      
       //each item is an array with two elements [0] key and [1] object
       items.sort((a, b) => (a[0] > b[0] ? 1 : -1));
 
-      if (filter == "") {
-        return Object.fromEntries(items);
-      }
-      let results = items.filter((obj) => {
-        return obj[1].description.name.toLowerCase().includes(filter);
-      });
-
-      return Object.fromEntries(results);
+      return Object.fromEntries(items);
     },
   },
   data() {

src/src/components/YourBooking.vue

@@ -8,20 +8,11 @@
 	<div class="col">
 	</div>
 	<div class="col">
-
 	</div>
   </div>
   <div class="row">
-  	  <input v-model="filter" placeholder="filter...">
-  </div>
-  <div class="row">
-  <!--your-booking
-	v-for="(booking,key) in filteredBookings"
-	:key="key"
-	:booking="booking">
-	</your-booking-->
-<display-booking
-  v-for="(booking,key) in filteredBookings"
+  <display-booking
+  v-for="(booking,key) in bookings"
   :key="key"
   :booking="booking">
   </display-booking>