Vuejs @input="function" is not working but @input="() => do some" is working

Question

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

Answer 1

Thank you everyone, I have solved this problem. The problem is the

I wrote in the function

numberChar = text.length

instead of

numberChar.value = text.value.length

The weird thing is that in my anonymous function it works without .value and I don't know why. In the tutorial here: https://vuejs.org/tutorial/#step-4They are using it the way I am trying to use it. They also say in the tutorial that .value is not required because it is implicit if nothing is specified?

For those who say the tags and titles of my questions are incorrect, I will try to do better next time, thank you. (This is my first post on stackoverflow)

Thanks:)