Double escaping issue with Alpine.js

I have an image gallery, it looks something like this:

var images = ['caption': '{{ $image->caption }}'];

I then display it in the blade with:

<p x-text="image.caption" class="text-sm lg:text-base overflow-scroll"></p>

Problem is, there seems to be double escaping going on for some reason. If a caption contains double quotes, for example (this is a "test" caption), I get this shown in the browser - this is a "test" captionand when I view the html in developer tools I see:

this is a "test" caption

instead of what I'd expect which is:

this is a "test" caption

I can change the first part to:

var images = ['caption': '{!! $image->caption !!}'];

and that works fine for double quotes - it displays everything fine (and correctly escapes stuff like <>) but then a single quote completely breaks the gallery. Gallery doesn't work and the caption doesn't show up.

Any ideas what is going on and what I can do to allow people to have double quotes and single quotes in their caption and still display correctly?