[Vuejs]-Vue js data design strategy – Complex JSON object from API or simple JSON objects with PK/FK relationships

It’s hard to give any specific suggestion because your data model example is very simple and missing some important information such as:

1. What is the cardinality of the data? Are there only few objects in Collection-B/C used by many objects in Collection-A? (in other words how much the data bloat when de-normalized)
2. How do you use the data in your app? Just view or updates too ? Are updates to B/C collections objects needed ?
3. How big part of the whole data set does your app need at any given time ?
4. What about use cases ? How important is perceived performance for you? Is it ok to load and display just objects in collection A (in some kind of grid) and load rest of the data lazily on the background or on demand when needed ?

You need to consider all your requirements (or set some for yourself), not just technical aspects.

Anyway here are some ideas:

• Given the fact your data are already stored in normal form, Option 1 feels best. You can for example use library like Vuex ORM to make things easier for you (if hesitant to use “another 3rd party library”, consider Vuex alone – its maintained by Vue core team).
• I strongly recommend this approach if updates to collection B/C objects are needed (as it would be hard when you need to update multiple copies of the same data)
• data representation in memory and “in transit” are different things. You can decide to keep data in normal form but load it de-normalized for performance reasons (Vuex ORM makes this simple – can be useful for testing too)
• consider using lazy-loading if you don’t need all the data at once