Ich verstehe nicht, warum es funktioniert, wenn ich eine anonyme Funktion an das @input-Feld meiner HTML-Eingabekomponente übergebe, aber wenn ich die echte Funktion mit genau demselben Code darin aufrufe, funktioniert es nicht. Dies ist der Code, wenn es nicht funktioniert:

<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>

Aber wenn ich einfach sage:

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

numberChar-Wert wurde geändert und korrekt angezeigt. Ich beginne mit Vuejs, also übersehe ich etwas, aber ich kämpfe schon seit einer Stunde damit ...