jsonschema.vue

...

<p-field-group :label="name"
               :invalid-text="nameInvalidText"
               :invalid="!nameValidator.valid"
               :required="true"
>

...

<script lang="ts">
import { validate } from 'jsonschema';

export default {
  setup(){
    const state = reactive({
      name: '',
      priority: 0,
      nameValidator: computed(() => validate(state.name, {
        type: 'string',
        minLength: 2,
        message: {
            minLength: 'should NOT be shorter than 2 characters',
        },
      })),
      priorityValidator: computed(() => validate(state.priority, {
        type: 'number',
        required: true,
        minimum: 1,
        maximum: 10,
        message: {
            minimum: 'should be >= 1',
            maximum: 'should be <= 10',
        },
      })),
      isValid: computed(() => state.nameValidator.valid && state.priorityValidator.valid),
      nameInvalidText: computed(() => state.nameValidator.schema.message[state.nameValidator.errors[0]?.name]),
      priorityInvalidText: computed(() => state.priorityValidator.schema.message[state.priorityValidator.errors[0]?.name]),
    });
    
    return {
        ...toRefs(state),
    };
  },
};
</script>