Sending Vuex State To Backend - vue.js

Question

I am trying to send a state in Vuex that is an array of objects to my backend. However, I keep getting this error:
Uncaught (in promise) TypeError: Converting circular structure to JSON
--> starting at object with constructor 'Object'
| property '$options' -> object with constructor 'Object'
| property 'router' -> object with constructor 'Object'
--- property 'app' closes the circle
at JSON.stringify (<anonymous>)
at transformRequest (defaults.js?6d1b:52)
at transform (transformData.js?e0e9:16)
at Object.forEach (utils.js?a2f8:232)
at transformData (transformData.js?e0e9:15)
at dispatchRequest (dispatchRequest.js?82e5:30)
I am using axios to post to my backend, and here is my axios post method call:
SET_ITEMS: (state) => {
const items = state.items;
axios.post('http://localhost:5000/api/boards/update-list', { list: items });
}
I have tried multiple things one being the uses flatted package (Flatted), however, to no avail. How can I fix this error? Thanks in advance.
EDIT
In my case, I have manually given value to the state.items.
state: {
items: [
{
x: 100,
y: 200,
},
{
x: 50,
y: 400,
},
{
x: 100,
y: 100,
},
{
x: 350,
y: 300,
}
]
}
SECOND EDIT
Moved async call into a action:
setItems: ({state}) => {
axios.post('http://localhost:5000/api/boards/update-list', { hey: state.items})
}

Answer 1

I didn't mention this in the question, but I have a value in state.items where the element (HTMLElement) is being stored. This has been causing the error mentioned in the question. How I solved this was by completing leaving out the element value from JSON.stringify. You can accomplish this by creating a replacer function and here is mine in my case:
function replacer(key, value) {
if (key === 'element') return undefined;
return value;
}
Then you can put this function in the JSON.stringify as shown here:
JSON.stringify(state.items, replacer(key, value))
And now the element value is not included after the JSON.stringify method call!
I hope someone finds this helpful.