# Separate Alpine.js x-data Scopes

Avoid monolithic reactive objects. Split concerns into nested `x-data` scopes.

```html
<!-- BAD: large reactive object -->
<div x-data="{ items: [...], filters: {...}, sort: {...}, pagination: {...} }">

<!-- GOOD: separate concerns -->
<div x-data="productFilters">
  <div x-data="productSort">
    <div x-data="productPagination">
      ...
    </div>
  </div>
</div>
```

Each scope only re-evaluates when its own data changes.