Why is an empty array returned when sending a variable containing table data to VueJS?

Question

Vue.js

Good afternoon!
The following data is available:

data: {
        newposition: []
     }

Next, in newposition.table we assign the data value of the tabular part, which are perfectly rendered and displayed on the page by the code:

<tr v-for="table in newposition.table">
    <td>{{ table.linenum }}</td>
    <td>{{ table.name}}</td>
    ...... и тп.
</tr>

When trying to send data to the server using the POST method via Axios:

axios.post( 'json.php?order=add',  {table: this.newposition.table});

The server receives the following when processing a post request:
[table] => ,
If done via form.append:

for( var i = 0; i < this.newposition.table.length; i++ ){
   let table = this.newposition.table[i];
   formData.append('table[' + i + ']', table);
}

The following comes up:

[table] =>
 [0] =>
 [1] =>
 ....

And so on by the number of rows in the table.
I have already tried all the options, ordinary data comes and is processed perfectly, but if one or more arrays are nested in the variable, console.log() of the variable shows the data perfectly, but for some reason they are empty when transferred to the server.
At the same time, if you look at the headers of the request that axios sends, this data is immediately empty there..

Answer 1

As a result, we managed to solve with a artisanal enumeration method

for( var i = 0; i < this.newposition.table.length; i++ ){
              formData.append('table[' + i + '][linenum]', this.newposition.table[i]['linenum']);
              formData.append('table[' + i + '][name]', this.newposition.table[i]['name']);
              .....
            }

Maybe there is a more general method? In case columns are suddenly changed/added?

Answer 2

Try like this

axios({
  method: 'post',
  {
    'Content-Type': 'application/json',
    'X-Requested-With': 'XMLHttpRequest'
  },
  url,
  JSON.stringify(data),
})