[Q] Why do I have to recognize the proxy when performing operations on arrays?

[PhilippCh]

I have the following code in my VueJS app:

export const store = syncedStore({
    tasks: [] as Task[],
    tags: [] as Tag[],
    systemState: {} as SystemState,
    fragment: 'xml'
});
const doc = getYjsDoc(store);
const roomName = 'shoppr';
export const webrtcProvider = new WebsocketProvider(Config.get().websocketBaseUrl, roomName, doc);
const offlineProvider = new IndexeddbPersistence(roomName, doc);
offlineProvider.once('synced', () => {
    console.log('initial content loaded');
    console.log(store.tasks.filter((x) => x.value.title === 'Eszet Schnitten'));
});

Please take note of the last line console.log(store.tasks.filter((x) => x.value.title === 'Eszet Schnitten'));. When writing the filter including the .value object, thus recognizing that there is a Boxed Proxy the actual object is behind, the filter works fine, but gives me compiler warnings about value missing on Task (the type of store.tasks). Writing the filter without the .value proxy like this console.log(store.tasks.filter((x) => x.title === 'Eszet Schnitten')); results in x.title being undefined because x is of type Boxed. Is there anything I'm doing wrong here?

For reference, I'm enabling Vue bindings in main.ts with

import { enableVueBindings } from '@syncedstore/core';
import * as Vue from 'vue';

enableVueBindings(Vue);

[YousefED]

I think you can fix this by using tags: [] as Boxed<Tag>[] in your definition