VUE returns Promise

Yes, this is a computed property.

I have never worked with watch so I'm not familiar with it. I tried this but it doesn't work:

watch: {
		price: async function () {
			let priceForDays = 0;
			
			let prices = await axios.get('/api/prices/get/' + this.booking.luggage.size).then(response => response.data);

			if (this.numberOfDays === 1) {
				priceForDays += prices.base
			} else if (this.numberOfDays >= 2 && this.numberOfDays <= 7) {
				priceForDays += prices.base + (prices.afterOneDay * (this.numberOfDays-1))
			} else if (this.numberOfDays >= 8) {
				priceForDays += 8000 + (prices.afterWeek * (this.numberOfDays-7))
			}

			this.price = (priceForDays * this.booking.luggage.numberOfBags);
		}
	}

The chosen date in the system, basically the numberOfDays computed property.

So watch numberOfDays, and recalculate the price:

data () {
	return {
		price: null,
		numberOfDays: 1,
		// ...
	}
}, 

watch: {
		numberOfDays: async function () {
			let priceForDays = 0;
			
			let prices = await axios.get('/api/prices/get/' + this.booking.luggage.size).then(response => response.data);

			if (this.numberOfDays === 1) {
				priceForDays += prices.base
			} else if (this.numberOfDays >= 2 && this.numberOfDays <= 7) {
				priceForDays += prices.base + (prices.afterOneDay * (this.numberOfDays-1))
			} else if (this.numberOfDays >= 8) {
				priceForDays += 8000 + (prices.afterWeek * (this.numberOfDays-7))
			}

			this.price = (priceForDays * this.booking.luggage.numberOfBags);
		}
	}

This works! And I think I'm starting to understand how watchers work. But one question, do you have an idea how I could make a watcher for booking.luggage.size?

This is what I have right now, but Vue complains because of an unexpected token .

booking.luggage.size: function () {
			if (this.booking.luggage.size == "regular") {
				this.booking.price = 2000;
			} else if (this.booking.luggage.size == "odd-size") {
				this.booking.price = 2500;
			}
		},

So I have my data set-up like this:

booking: {
				user: {
					name: '',
					email: ''
				},
				
				luggage: {
					size: 'regular',
					numberOfBags: 1
				},
				
				days: {
					dropOff: {
						date: null,
						time: null
					},

					pickUp: {
						date: null,
						time: null
					}
				},

				validation: false,
				price: 2000
			},

Use a deep watcher:

booking: {
	deep: true,
	handler () {
		if (this.booking.luggage.size == "regular") {
			this.booking.price = 2000;
		} else if (this.booking.luggage.size == "odd-size") {
			this.booking.price = 2500;
		}
}
}

@tykus - But now your other solution stopped working

@tykus - Any idea how to get both solutions to work together?

@hjortur17 what is not working; the deep watcher?

@tykus - So this is how my watch looks like. But numberOfDays doesn't work anymore:

watch: {
		booking: {
			deep: true,
			handler () {
				if (this.booking.luggage.size == "regular") {
					this.booking.price = 2000;
				} else if (this.booking.luggage.size == "odd-size") {
					this.booking.price = 2500;
				}
			}
		},

		numberOfDays: async function () {
			let priceForDays = 0;

			let prices = await axios.get('/api/prices/get/' + this.booking.luggage.size).then(response => response.data);

			if (this.numberOfDays === 1) {
				priceForDays += prices.base
			} else if (this.numberOfDays >= 2 && this.numberOfDays <= 7) {
				priceForDays += prices.base + (prices.afterOneDay * (this.numberOfDays-1))
			} else if (this.numberOfDays >= 8) {
				priceForDays += 8000 + (prices.afterWeek * (this.numberOfDays-7))
			}

			this.booking.price = (priceForDays * this.booking.luggage.numberOfBags);
		}
	}

@hjortur17 That’s not something that should be in a computed property, then. Computed properties should be able to return values immediately; not return the value once an asynchronous operation (such as making a HTTP request) has completed.

Instead, you should capture those details from the user (name and dates), and then have a button to calculate the price based on those details. You can disable your form whilst the HTTP request is being executed, and then display the price once you’ve got it from the server.