Le piège de la déstructuration

Que montre le paragraphe avant et après un clic sur « Vendre » ?

<div id="app">
  <p>{{ livre.titre }} : {{ livre.stock }} — {{ titre }} : {{ stock }} — {{ stockRef }}</p>
  <button type="button" @click="vendre">Vendre</button>
</div>

const { createApp, reactive, toRef } = Vue;

createApp({
  setup() {
    const livre = reactive({ titre: "Analyse", stock: 3 });
    const { titre, stock } = livre;
    const stockRef = toRef(livre, "stock");
    function vendre() {
      livre.stock--;
    }
    return { livre, titre, stock, stockRef, vendre };
  },
}).mount("#app");