How to pass state into a content component

[dbzx10299]

In nuxt content, if we have a file pages/blog/[...slug].vue is there any way we can pass state into a content component, for example components/content/CodeBlock.vue?

An example I can think of is imagine in CodeBlock.vue you have some code like this:

<script setup>
const isActive = ref(false)

document.addEventListener('click', e => {
  isActive.value = true
  // ....
}) 
</script>

If you have a blog post and you have 50 code blocks, now you also have 50 event listeners, this would be a good time to think about using event delegation. If we move the piece of code above into the file [...slug].vue now we can just use event delegation but there is a different problem now and that is we don't have the ability to update isActive.value = true.

In [...slug].vue

<script setup>
document.addEventListener('click', e => {
  if (e.target.className === '.code-block') {
    // oops, access to child state lost
    isActive.value = true
  }
})
</script>

Is there a way we could update the state from outside of the component or pass it down with props somehow?