RangeError: Maximum call stack size exceeded when passing Pinia state to resetForm method

[A-kirami]

What happened?

Hello, I am currently working with Pinia and Vee-Validate, but I have encountered an issue when trying to pass the Pinia state to the resetForm method.

Error Message:

RangeError: Maximum call stack size exceeded
    at Function.create (<anonymous>)

Code Snippet:

const formRef = ref<InstanceType<typeof Form>>()

const settings = useSettingsStore()

async function resetForm() {
  if (formRef.value) {
    formRef.value.resetForm({ values: settings.$state })
  }
}

Expected Behavior:
I expect the resetForm method to reset the form with the values from the Pinia state without causing a stack overflow error.

Actual Behavior:
The resetForm method throws a RangeError: Maximum call stack size exceeded error.

Environment:

  System:
    OS: Windows 11 10.0.26100
    CPU: (20) x64 12th Gen Intel(R) Core(TM) i7-12700H
    Memory: 13.14 GB / 31.63 GB
  Binaries:
    Node: 22.11.0
    npm: 10.9.0
    bun: 1.1.36
  Browsers:
    Edge: Chromium (131.0.2903.70)
    Internet Explorer: 11.0.26100.1882
  Package:
    vue: 3.5.13
    pinia: 2.2.8
    vee-validate: 4.14.7

Reproduction steps

1. Initialize a Pinia store with a state that includes form fields.
2. In a Vue component, reference the Pinia store and attempt to pass the store's state to resetForm within a method.
3. Trigger the method to observe the stack overflow error.

Version

Vue.js 3.x and vee-validate 4.x

What browsers are you seeing the problem on?

• Firefox
• Chrome
• Safari
• Microsoft Edge

Relevant log output

No response

Demo link

Currently, I do not have a reproduction link available. However, I can create a minimal reproduction repository if needed. Please let me know if this would be helpful.

Code of Conduct

• I agree to follow this project's Code of Conduct