Remise de rentrée

const { createApp, ref, computed } = Vue;

function euros(montant) {
  return montant.toLocaleString("fr-FR", { style: "currency", currency: "EUR" });
}

createApp({
  setup() {
    const lignes = ref([
      { titre: "Petit Prince", prix: 8.5, quantite: 1 },
      { titre: "Java", prix: 32, quantite: 1 },
    ]);
    const sousTotal = computed(() => lignes.value.reduce((s, l) => s + l.prix * l.quantite, 0));
    const remise = computed(() => (sousTotal.value >= 50 ? sousTotal.value * 0.1 : 0));
    const total = computed(() => sousTotal.value - remise.value);
    return { lignes, sousTotal, remise, total, euros };
  },
}).mount("#app");

<div id="app">
  <p v-for="l in lignes" :key="l.titre">{{ l.titre }} × {{ l.quantite }}
    <button type="button" @click="l.quantite++">+1</button></p>
  <p>Sous-total : {{ euros(sousTotal) }}</p>
  <p v-if="remise > 0">Remise (10 % dès 50 €) : −{{ euros(remise) }}</p>
  <p><strong>Total : {{ euros(total) }}</strong></p>
</div>

Au départ, puis après deux clics sur « +1 » du « Petit Prince » :

Petit Prince × 1 +1
Java × 1 +1
Sous-total : 40,50 €
Total : 40,50 €
--- après « +1 » sur Petit Prince, deux fois
Petit Prince × 3 +1
Java × 1 +1
Sous-total : 57,50 €
Remise (10 % dès 50 €) : −5,75 €
Total : 51,75 €

Il faut deux « Petit Prince » de plus : $3\times 8,5+32=57,5\ge 50$, alors qu'avec un seul de plus, $2\times 8,5+32=49<50$. La remise vaut 5,75 € et le total 51,75 €. total s'appuie sur sousTotal et remise : les propriétés calculées se composent, et chacune n'est recalculée que si une de ses sources change.