"Is not in camelCase" warning when props are individually generated from a unique object

Question

I pass an object configObject as prop to my child component:

<custom-button v-bind="configObject" />

This object contains various properties which I define individually inside my child component in order to extract the corresponding values:

props: {
  button_id: {
    type: String,
    default: ''
  },
  is_external_link: {
    type: Boolean,
    default: true
  },
  display_button: {
    type: Boolean,
    default: true
  },
  ...
},

This works perfectly, but Vue complains that these props aren't in camelCase. Yet if I rename them camelCase-style (button_id -> buttonId), the data isn't passed anymore such that buttonId is empty for example.

How to resolve this dilemma?

EDIT: `configObject' looks like below.

{
  button_id: '123',
  text: 'blabla',
  link: 'https://google.com',
  is_external_link: true,
  image: 'https://cdn.image.jpg',
  ...
}

Answer 1

I ended up accessing, from my child component, the prop object's properties directly - configObject.property, after retrieving it the regular way:

props: {
  configObject: {
    type: Object,
    default: null
  }
},