Vue.js: What is the difference between markRaw and toRaw?

1<script setup>
2import { reactive, markRaw, toRaw } from "vue"
3
4const obj = markRaw({ nested: {} })
5const state = reactive({ obj })
6// state.obj is NOT reactive
7
8const raw = toRaw(state)
9// raw is the original object
10</script>