V2: href of Link Component does not update on change

[NicolasKion]

Versions:

• @inertiajs/vue3 version: 2.0.0-beta.2

Describe the problem:

It appears that the Link component does not react to updates of a computed any source href, computed or not

Steps to reproduce:

<script setup>
import {Link} from "@inertiajs/vue3";
import {computed, onMounted, onUnmounted, ref} from "@vue/runtime-core";

const val = ref('test');

// Some arbitrary computed value as source of the href
const href = computed(() => {
    return `/${val.value}`;
});

const iv = ref(0);

/*
    Updating the source of the computed value will also update the computed value
 */
onMounted(() => {
    iv.value = setInterval(() => {
        val.value = 'test' + Math.random();
        console.log(href.value);
    }, 1000);
});

onUnmounted(() => {
    clearInterval(iv.value);
}  );


// The href of the Link never updates from the initial value
</script>
<template>
    <div>
        <Link :href="href">Home</Link>
    </div>
</template>

[MacroTom]

Exactly, am having the same issue.

[Smef]

PR submitted with fix: #2089

[Smef]

I've noticed that for regular elements everything works fine, but when using slot props the values are not properly updated. the rest of the template in the slot does react and update appropriately when the slot props data changes.

I've been able to v-for through the same data - one version directly from a prop and the other sent into a components and returned individually in a slot prop, and the slot prop href value doesn't update while the direct link does. All the rest of the data in the slot updates correctly, just not the href or data value of the Link component.

You can also make up your own attributes for the Link / a element, like :something="myData." and it'll all update properly. It's just losing reactivity on the href and data values.