Using Vue 3 in Chrome extension bug

[kospl]

Version

3.0.7

Reproduction link

https://github.com/kospl/demo-vue-3-chrome-extension-issue

Steps to reproduce

Follow readme steps at https://github.com/kospl/demo-vue-3-chrome-extension-issue/tree/main#readme

What is expected?

Console showing logs (no errors).

What is actually happening?

Error in console: Error handling response: TypeError: obj.error_info.errors.filter is not a function.

---

I know it is a bug related not just to Vue, but to Chrome extensions, but I think as a lot of developers use Vue, it worth to be logged to be aware of this issue while migrating to Vue 3.

[LinusBorg]

I know it is a bug related not just to Vue, but to Chrome extensions

Can you provide more details? You say this is a general bug in chrome.storage? Then we can't really do anything about this ...

[kospl]

@LinusBorg this was working with Vue 2 without an issue. While updating to Vue 3 it happened to not save array data correctly. I am not aware for exact reason, this might be too deep to investigate for me personally.

From provided demo it's easy to scope the issue to Vue / Proxy and Chrome storage API, but I am not sure which one of these three is a reason for data saved incorrectly, probably the combination Chrome APIs + Proxy is just wrong, or Chrome APIs + Vue's Proxy implementation.

I am still trying to find workaround, as deep copying method before saving seems has no effect.

[LinusBorg]

toRaw() can give you the non-proxy original data, you should probably save that to storage instead.

chrome.storage.local.set({ error_info: Vue.toRaw(this.error_info) }, function(){

Might be worth documenting.