Почему не обновляются дочерние компоненты при изменении стейта?

Question

[Вячеслав Шевченко]

Вот файл стора (pinia):

import { defineStore } from "pinia";
import type Shipment from '@/modules/Personal/Shipments/types/Shipment';
import axios from "axios"
import type Pagination from "@/modules/Main/types/Pagenation";

interface State {
    shipments: Shipment[],
    pagination: Pagination | null,
}

export const useShipmentsStore = defineStore('shipments', {
    state: function (): State {
        return <State>{
            shipments: [],
            pagination: null,
        }
    },

    actions: {
        async fetchShipments(page: number = 1) {
            const response = await axios.get('/rest/v1/personal/shipments/', {
                params: {
                    page: page,
                }
            })

            if (response.status == 200) {
                // this.shipments = response.data.data.shipments;
                this.$patch({
                    shipments: response.data.data.shipments,
                })
            }
        }
    }
})

Файл самого компонента:

<template>
    <div class="container-fluid shipments">
        <h1>Доставки</h1>
        <button class="btn btn-primary" @click="loadItems(pageNum())"></button>
        <ShipmentComponent v-for="shipment in shipments" :key="shipment.id" :shipment="shipment" @loadItems="loadItems(pageNum())"></ShipmentComponent>
    </div>
</template>

<script lang="ts" setup>
import ShipmentComponent from "@/modules/Personal/Shipments/components/Shipment.vue";
import { useShipmentsStore } from "@/modules/Personal/Shipments/store";
import { useRouter, useRoute } from 'vue-router'
import { computed, onMounted, ref } from 'vue'

const router = useRouter();
const route = useRoute();
const state = useShipmentsStore();
const shipments = computed(() => state.shipments);
const pageNum = ():number => {
    return parseInt(route.params.page) || 1
}

let loading = ref(false);

onMounted(async () => {
    await loadItems(pageNum());
});

const goto = async (input: number) => {
    await router.push('/' + input)
    await loadItems(input);
};

const loadItems = async (input: number) => {
    loading.value = true;
    await state.fetchShipments(input);
    loading.value = false;
};

</script>

<style scoped></style>

При повторном запросе данных дочерние компоненты (Shipment.vue) не обновляются. А если сразу тут вывести данные то обновляются. Т.е. дочерние компоненты не видят обновления данных, почему?

Comments

[Alex D]

Убрать
//const shipments = computed(() => state.shipments);

Изменить
v-for="shipment in state.shipments"

или

Убрать
//const shipments = computed(() => state.shipments);

Добавить:
import { storeToRefs } from 'pinia'
const state = useShipmentsStore();
const { shipments } = storeToRefs(state)

[Вячеслав Шевченко]

К сожалению не помогло всё также не обновляется.

Answer 1

[Вячеслав Шевченко]

Ошибка была в файле с компонентом ShipmentComponent:

let props = defineProps({
    shipment: {
        // type: Object as PropType<Shipment>
    }
});
let shipment = props.shipment;