Vue 3: Sandbox Reactivity Issues

[gdmckee9]

Describe the bug
When updating Vue Refs to update page content in the Sandbox, the Refs update, but the Sandbox doesn't as it usually would in a vue 3 project. For instance, I am using the Cloudinary Media Library, and when an asset is returned, it is added to the assetList ref. I am then using a v-for in my template to display each item in the assetList. However, once a new item is added (or removed) from the ref, the Sandbox doesn't reflect that change. I have to then hot reload the code in order to force update it to reflect the new content.

To Reproduce
Steps to reproduce the behavior:

1. Create a Vue 3 plugin using the field plugin CLI
2. Create a Ref/other reactive element
3. Have it display in your Vue template
4. Add a button/functionality to change the reactive element within the sandbox during runtime.
5. The reactive element will update in Vue, but the page will not reflect the up to date element, it will remain as it initially did.

Expected behavior
Once reactive vue elements are updated, the sandbox should display them as so.

I've set up a simple example below with a counter (which is initialised as const counter = ref(0);) & button to demonstrate (the counter ref is updating, but the sandbox is not. However, if i change something, change it back & hot reload it updates to what it should be in the Sandbox)

Screenshots

Desktop (please complete the following information):

• OS: Windows 10 Enterprise
• Browser: Chrome
• Version: Version 115.0.5790.110

Additional context
I am new to working with the Field Plugin Sandbox & creating custom Storyblok plugins so please let me know if it's something I'm going wrong with on my end with the plugin/need to do to rectify. thankyou!

update: found the issue & rectified. it was a vue onMounted error causing the issue. thanks :)