Méthode ou computed

Qu'affiche la console au chargement, puis après deux clics sur « Vu », puis après un clic sur « Renommer » ? Remarquer que la propriété calculée est lue deux fois dans le gabarit.

<div id="app">
  <p>{{ titreMethode() }} / {{ titreCalcule }} / {{ titreCalcule }}</p>
  <p>{{ vues }} vue(s)</p>
  <button type="button" @click="vues++">Vu</button>
  <button type="button" @click="titre = 'Java 21'">Renommer</button>
</div>

const { createApp, ref, computed } = Vue;

createApp({
  setup() {
    const titre = ref("Java");
    const vues = ref(0);
    function titreMethode() {
      console.log("méthode");
      return titre.value.toUpperCase();
    }
    const titreCalcule = computed(() => {
      console.log("computed");
      return titre.value.toUpperCase();
    });
    return { titre, vues, titreMethode, titreCalcule };
  },
}).mount("#app");