How to fix an array input value with Laravel / Vue JS

This is a Laravel 5 project. I have a standard form being submitted. I am trying to send the ID's of each account clicked from the results of the search function added within the vue component.

The details clicked are then stored in a hidden form input called 'grantedUsers'. This has the ability to store more than one value. So I've used the name grantedUsers[].

Upon submitting the form to the backend, I've DD'ed the value and it's showing all the values but in one index instead of separate indexes for each. Making it way more difficult to process data efficiently.

I'm obviously submitting the value incorrectly to the hidden input. Any assistance would be appreciated in splitting each ID into separate indexes.

Code

<input type="hidden" name="grantedUsers[]" :value="hiddenData">

//hiddenData is an empty array at initialisation.
data() {
  return {
      keywords: null,
      results: [],
      granted: [],
      hiddenData: []
  };
},

addUser(result) {
   this.granted.push(result);
   this.results.splice(this.results.indexOf(result), 1);

   this.hiddenData.push(result.id);
},

removeUser(grantee) {
   this.results.push(grantee);
   this.granted.splice(this.granted.indexOf(grantee), 1);

   this.hiddenData.splice(this.hiddenData.indexOf(grantee.id), 1);
}

//The backend is outputting this on the DD
array:1 [▼
  0 => "1,2"
]

I'm trying to make it out

array:2 [▼
  0 => "1"
  1 => "2"
]

via Chebli Mohamed