How do you get your axios calls out of being wrapped in a proxy?

[delebash]

In the past when I needed to get an array that was wrapped in the vue proxy I would just use toRaw but that is not working.

I am trying to add a permission gui to add permissions to roles.

In the roles/Edit.vue I have added a little listbox control and am loading like so

const {role: postData, getRole, updateRole,getRolePermissions, rolePermissionList,validationErrors, isLoading} = useRoles()
const {permissions, getAllPermissions} = usePermissions()

onBeforeMount( () => {
    getRolePermissions(route.params.id)
    getAllPermissions()
    console.log(toRaw(permissions))
    // const difference =
    //     permissions.filter((element) => !rolePermissionList.includes(element));

    availablePermissions = permissions
    currentPermissions = rolePermissionList
})

It binds successfully to my listbox but I need to do a diff for availablePermissions, when I try to do the diff the getAllPermissions is still wrapped in a vue proxy and it won't work. I followed your example to create getAllPermissions() axois call.

 const getAllPermissions = async () => {
        axios.get('/api/permissions/')
            .then(response => {
                permissions.value = response.data.data;
            })
    }

This is what the proxy looks like

RefImpl {__v_isShallow: false, dep: undefined, __v_isRef: true, _rawValue: Array(0), _value: Proxy(Array)}
dep
: 
Set(1) {ReactiveEffect}
__v_isRef
: 
true
__v_isShallow
: 
false
_rawValue
: 
(20) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
_value
: 
Proxy(Array) {0: {…}, 1: {…}, 2: {…}, 3: {…}, 4: {…}, 5: {…}, 6: {…}, 7: {…}, 8: {…}, 9: {…}, 10: {…}, 11: {…}, 12: {…}, 13: {…}, 14: {…}, 15: {…}, 16: {…}, 17: {…}, 18: {…}, 19: {…}}
value
: 
(...)
[[Prototype]]
: 
Object

I have tried adding the .value to permissions and it returns an empty array even though the proxy array is not empty

Here is what my control looks like