Computed property not updated when prop is partially reloaded?

[alancwoo]

I have a prop called links. When a link is deleted, the page is partially reloaded via router.reload({ only: ["links"] });

My list of links is rendered via a computed property linksFiltered which allows a user to use a dropdown to filter the list based on a number of properties:

const linksFiltered = computed(() => {
    if (filter.value === "all") {
        return links;
    }
    return links.filter((link) => link.type === filter.value);
});

The problem I'm facing is that this doesn't seem to be recomputed, say after a link is deleted. I can see the xhr request and actually see the links prop updated correctly in the vue inspector, but the computed property remains the same. I've tried also forcing a manually updated ref into the computed property but it still doesn't seem to update:

const updateCount = ref(0);

const linksFiltered = computed(() => {
    updateCount.value;

    if (filter.value === "all") {
        return links;
    }
    return links.filter((link) => link.type === filter.value);
});

const onDelete = () => {
    router.reload({
        only: ["links"],
        onSuccess: () => {
            updateCount.value++;
            console.log(links) // Actually this still logs the stale prop
        }
    });
};

I'm curious if I am doing something wrong or approaching this problem the wrong way? I am using vue 3.2.36 and @inertiajs/vue3 1.0.6.

---

Edit: Also slicing the prop into a reactive ref doesn't work:

const linksRef = ref(links.slice())

const linksFiltered = computed(() => {
    ...
    return linksRef.value.filter ...

[danielns1982]

Did you manage to find a solution?