[Vue warn]: Avoid mutating a prop directly in Pagination components

Prop Mutation in Large Dataset Pagination

When implementing a pagination component in Vue.js, a common requirement is to slice a large array passed as a prop to display only a specific subset of items. Attempting to modify this array directly within the child component triggers the warning: [Vue warn]: Avoid mutating a prop directly because the value will be overwritten whenever the parent component re-renders.

To avoid this, developers typically choose between using a computed property to return a sliced version of the prop or initializing a local data copy that is synchronized via a watcher. While computed properties maintain a pure relationship with the parent, local copies allow for independent client-side sorting or filtering without affecting the source data.

Given the performance implications of copying large arrays versus the reactivity of computed slices, which approach is more sustainable for datasets exceeding 100,000 items? Does the watcher-based copy introduce significant memory overhead compared to computed slicing in Vue 3?