How to make doc prop reactive in vue

[abdul-alhasany]

Thanks for the this package.

I am trying to implment it using vue. It is working as expected, but I am unable to make doc prop reactive. Here is my code:

<script setup>
import { EditorCacheProvide, SQLEditor } from '@tidbcloud/tisqleditor-vue';
import { curSqlGutter } from '@tidbcloud/codemirror-extension-cur-sql-gutter';
const code = ref(sqlCode.value ?? '');
</script>

<template>
 <EditorCacheProvide>
	<SQLEditor
		editor-id="test"
		:doc="code"
		class="block grow"
		:basic-setup-options="{
			autocompletion: true
		}"
		:extra-exts="[
			curSqlGutter()
		]"
	/>
</EditorCacheProvide>
</template>

I have also installed @codemirror/view and @codemirror/state.

When I update code, the content inside the editor is not updated.