How to prevent conversion to reactive inside store and keep it as an object?

[phillipmohr]

Hey, I'm using Nuxt 3 with Pinia. Inside my store, I want to define a form schema to use it later inside my dynamic FormBuilder component, which uses veevalidate. I'm using yup to define rules.

Like this:

export const useStudiosStore = defineStore('studios', {
    id: 'studios-store',
    state: () => {
        return {
            schema: {
                fields: [
                {
                    label: 'ID',
                    name: 'id',
                    as: 'input',
                    rules: Yup.string().required()
                },

Inside my vue file, I use the store like this:

import { useStudiosStore } from '~/store/studios'
const studiosStore = useStudiosStore();

The validation with veevalidate doesn't work and I get multiple warnings and errors, which is probably because rules is now reactive instead of a normal object, as shown in the vue dev tools, see screenshot.

When I assign the object to a plain variable, validation with veevalidate and yup works fine.

const schema = {
    fields: [
        {
            label: 'ID',
            name: 'id',
            as: 'input',
            rules: Yup.string().required()
        },
    ]
}

So the question is: How to keep 'rules' a plain object inside pinia store? How to also keep every sub-object of rules a plain object instead of converting it to reactive?

Thanks for any advice.

[posva]

you can use markRaw() from vue

[phillipmohr]

Thank you very much!