Argument of type 'Ref<x>' is not assignable to parameter of type 'x'

Question

Using the new Composition API I am trying to get data from an input and pass it to a function which expects a string. However, TypeScript is complaining the types don't match up because one is a Ref<>. What am I supposed to do here?

<script setup lang="ts">
import { ref } from 'vue'
import formHandler from '../utils/formHandler'

const name = ref('')
</script>

<template>
  <div class="form">
    <label for="name">Name:</label>
    <input name="name" v-model="name"/>
    <button @click="formHandler.validate(name)">Validate</button>
  </div>
</template>

Answer 1

I found it out. You have to append .value to get the value itself.

const name = ref('')

name       // <-- Ref object
name.value // <-- string