Is there a library for dynamic form components?

I would like to have a form created based on a definition that would come from the server. A definition would be something like

[ { name: 'Name', type: 'text' }, 
  { name: 'Country', type: 'text', options: ['Belgium','France','UK'] } 

which should instantiate something like

Name: <input v-model='form.Name' />
Country: <select v-model='form.Country'><option v-for='...' ...></select>
<button @click='submit(form)'>

I managed to write a render method that does that, but it is really tedious if I now want to add styling/classes or other attributes. Surely someone’s found a way to model all this in a generic way so it can be done cleanly?

Any library I should try out?

So far my render method looks like this

    render(createElement) {
      var self = this;
      var inputs = => 
          createElement('input', {
          domProps: {value: this.form[field]}, 
          on: {
            input: function(evt) {
              self.form[field] =;
        }), // input
        on: {
          click: function(evt) {
            self.$emit('data', self.form)
      }, 'Submit'))
      return createElement('span',inputs);

Speaking to a friend who did similar things in React, I got a solution:

It consists in creating components for each type of field, and using the . Works reasonably easily and if I need to add classes I can either do it right there and then, or add more props to drive them.