Passing css classes to a component - display these classes not on the root element, on the child?

Question

Vue.js

Hello.
Imagine there is a FormButton component - a regular html button, but not just a button, but wrapped in some kind of container, like:<input />

<div class="col-12">
   <input />
</div>

The question is the following:
I want to pass parameters to this component, for example, in the form of classes: In this case, as you understand, the class will be assigned to the root div, and I need it to be assigned to the button. Is it possible to somehow specify in the component settings that incoming HTML parameters should be applied not to the ROOT element of the component, but to some other one?
<FormButton class="btn-danger" />

Answer 1

Make the component functional, where classes (as well as other attributes) do not automatically cling to the root, you can independently choose who should add them:

functional: true,
render(h, ctx) {
  return h('div', {
    class: 'col-12',
  }, [
    h('input', {
      class: [ ctx.data.class, ctx.data.staticClass ],
    }),
  ]);
},