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

Computed Slicing Beats Watcher Copies for Large Vue Pagination

The Vue warning [Vue warn]: Avoid mutating a prop directly appears when a child component attempts to modify a prop passed from a parent. In pagination scenarios with large datasets, the practical solution is to use a computed property that slices the prop rather than creating a local copy via watcher synchronization.

Why Computed Properties Win

In Vue 3, computed properties are lazily evaluated and cached based on reactive dependencies. For a 100,000-item array, this means no memory overhead until the computed slice is actually accessed. The array.slice() operation itself is highly optimized in JavaScript engines and typically takes microseconds even on large arrays.

By contrast, a watcher-based approach creates an immediate deep copy of the entire array, consuming memory equal to the full dataset size regardless of whether you need all items. This copy also duplicates on every parent re-render that changes the prop, creating unnecessary garbage collection pressure.

Implementation Pattern

// Child pagination component

This pattern avoids the warning entirely while maintaining optimal performance. Vue 3's reactivity system ensures paginatedItems recalculates only when items, pageSize, or currentPage change.

When Watchers Become Necessary

Watcher-based local copies are only justified when you need client-side sorting or filtering that must not affect the source data. For pure pagination—displaying a window of items from a larger dataset—computed slicing is both simpler and more performant.

Verification step: Test with your actual 100K-item dataset using Chrome DevTools Memory panel to confirm computed slicing uses significantly less memory than a watcher-based copy approach. Benchmark slice performance with performance.now() around the computed access to ensure render times remain acceptable.