Quiz: Paying

Clicking Pay should thank the customer and say how much they paid, but the page shows Thank you! You paid €[object Object]. Click the line with the mistake.

<script setup>
import { computed, ref } from "vue";

const order = ref([
    { id: 1, name: "Espresso", price: 2, count: 2 },
    { id: 5, name: "Carrot Cake", price: 4, count: 1 },
]);
const message = ref("");

const total = computed(() => {
    let sum = 0;
    for (const item of order.value) {
        sum += item.price * item.count;
    }
    return sum;
});

function pay() {
    message.value = `Thank you! You paid €${total}.`;
    order.value = [];
}
</script>

<template>
    <h1>Corner Café</h1>
    <ul class="order">
        <li v-for="item in order" :key="item.id">
            {{ item.count }}× {{ item.name }}
        </li>
    </ul>
    <p>Total: €{{ total }}</p>
    <button @click="pay">Pay</button>
    <p class="message">{{ message }}</p>
</template>
BackNext