The Power of reactive + getter in table scenarios

[HaceraI]

Background

While exploring Vue 3's reactivity system, I discovered an interesting pattern that seems underutilized in the community: combining reactive() with getter methods for table row objects. This approach appears particularly powerful for scenarios where each table row needs auto-calculated fields, but I'm curious about the community's perspective on this pattern.

The Pattern

Instead of managing computed properties at the component level, I create reactive row objects with embedded getters:

function createTableRow() {
  return reactive({
    id: index++,
    unitPrice: 0,
    volume: 0,

    get price() {
      return (this.unitPrice * this.volume).toFixed(2);
    },
    get formattedPrice() {
      return `$${this.price}`;
    }
  });
}

Advantages I've Observed

1. Encapsulation: Each row is a self-contained entity with its own data and behavior
2. Template Simplicity: Direct access like row.total instead of managing separate computed properties
3. Object Completeness: All row-related logic (calculations, validations, methods) in one place
4. Performance: Getters are cached and only recalculate when dependencies change
5. Scalability: Easy to add new rows without creating additional reactive references

Conclusion

The reactive + getter pattern has made this incredibly clean to implement, but I want to ensure I'm not missing any drawbacks or better alternatives.
This pattern feels natural and powerful for table scenarios, yet I rarely see it discussed. I'm curious whether this is because:

• It's not well-known in the community
• There are better alternatives I'm not aware of
• There are hidden issues with this approach
• It's simply a matter of different coding preferences

I'd love to hear your thoughts and experiences!

Demo: Vue SFC Playground