livewire and Alpinejs issue with @entangle on array

Question

I'm building a blade component with some alpinejs sprinkled in for a dropdown menu. It's loosely based off of this github project. I'm passing an array of objects that represents the options for the drop down, as well as an array of objects containing the options that should be selected by default when the dropdown is initialized.

The whole page is a Livewire component, which contains a list of users, and there's an edit modal on the page that is populated with the selected users information.

I got it working basically exactly how I wanted with just passing some data to the view like this:

    public function mount()
    {
        $this->locations = Location::select('id', 'name')->get()->toJson();
        $this->userLocations = Location::whereIn('id', [1001, 1002])->get()->toJson();
    }

and this is in the blade view where I'm calling the blade component inside the modal:

<x-input.select :data="$locations" selected="$userLocations" multiple />

And then in the blade component:

@props(['data', 'selected', 'placeholder' => 'Select an option', 'limit' => 40])

<div x-data="select({
    data: {{ $data }},
    selected: {{ $selected }},
    ...
>

The above works just fine. However, the problem comes in when I want to set the selected options when the edit method is called, so they can actually be set to the user's specific related locations.

To do that, my thought process was that I would need to use @entangle, which would allow any changes to the selections to be passed back to the model (?) or at least that's my understanding.

So I changed the code as follows:

In my livewire controller:

first I initialize the variable to an empty array:

public $userLocations = [];

and then in the edit method:

public function edit(User $user)
{
    $this->user = $user;
    $this->userLocations = $this->user->locations->toJson();
    $this->showModal = true;
}

And in the blade view modal:

<x-input.select :data="$locations" :wire:model="$userLocations" multiple />

And in the blade component:

@props(['data', 'selected', 'placeholder' => 'Select an option', 'limit' => 40])

<div x-data="select({
    data: {{ $data }},
    selected: @entangle($attributes->wire('model')),
    ...
>

The first error I get is from Laravel:

htmlspecialchars(): Argument #1 ($string) must be of type string, array given

If I set a value in the mount method in the same way I did initially, I get this error:

It seems like it doesn't like the json, but I've tried removing that in my controller and it's the same output. I've also tried to json_encode() the input to the component on the off chance that it would make a difference.

Am I going about this the wrong way?

This is what my goal is:

When the modal is opened for a given user, display the users assigned locations as selected in the drop down, and then allow for them to be changed. I'm assuming wire:model is the right idea here as I'm using the same method with the other input fields on the modal without issue.