JSFiddle - React, Tailwind, and code Playground

HTML

<div id="app">
  <h2>Todos:</h2>
  <ol>
    <li v-for="todo in todos">
      <label>
        <input type="checkbox"
          v-on:change="toggle(todo)"
          v-bind:checked="todo.done">

        <del v-if="todo.done">
          {{ todo.text }}
        </del>
        <span v-else>
          {{ todo.text }}
        </span>
      </label>
    </li>
  </ol>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

Vue

new Vue(    
el:         '#app',
				name:       'FormEtudiants',
        
        data() {
            return {
                schema: null,
                model:  {},
                components,
                step:   StateStore.getStep()
            };
        },
        computed:   {
            isActive: function () {
                return this.step === StateStore.step1;
            }
        },
        created() {
            FieldsProvider.getFields().then(form => {
                this.$refs.formSchema.load(form.data);
            });
        },
        methods:    {
            submit() {

                console.log(JSON.stringify(this.model));

                // AbonnementProvider.souscrire(this.model).then(function (success) {
                //     StateStore.setStep(StateStore.step2);
                //
                //     debugger;
                //
                //     console.log(success);
                //
                //     return Promise.reject(success);
                // }, function (error) {
                //     return Promise.reject(error);
                // });
            },
            validate() {
                this.$validator.validateAll().then(() => {
                    if (!this.errors.any()) {
                        this.$refs.formSchema.clearErrorMessage();
                        this.$emit('submit', this.model);
                    } else {
                        this.$emit('invalid');
                        return false;
                    }
                });
            },
            invalid() {
                alert('form invalid');
            }
        },
        components: {
            FormSchema
        }
    })