Vue.js: What is the difference between defineExpose and $refs in Vue?

1<!-- Child -->
2<script setup>
3const count = ref(0)
4function increment() {
5    count.value++
6}
7
8defineExpose({ count, increment })
9</script>
10
11<!-- Parent -->
12<script setup>
13const childRef = ref()
14
15onMounted(() => {
16    console.log(childRef.value.count)
17    childRef.value.increment()
18})
19</script>
20<Child ref="childRef" />

1<template>
2    <Child ref="child" />
3</template>
4
5<script>
6export default {
7    mounted() {
8        this.$refs.child.someMethod()
9    }
10}
11</script>