I don't understand why when I pass an anonymous function to the @input field of my html input component it works, but when I call the real function with the exact same code inside it doesn't work. This is the code when it doesn't work:

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

But when I simply say:

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

numberChar value is modified and displayed correctly. I'm starting Vuejs so I'm missing something, but I've been struggling with this for an hour...