Как передать ссылку (Ref) в функцию в шаблоне (template)?

В Vue.js для передачи ссылки на элемент в функцию валидации можно использовать директиву `ref`. Директива `ref` позволяет привязывать элемент в шаблоне к ссылке в компоненте, что затем дает возможность взаимодействовать с этим элементом напрямую в JavaScript.

Вот пример, как можно использовать `ref` и передавать его в функцию валидации:

### Шаг 1: Определите ref в шаблоне

В вашем шаблоне вы можете задать `ref` для элемента, например, для поля ввода:

```vue
<template>
  <div>
    <input type="text" ref="inputField" />
    <button @click="validateInput">Проверить</button>
  </div>
</template>
```

### Шаг 2: Создайте функцию валидации

В скриптовой части вашего компонента создайте функцию `validateInput`, которая будет использовать `this.$refs` для доступа к элементу:

```vue
<script>
export default {
  methods: {
    validateInput() {
      const input = this.$refs.inputField;
      // Теперь можно работать с элементом input
      if (input.value === '') {
        console.log('Поле ввода пустое');
      } else {
        console.log('Введено значение:', input.value);
      }
    }
  }
}
</script>
```

### Пояснение к коду

1. **`<input type="text" ref="inputField" />`**: Мы добавили `ref="inputField"` к элементу input. Теперь мы можем ссылаться на этот элемент через `this.$refs.inputField` в JavaScript.

2. **`validateInput()`**: Это метод, который будет вызываться по нажатию на кнопку. Здесь мы получаем доступ к элементу input через `this.$refs.inputField` и можем производить необходимые операции, такие как проверка значения.

### Примечания

- Ссылки, присвоенные с помощью `ref`, доступны на уровне компонента через `this.$refs` после того, как компонент загружен (т.е. после `mounted` хуков).
- Убедитесь, что используете `ref` только для того, чтобы получить доступ к DOM-элементам или компонентам. Для управления состоянием и данными лучше использовать реактивные свойства Vue.

Такой подход позволяет вам легко взаимодействовать с элементами DOM и проводить валидацию или другие операции при возникновении событий.

Попробуй вот так 
 
 
<script setup>
import { ref } from 'vue';

const apple = ref('');

const validate = (inputRef) => {
    // Теперь inputRef — это ref, обращайтесь к значению через inputRef.value
    console.log(inputRef.value);
};
</script>

<template>
<input type="text" v-model="apple" @input="() => validate(apple)" />
</template>