<form id="hello-vue" class="demo">

  <fieldset>
    <legend>Регистрация нового профиля</legend>
    <custom-input 
                  label="Ваше имя" 
                  help="Имя будет публично отображаться" 
                  v-model="first_name"
                  placeholder="Иван"></custom-input>

    <custom-input 
                  label="Ваша фамилия" 
                  help="Фамилия может подадобится для восстановления доступа к аккаунту" 
                  v-model="last_name"
                  placeholder="Иванов"></custom-input>

    <custom-input 
                  label="Ваш возраст" 
                  help="Мы должны убедится что вы совершеннолетни" 
                  v-model="age" 
                  type="number" 
                  min="1"></custom-input>

    <custom-input 
                  label="Ваш любимый цвет" 
                  help="Выберите любимый цвет и мы украсим им ваш профиль" 
                  v-model="color" 
                  type="color"></custom-input>
  </fieldset>

  <div :style="`background: ${color};`">
    <fieldset style="color: rgb(255, 255, 255);  mix-blend-mode: difference;">

      <legend>Ваш профиль</legend>
      <ul>
        <li>Полное имя: {{first_name}} {{last_name}}</li>
        <li>
          Совершеннолетие:
          <b v-if="age >= 18" style="color: green">ДА</b>
          <b v-else style="color: red">НЕТ</b>
        </li>
      </ul>

    </fieldset>
  </div>
</form>

.demo {
  display: flex;
  gap: 1rem;
  opacity: 0;
}

.demo[data-v-app] {
  opacity: 1;
}

const VueApp = {
  data() {
    return {
      first_name: "",
      last_name: "",
      age: 1,
      color: "#000"
    };
  }
};

const CustomInputComponent = {
  props: ["label", "help", "modelValue"],
  template: `
    <p>
      <label>
        {{label}}<br>
        <input 
          v-bind="$attrs"
          :value="modelValue"
          @input="$emit('update:modelValue', $event.target.value)">
        <div><small>{{help}}</small></div>
      </label>
    </p>
  `
};

Vue
  .createApp(VueApp)
  .component("custom-input", CustomInputComponent)
  .mount("#hello-vue");