Fixing available vaps reactivity

src/iss-components/cart-dropdown/cart-dropdown.vue

@@ -196,7 +196,6 @@ export default {
     data() {
         return {
             isExpanded: this.isInitiallyExpanded,
-            availableVaps: this.submittedOrder ? this.submittedOrder.lineItems.vaps : useMainStore().order.availableVaps,
             widget: {
                 amountDue: 'AmountDueTextWidget',
                 amountPaid: 'AmountPaidTextWidget',
@@ -209,11 +208,16 @@ export default {
                 servicePackage: 'ServicePackageTitle',
                 vapsItemDescriptions: 'VapsItemDescriptions'
             },
-            cartItemType,
+            cartItemType
-            cartOrder: this.submittedOrder ?? useMainStore().order
         };
     },
     computed: {
+        cartOrder() {
+            return this.submittedOrder ?? useMainStore().order;
+        },
+        availableVaps() {
+            return this.cartOrder.availableVaps;
+        },
         deductible() {
             return getDeductible(this.cartOrder);
         },
@@ -255,13 +259,12 @@ export default {
             return !this.showAsPaid ? 0 : this.total;
         },
         availableLineItems() {
-            const vapsToUse = this.availableVaps ?? this.lineItems.vaps;
             const { supportingItems, glassParts, otherParts, feeItems } = this.lineItems;
             const result = [
                 ...(supportingItems ?? []),
                 ...(glassParts ?? []),
                 ...(otherParts ?? []),
-                ...(vapsToUse ?? []),
+                ...(this.availableVaps ?? []),
                 ...(feeItems ?? [])
             ];
             return result;