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 = this.fields.map(field => 
        createElement('span',[
          createElement('span',field),
          createElement('input', {
          domProps: {value: this.form[field]}, 
          on: {
            input: function(evt) {
              self.form[field] = evt.target.value;
            }
          }
        }), // input
          createElement('br')
      ]));
      inputs.push(createElement('span',JSON.stringify(this.form)));
      inputs.push(createElement('button',{
        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: https://codepen.io/joelhoro/pen/abzRMNX?editors=0011

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.