Laravel & Inertia.js - reactivity problem (vue3)

Question

could it be that Inertia.js page components are blocking the reactivity of vue?

I have a Page component, in this component is a normal single file component.

I have a function that adds items to the ItemsManager.items object. When I'm running this function the single component below doesnt adds this items in the v-for . But when I'm reload the Page Component it works and the previously added items appear.

Here the single file component:

<template>
    <div>
        <div v-for="item in items" :key="item.$key">
            test
        </div>
    </div>
</template>

<script>
import { ItemsManager } from "./utils.js";

export default {
    name: "test-component",
    data: () => ({
        items: ItemsManager.items
    }),
};
</script>

utils.js:

export const ItemsManager = {
    items: [],
    add(item) {
        item.$key = this.items.length;
        this.items.unshift(item);
    },
};

function that adds the items (in page component):

addItem(title, options) {
    ItemsManager.add({
        name: title,
        options: options
    });
},

Thanks in advance!

Answer 1

Since you're using Vue2, you need to know that there are some caveats when adding/deleting things to Objects/Arrays. You don't show any code relevant to your actual way of adding stuff to your object, but I can still recommend that you'd check this page to understand and fix your issue.

https://v2.vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats