Vue.js: What is the difference between ref and reactive?

1<script setup>
2import { ref, reactive } from "vue"
3
4// ref
5const count = ref(0)
6count.value++  // JS
7// {{ count }}  // Template auto-unwraps
8
9// reactive
10const state = reactive({ count: 0 })
11state.count++
12</script>