VueJS - Props Validation passed by type vs value

Question

defineProps({
  firstName: {
    type: String,
    required: true
  },
});

const props = defineProps({
  firstName: String
})

I just want to ask simple question, in the first code it passes an object and give it the appropriate validations, in the second it just does the validation string as expected value for the firstName, so what are the difference between these 2 samples of code ? is it that at the first code you can define multiple validations while you can't in the second block ? is that the only difference ? thanks

Answer 1

It's all the props options

defineProps({
  firstName: {
    type: String,
    required: true,
    validator(value) {
      // The value must match one of these strings
      return ['success', 'warning', 'danger'].includes(value)
    },
    default: 'success'
  },
});