vue v-bind:class return invalid value

Question

I am writing an application at vue and I am getting incorrect behavior, in particular my line :class=require ? 'require' : '' returns the string 'require' even when the value of require is false, what is the problem?

<template>
  <custom-label label="Название">
    <input
        class="text_input"
        :class="require ? 'require' : ''"
        :value="$attrs.value" @input="$emit('input', $event.target.value)"
        placeholder="Матрица всея барановичского района"
    />
  </custom-label>
</template>

<script>
export default {
  name: "InputText",
  components: {CustomLabel},
  computed: mapState({ state: state => state }),
  props: {
    require: Boolean
  }
};
</script>

Below are screenshots from devtools

Answer 1

Use :class="{ require }" instead.