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

1import { reactive, markRaw } from "vue"
2
3const raw = markRaw({ count: 0 })
4const state = reactive({ data: raw })
5
6state.data.count++  // NOT reactive

1import { reactive, toRaw } from "vue"
2
3const state = reactive({ count: 0 })
4const raw = toRaw(state)
5
6raw.count++  // Does NOT trigger reactivity
7state.count++  // Triggers reactivity