How to disable attribute inheritance in VueJs component?

Question

Vue.js

I specify inheritAttrs: false for the VueJS component.
But the classes are still assigned to the root element.
what am I doing wrong?

<template>
  <div class="ui-input">
    <div v-if="label" class="ui-input__label">{{ label }}</div>
    <input class="ui-input__field"  v-on="$listeners" v-bind="$attrs" v-bind:value="value" v-on:input="$emit('input', $event.target.value)">
  </div>
</template>

<script>
  export default{
    name: 'ui-input',
   props:....
    inheritAttrs: false
  }
</script>

I use

<ui-input type="text"  class="form-control form-control-lg" label="Секретный ключ"></ui-input>

Answer 1

I specify inheritAttrs: false <...> classes are still written to the root element

Regarding inheritAttrs the documentation says that

this option does not affect bindings classandstyle

So you can't turn it off. But it is possible to make the component functional ( for example ) - their attributes are not automatically assigned to the root element.