[v2.0.0] <Link> component not reactive

[renekragelundpedersen]

Version:

• @inertiajs/vue3 version: 2.0.0

Describe the problem:

When parsing :data to the <Link> component, the reactiveness of the data stops, and is not updating inside the component.

Steps to reproduce:

I have this setup:

const note = ref('');
.....
{{ note }}
<textarea v-model="note"/>
.....
<Link
    method="post"
    as="button"
    :href="route('notes.store')"
    :data="{ 'note': note }"
>
    Create
</Link>

Changing the content of the textarea updates the output of {{ note }} correctly, but the :data never updates accordingly.

Using Inertia 1.3.0 all works as expected, and the Request for the endpoint behind 'notes.store' returns:

array:1 [▼ // app/Http/Controllers/NoteController.php:61
  "note" => "testing"
]

Upgrading to Inertia 2.0, the value of 'note' is always the initial value, which is '' (empty string).

Same request:
array:1 [▼ // app/Http/Controllers/NoteController.php:61
  "note" => ""
]

Now if i change the default value inside the ref, to:
const note = ref('foo');

"foo" is posted:
array:1 [▼ // app/Http/Controllers/NoteController.php:61
  "note" => "foo"
]

So it seems that it never updates / binds the changes to the reference.
I've tested by changing it directly with code before submitting, but none of the changes is registered in the :data part of the component.

I can of course also hardcoded a value to the :data part, which also works.

This might be the cause, as it might loose reactivity:
https://github.com/inertiajs/inertia/blob/master/packages/vue3/src/link.ts#L188