If you're looking for a solution, consider transitioning from using reactive to utilizing a ref. By incorporating the Reactivity Transform within the <script setup>, you can automatically unwrap refs.
To implement this change, simply substitute ref/computed with $ref/$computed (without requiring an import):
<script setup lang="ts">
import { onMounted } from 'vue'
type ToolboxInfo = {
name: string
id: string
counter: number
}
👇
let workspaceReact = $ref<ToolboxInfo | null>(null)
let msg = $computed(() => `Hello ${workspaceReact?.name}!`)
const onClick = () => workspaceReact!!.counter++
onMounted(() => {
workspaceReact = {
id: 'my id',
name: 'my toolbox',
counter: 0,
}
})
</script>
Check out the demo here
Note: Please be aware that as of now (
<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="cabcbfaf8af9e4f8e4f9fd">[email protected]</a>
), this feature is considered experimental:
⚠️ Experimental Feature
The Reactivity Transform remains an experimental aspect at present. It is not enabled by default and requires explicit opt-in. Furthermore, there may be further modifications before its official release. For updates, monitor the proposal and discussion on GitHub.