Pinia Store更新值后失去响应性问题求助

我在沙箱中运行示例可正常工作，说明问题出在我的项目配置里。涉及的项目文件：

• stores/cardStore.js - Store定义文件
• composables/loadData.js - 首次更新Store数组的文件
• composables/discardSavedCard.js - 更新数组但不触发UI更新的文件
• components/imageLayers/ImageLayers.js - 未更新的UI组件

我的Pinia Store是一个包含对象数组的对象。修改数组内对象的属性时，使用该属性的UI部分可正常更新；但将嵌套数组替换为包含新对象的新数组时，状态已改变但UI未更新，仿佛数组未发生变化。

更新Store脚本

import { useExampleStore } from "@/stores/exampleStore";

const updateStore = () => {
    const exampleStore = useExampleStore();

    exampleStore.array = [{prop:'newprop'}];
};

示例UI

<template>
    <div> {{exampleStore.array[0].prop}} </div>
</template>

<script setup>
import { useExampleStore } from "@/stores/exampleStore";
const exampleStore = useExampleStore();
</script>

@/stores/exampleStore.js

import { defineStore } from "pinia";

export const useExampleStore = defineStore("exampleStore", {
  state: () => ({}),
});

内容的提问来源于stack exchange，提问作者franka