What is the best way to pass props?

Question

Vue.js

What is the best way to throw props in such a situation?
In the variant with each individual property - we seem to win in that we cut off the random possibility of changing the prop from the child component + we can safely validate everything.
In the second case, everything seems to be more neatly structured, but you need to write additional validation for it and there is a chance of accidentally modifying it from a child component.

// 1

  <SolocatorHeader 
    titleText="Project Summary"
    titleColor="#FFDBCD"
    titleImg="/test.png"
    descText="Some text"
    descColor="#FFFFFF"
  />

// 2

  <SolocatorHeader
    :title="{
      text: 'Project Summary',
      color: 'FFDBCD',
      img: '/test.png'
    }"
    :desc="{
      text: 'Some text',
      color: '#FFFFFF'
    }"
  />

Answer 1

Depends on what the component does.
If you have created your own component, a block with a product or similar, then the 1st option is better.
Because you will most likely display most of the options inside the template, but it looks simpler when the property consists of 1 chain element. And debugging will be much easier with this approach.
data.props.titlevs title
2nd option is better suited when the component is a wrapper for some library, for example, a slider, etc. Simply put, it’s more convenient to pass data when you don’t work with it directly in the component itself, but only pass it for initialization library. After all, it can have 100,500 options. It is easier to transfer them in this way.
Conclusion, create separate props for those properties that you will work with directly in the component, display in the template, in calculated properties, or just inside methods.
And those with whom you will not, based on paragraph 2, pass the whole object. Otherwise, you are tormented by describing each option as a prop.