Is nesting component properties maintainable in the long run?

Question

I'm building components in Vue.js. They look like this:

<template>
  <form :schema="form.schema" :options="form.options"></form>
</template>

<script>
export default {
  data: () =>
    form: {
      schema: { // array containing form fields }
      options: {
        isHorizontal: true,
        hasLabels: false
      }
    }
  }
}
</script>

As you can see I'm nesting the props. I could also have written the component like this:

<template>
  <form
    :schema="form.schema"
    :isHorizontal="form.isHorizontal"
    :hasLabels="form.hasLabels">
  </form>
</template>

<script>
export default {
  data: () =>
    form: {
      schema: { // array containing form fields },
      isHorizontal: true,
      hasLabels: false
    }
  }
}
</script>

Which version is more intuitive for beginners and maintainable for veterans?

Answer 1

The fundamental difference I see here is who is in control of the options.

For your first example, 'nested props', the template just asks for a pile of options. The template has no knowlege of what they are. In your second example the template explicitely names those options that it requires. The template doesn't know their values but it knows exactly what options it expects.

I've never touched Vue.js but I know enough about design to know that you shouldn't spread knowlege of details around without a good reason. It's better for code to not know if isHorizontal is an option on this component if it's not needed.

However, if you find yourself interogating to see if isHorizontal is an option in a component you would have been beter off to have ensured you knew it would be there using the template as in your second version.

I'm thinking of the template like an interface that promises what I'm going to find in the component. Don't promise me what I don't need to see. Don't ask me to dig up what I do.