Une étiquette de stock

const { createApp, computed } = Vue;

const EtiquetteStock = {
  template: "#modele-etiquette-stock",
  props: {
    stock: {
      type: Number,
      required: true,
      validator: (n) => Number.isInteger(n) && n >= 0,
    },
  },
  setup(props) {
    const texte = computed(() => {
      if (props.stock === 0) return "Épuisé";
      if (props.stock <= 3) return `Plus que ${props.stock} exemplaire${props.stock > 1 ? "s" : ""}`;
      return "En stock";
    });
    const classe = computed(() => (props.stock === 0 ? "epuise" : props.stock <= 3 ? "rare" : "dispo"));
    return { texte, classe };
  },
};

createApp({ components: { EtiquetteStock } }).mount("#app");

<div id="app">
  <p v-for="n in [12, 3, 1, 0]" :key="n">
    {{ n }} en réserve : <etiquette-stock :stock="n"></etiquette-stock>
  </p>
</div>

<template id="modele-etiquette-stock">
  <strong :class="classe">{{ texte }}</strong>
</template>

La page affiche :

12 en réserve : En stock
3 en réserve : Plus que 3 exemplaires
1 en réserve : Plus que 1 exemplaire
0 en réserve : Épuisé

Le validateur refuse un nombre négatif et un nombre décimal (Number.isInteger). Le texte et la classe sont des valeurs calculées à partir de la prop : quand le stock change chez le parent, l'étiquette suit. La classe permet à la feuille de style de colorer l'étiquette ; la couleur ne doit pas être le seul indice, d'où le texte.