How do you optimize Vue Vapor Mode for real-time collaborative editing with CRDTs?

<script setup>
import { signal } from 'vue/vapor-r3'
import { useYDoc, yWebsocketProvider } from '@vueuse/yjs'

const doc = useYDoc('collab-doc')
const provider = yWebsocketProvider(doc, 'wss://collab-server.com')
const text = signal('')

effect(() => {
  const yText = doc.getText('content')
  yText.observe(() => {
    text.value = yText.toString()  // CRDT → Signal (instant DOM)
  })
  
  watch(() => text.value, (newVal) => {
    yText.delete(0, yText.length)
    yText.insert(0, newVal)  // Signal → CRDT (broadcast)
  })
})
</script>

<template>
  <div contenteditable @input="text = $event.target.innerText">
    {{ text }}
  </div>
</template>