# useAtom

Signature
`useAtom<T>(atom: Atom<T>): Ref<T>`

valdres-vue
Subscribe to and update an atom's value

Returns a reactive `Ref` that stays in sync with the atom. Writing to the ref updates the atom, and atom changes update the ref.

## Usage

```vue
<script setup>
import { atom } from "valdres"
import { useAtom } from "valdres-vue"

const countAtom = atom(0)
const count = useAtom(countAtom)
</script>

<template>
    <div>
        <span>{{ count }}</span>
        <button @click="count++">+</button>
    </div>
</template>
```

## Two-way binding

Since `useAtom` returns a `Ref`, it works with `v-model`:

```vue
<script setup>
import { atom } from "valdres"
import { useAtom } from "valdres-vue"

const nameAtom = atom("")
const name = useAtom(nameAtom)
</script>

<template>
    <input v-model="name" placeholder="Enter name" />
</template>
```

## See also

- [useValue](https://valdres.dev/vue/useValue) — read-only composable
- [useSetAtom](https://valdres.dev/vue/useSetAtom) — write-only composable
- [useResetAtom](https://valdres.dev/vue/useResetAtom) — reset to default value