Pattern to add user-interface relevant data to Vue array props?

Question

If props are not editable how does one go about adding data relevant to the user interface in a local component?

Say you receive an Array of blog posts, each post can be iterated in the interface with v-for - but each elements also needs a few extra properties only relevant to the interface like "is_active" or "is_expanded".

How does one go about adding these extra properties to each element in the array received from the prop if props should not be modified?

In particular case i am using inertia.js

So the data can not be modified outside of the component that receives the prop - in a Vuex setup one might mutate the data from the backend and prepare it for the interface before going to the component, but this isn't available here.

Answer 1

create a computed property which maps the prop array and adds the extra properties

computed:{
    _array(){
      return this.propArray.map((item) => { 
                                  return {
                                    ...item,is_active:false,is_expanded:false
})

    }
  }