Je ne comprends pas pourquoi lorsque je passe une fonction anonyme au champ @input de mon composant d'entrée HTML, cela fonctionne, mais lorsque j'appelle la vraie fonction avec exactement le même code à l'intérieur, cela ne fonctionne pas. Voici le code quand ça ne marche pas :

<script setup>
import { ref } from 'vue'

const text = ref('')
const numberChar = ref(0)
const numberWords = ref(0)

function count() {
    numberChar = text.length
    numberWords = text.split(' ').filter((e) => e != '').length
}

</script>

<template>

<div class="box">
<input v-model="text" placeholder="Write here" @input="count"/>
 <p>
     Text : {{text}} <br>
     Characters : {{numberChar}} <br>
     Words : {{numberWords}}
 </p>
</div>

</template>

Mais quand je dis simplement :

<input v-model="text" placeholder="Write here" @input="() => numberChar = text.length"/>

numberChar a été modifiée et affichée correctement. Je démarre Vuejs donc il me manque quelque chose, mais j'ai du mal avec ça depuis une heure...