diff --git a/.eslintrc.js b/.eslintrc.js
index 2d63962..2f3f6d8 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -2,5 +2,6 @@ module.exports = {
   extends: 'guo/vue',
   rules: {
     'valid-jsdoc': 'off',
+    'array-bracket-spacing': 'off'
   }
 };
diff --git a/.prettierrc.js b/.prettierrc.js
new file mode 100644
index 0000000..88fb4c8
--- /dev/null
+++ b/.prettierrc.js
@@ -0,0 +1,6 @@
+// .prettierrc.js
+module.exports = {
+  printWidth: 120,
+  singleQuote: true,
+  trailingComma: "es5",
+};
diff --git a/example/App.vue b/example/App.vue
index 8607d4e..7d4c9ee 100644
--- a/example/App.vue
+++ b/example/App.vue
@@ -1,4 +1,3 @@
-
 <template>
   <div id="app">
     <Subscription/>
@@ -25,4 +24,4 @@ export default {
   color: #2c3e50;
   margin-top: 60px;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/example/components/Subscription.vue b/example/components/Subscription.vue
index 1ca6c11..197fd56 100644
--- a/example/components/Subscription.vue
+++ b/example/components/Subscription.vue
@@ -20,157 +20,156 @@
 </template>
 
 <script>
-  // import JsonEditor from '../../lib/json-editor.min.js';
-  import JsonEditor from '../../src/JsonEditor.vue';
-  import { Option } from 'element-ui';
-
-  JsonEditor.setComponent('form', 'el-form', ({ vm }) => {
-    // vm is the JsonEditor VM
-
-    const labelWidth = '120px';
-    const model = vm.data;
-    const rules = {};
-
-    function parseField(fields) {
-      Object.keys(fields).forEach((key) => {
-        if(key.indexOf('$') === 0 && key !== '$sub') return;
-        const field = fields[key];
-        if(field.$sub) {
-          return parseField(field);
-        }
-        if(!field.name) return;
-        rules[field.name] = [];
-        // http://element.eleme.io/#/en-US/component/form#validation
-        const type = field.schemaType === 'array' && field.type === 'radio' ? 'string' : field.schemaType;
-        const required = field.required;
-        const message = field.title;
-        const trigger = [ 'radio', 'checkbox', 'select' ].includes(field.type) ? 'change' : 'blur';
-        rules[field.name].push({ type, required, message, trigger });
-
-        if(field.minlength !== undefined || field.maxlength !== undefined) {
-          const max = field.maxlength || 255;
-          const min = field.minlength || 0;
-          const msg = `Length must between ${ min } and ${ max }`;
-          rules[field.name].push({ min, max, message: msg, trigger });
+import JsonEditor from '../../src/JsonEditor.vue';
+import { Option } from 'element-ui';
+
+JsonEditor.setComponent('form', 'el-form', ({ vm }) => {
+  // vm is the JsonEditor VM
+
+  const labelWidth = '120px';
+  const model = vm.data;
+  const rules = {};
+
+  function parseField(fields) {
+    Object.keys(fields).forEach(key => {
+      if (key.indexOf('$') === 0 && key !== '$sub') return;
+      const field = fields[key];
+      if (field.$sub) {
+        return parseField(field);
+      }
+      if (!field.name) return;
+      rules[field.name] = [];
+      // http://element.eleme.io/#/en-US/component/form#validation
+      const type = field.schemaType === 'array' && field.type === 'radio' ? 'string' : field.schemaType;
+      const required = field.required;
+      const message = field.title;
+      const trigger = ['radio', 'checkbox', 'select'].includes(field.type) ? 'change' : 'blur';
+      rules[field.name].push({ type, required, message, trigger });
+
+      if (field.minlength !== undefined || field.maxlength !== undefined) {
+        const max = field.maxlength || 255;
+        const min = field.minlength || 0;
+        const msg = `Length must between ${ min } and ${ max }`;
+        rules[field.name].push({ min, max, message: msg, trigger });
+      }
+    });
+  }
+
+  parseField(vm.fields);
+
+  // returning the form props
+  return { labelWidth, rules, model };
+});
+
+// http://element.eleme.io/#/en-US/component/form#validation
+JsonEditor.setComponent('label', 'el-form-item', ({ field }) => ({
+  prop: field.name,
+}));
+
+JsonEditor.setComponent('email', 'el-input');
+JsonEditor.setComponent('url', 'el-input');
+JsonEditor.setComponent('number', 'el-input-number');
+JsonEditor.setComponent('text', 'el-input');
+JsonEditor.setComponent('textarea', 'el-input');
+JsonEditor.setComponent('checkbox', 'el-checkbox');
+JsonEditor.setComponent('checkboxgroup', 'el-checkbox-group');
+JsonEditor.setComponent('radio', 'el-radio');
+JsonEditor.setComponent('select', 'el-select');
+JsonEditor.setComponent('switch', 'el-switch');
+JsonEditor.setComponent('color', 'el-color-picker');
+JsonEditor.setComponent('rate', 'el-rate');
+
+// You can also use the component object
+JsonEditor.setComponent('option', Option);
+
+// By default `<h1/>` is used to render the form title.
+// To override this, use the `title` type:
+JsonEditor.setComponent('title', 'h2');
+
+// By default `<p/>` is used to render the form title.
+// To override this, use the `description` type:
+JsonEditor.setComponent('description', 'small');
+
+// By default `<div/>` is used to render the message error.
+// To override this, use the `error` type:
+JsonEditor.setComponent('error', 'el-alert', ({ vm }) => ({
+  type: 'error',
+  title: vm.error,
+}));
+
+export default {
+  data: () => ({
+    schema: require('@/schema/newsletter'),
+    model: {
+      name: 'Yourtion',
+      sub: {
+        sEmail: 'yourtion@gmail.com',
+      },
+    },
+  }),
+  computed: {
+    jsonString() {
+      return JSON.stringify(this.model, null, 2).trim();
+    },
+  },
+  methods: {
+    submit(_e) {
+      this.$refs.JsonEditor.form().validate(valid => {
+        if (valid) {
+          // this.model contains the valid data according your JSON Schema.
+          // You can submit your model to the server here
+
+          // eslint-disable-next-line no-console
+          console.log('model', JSON.stringify(this.model));
+          this.$refs.JsonEditor.clearErrorMessage();
+        } else {
+          this.$refs.JsonEditor.setErrorMessage('Please fill out the required fields');
+          return false;
         }
       });
-    }
-
-    parseField(vm.fields);
-
-    // returning the form props
-    return { labelWidth, rules, model };
-  });
-
-  // http://element.eleme.io/#/en-US/component/form#validation
-  JsonEditor.setComponent('label', 'el-form-item', ({ field }) => ({
-    prop: field.name,
-  }));
-
-  JsonEditor.setComponent('email', 'el-input');
-  JsonEditor.setComponent('url', 'el-input');
-  JsonEditor.setComponent('number', 'el-input-number');
-  JsonEditor.setComponent('text', 'el-input');
-  JsonEditor.setComponent('textarea', 'el-input');
-  JsonEditor.setComponent('checkbox', 'el-checkbox');
-  JsonEditor.setComponent('checkboxgroup', 'el-checkbox-group');
-  JsonEditor.setComponent('radio', 'el-radio');
-  JsonEditor.setComponent('select', 'el-select');
-  JsonEditor.setComponent('switch', 'el-switch');
-  JsonEditor.setComponent('color', 'el-color-picker');
-  JsonEditor.setComponent('rate', 'el-rate');
-
-  // You can also use the component object
-  JsonEditor.setComponent('option', Option);
-
-  // By default `<h1/>` is used to render the form title.
-  // To override this, use the `title` type:
-  JsonEditor.setComponent('title', 'h2');
-
-  // By default `<p/>` is used to render the form title.
-  // To override this, use the `description` type:
-  JsonEditor.setComponent('description', 'small');
-
-  // By default `<div/>` is used to render the message error.
-  // To override this, use the `error` type:
-  JsonEditor.setComponent('error', 'el-alert', ({ vm }) => ({
-    type: 'error',
-    title: vm.error,
-  }));
-
-  export default {
-    data: () => ({
-      schema: require('@/schema/newsletter'),
-      model: {
-        name: 'Yourtion',
-        sub: {
-          sEmail: 'yourtion@gmail.com',
-        },
-      },
-    }),
-    computed: {
-      jsonString() {
-        return JSON.stringify(this.model, null, 2).trim();
-      },
     },
-    methods: {
-      submit(_e) {
-        this.$refs.JsonEditor.form().validate((valid) => {
-          if (valid) {
-            // this.model contains the valid data according your JSON Schema.
-            // You can submit your model to the server here
-
-            // eslint-disable-next-line no-console
-            console.log('model', JSON.stringify(this.model));
-            this.$refs.JsonEditor.clearErrorMessage();
-          } else {
-            this.$refs.JsonEditor.setErrorMessage('Please fill out the required fields');
-            return false;
-          }
-        });
-      },
-      reset() {
-        this.$refs.JsonEditor.reset();
-      },
+    reset() {
+      this.$refs.JsonEditor.reset();
     },
-    components: { JsonEditor },
-  };
+  },
+  components: { JsonEditor },
+};
 </script>
 
 <style>
-  .form {
-    text-align: left;
-    width: 90%;
-    margin: auto;
-  }
-
-  h2 {
-    font-size: 1.7em;
-    text-align: center;
-    margin-top: 0;
-    margin-bottom: .2em
-  }
-
-  h2 + small {
-    display: block;
-    text-align: center;
-    margin-bottom: 1.2em
-  }
-
-  small {
-    line-height: 20px;
-    display: block;
-  }
-
-  .el-alert {
-    margin-bottom: 15px
-  }
-
-  .el-form .sub {
-    margin-left: 10%;
-  }
-
-  .json {
-    text-align: left;
-  }
+.form {
+  text-align: left;
+  width: 90%;
+  margin: auto;
+}
+
+h2 {
+  font-size: 1.7em;
+  text-align: center;
+  margin-top: 0;
+  margin-bottom: 0.2em;
+}
+
+h2 + small {
+  display: block;
+  text-align: center;
+  margin-bottom: 1.2em;
+}
+
+small {
+  line-height: 20px;
+  display: block;
+}
+
+.el-alert {
+  margin-bottom: 15px;
+}
+
+.el-form .sub {
+  margin-left: 10%;
+}
+
+.json {
+  text-align: left;
+}
 </style>
diff --git a/src/JsonEditor.vue b/src/JsonEditor.vue
index 014003f..4569272 100644
--- a/src/JsonEditor.vue
+++ b/src/JsonEditor.vue
@@ -1,385 +1,416 @@
 <script>
-  import { loadFields } from './parser';
-  import { initChild, getChild, setVal, deepClone } from './utils';
-  const option = { native: true };
-  const components = {
-    title: { component: 'h1', option },
-    description: { component: 'p', option },
-    error: { component: 'div', option },
-    form: { component: 'form', option },
-    file: { component: 'input', option },
-    label: { component: 'label', option },
-    input: { component: 'input', option },
-    radio: { component: 'input', option },
-    select: { component: 'select', option },
-    option: { component: 'option', option },
-    button: {
-      component: 'button',
-      option: {
-        ...option,
-        type: 'submit',
-        label: 'Submit',
-      },
+import { loadFields } from './parser';
+import { initChild, getChild, setVal, deepClone } from './utils';
+const option = { native: true };
+const components = {
+  title: { component: 'h1', option },
+  description: { component: 'p', option },
+  error: { component: 'div', option },
+  form: { component: 'form', option },
+  file: { component: 'input', option },
+  label: { component: 'label', option },
+  input: { component: 'input', option },
+  radio: { component: 'input', option },
+  select: { component: 'select', option },
+  option: { component: 'option', option },
+  button: {
+    component: 'button',
+    option: {
+      ...option,
+      type: 'submit',
+      label: 'Submit',
     },
-    checkbox: { component: 'input', option },
-    textarea: { component: 'textarea', option },
-    radiogroup: { component: 'div', option },
-    checkboxgroup: { component: 'div', option },
-  };
-  const defaultInput = { component: 'input', option };
-  const defaultGroup = { component: 'div', option };
+  },
+  checkbox: { component: 'input', option },
+  textarea: { component: 'textarea', option },
+  radiogroup: { component: 'div', option },
+  checkboxgroup: { component: 'div', option },
+};
+const defaultInput = { component: 'input', option };
+const defaultGroup = { component: 'div', option };
 
-  /**
-   * Edit JSON in UI form with JSON Schema and Vue.js `<json-editor>` component.
-   *
-   * @author Yourtion
-   * @license MIT
-   */
-  export default {
-    name: 'JsonEditor',
-    props: {
-      /**
-       * The JSON Schema object. Use the `v-if` directive to load asynchronous schema.
-       */
-      schema: { type: Object, required: true },
-      /**
-       * Use this directive to create two-way data bindings with the component. It automatically picks the correct way to update the element based on the input type.
-       * @model
-       * @default {}
-       */
-      value: { type: Object, default: () => ({}) },
-      /**
-       * This property indicates whether the value of the control can be automatically completed by the browser. Possible values are: `off` and `on`.
-       */
-      autoComplete: { type: String },
-      /**
-       * This Boolean attribute indicates that the form is not to be validated when submitted.
-       */
-      noValidate: { type: Boolean },
-      /**
-       * Define the inputs wrapping class. Leave `undefined` to disable input wrapping.
-       */
-      inputWrappingClass: { type: String },
-    },
-    data() {
-      return {
-        default: {},
-        fields: {},
-        error: null,
-        data: {},
-      };
-    },
-    created() {
-      loadFields(this, deepClone(this.schema));
-      this.default = deepClone(this.value);
-      this.data = deepClone(this.value);
-    },
-    render(createElement) {
-      const nodes = [];
-      if (this.schema.title) {
-        nodes.push(createElement(
-          components.title.component, this.schema.title));
+/**
+ * Edit JSON in UI form with JSON Schema and Vue.js `<json-editor>` component.
+ *
+ * @author Yourtion
+ * @license MIT
+ */
+export default {
+  name: 'JsonEditor',
+  props: {
+    /**
+     * The JSON Schema object. Use the `v-if` directive to load asynchronous schema.
+     */
+    schema: { type: Object, required: true },
+    /**
+     * Use this directive to create two-way data bindings with the component. It automatically picks the correct way to update the element based on the input type.
+     * @model
+     * @default {}
+     */
+    value: { type: Object, default: () => ({}) },
+    /**
+     * This property indicates whether the value of the control can be automatically completed by the browser. Possible values are: `off` and `on`.
+     */
+    autoComplete: { type: String },
+    /**
+     * This Boolean attribute indicates that the form is not to be validated when submitted.
+     */
+    noValidate: { type: Boolean },
+    /**
+     * Define the inputs wrapping class. Leave `undefined` to disable input wrapping.
+     */
+    inputWrappingClass: { type: String },
+  },
+  data() {
+    return {
+      default: {},
+      fields: {},
+      error: null,
+      data: {},
+    };
+  },
+  created() {
+    loadFields(this, deepClone(this.schema));
+    this.default = deepClone(this.value);
+    this.data = deepClone(this.value);
+  },
+  render(createElement) {
+    const nodes = [];
+    if (this.schema.title) {
+      nodes.push(createElement(components.title.component, this.schema.title));
+    }
+    if (this.schema.description) {
+      nodes.push(createElement(components.description.component, this.schema.description));
+    }
+    if (this.error) {
+      const errorOptions = this.elementOptions(components.error);
+      const errorNodes = [];
+      if (components.error.option.native) {
+        errorNodes.push(this.error);
       }
-      if (this.schema.description) {
-        nodes.push(createElement(
-          components.description.component, this.schema.description));
-      }
-      if (this.error) {
-        const errorOptions = this.elementOptions(components.error);
-        const errorNodes = [];
-        if (components.error.option.native) {
-          errorNodes.push(this.error);
-        }
-        nodes.push(createElement(
-          components.error.component, errorOptions, errorNodes));
+      nodes.push(createElement(components.error.component, errorOptions, errorNodes));
+    }
+    const allFormNodes = [];
+    const formNode = {
+      root: {},
+    };
+    function createForm(fields, sub) {
+      let node;
+      if (sub) {
+        node = setVal(formNode, sub.pop(), {});
+      } else {
+        node = formNode.root;
       }
-      const allFormNodes = [];
-      const formNode = {
-        root: {},
-      };
-      function createForm(fields, sub) {
-        let node;
-        if(sub) {
-          node = setVal(formNode, sub.pop(), {});
-        } else {
-          node = formNode.root;
-        }
 
-        if (Object.keys(fields).length) {
-          Object.keys(fields).forEach((key) => {
-            const formNodes = [];
-            if(key.indexOf('$') === 0) return;
-            const field = fields[key];
-            if(field.$sub) {
-              return createForm.call(this, field, sub ? [ ...sub, key ] : [ key ]);
-            }
-            const fieldName = field.name;
+      if (Object.keys(fields).length) {
+        Object.keys(fields).forEach(key => {
+          const formNodes = [];
+          if (key.indexOf('$') === 0) return;
+          const field = fields[key];
+          if (field.$sub) {
+            return createForm.call(this, field, sub ? [...sub, key] : [key]);
+          }
+          const fieldName = field.name;
 
-            const fieldValue = getChild(this.value, fieldName.split('.'));
-            if (!field.value) {
-              field.value = fieldValue;
-            }
-            const customComponent = field.component ? { component: field.component, option: { }} : undefined;
-            // eslint-disable-next-line
-            const element = field.component ? customComponent : field.hasOwnProperty('items') && field.type !== 'select'
+          const fieldValue = getChild(this.value, fieldName.split('.'));
+          if (!field.value) {
+            field.value = fieldValue;
+          }
+          const customComponent = field.component ? { component: field.component, option: {}} : undefined;
+          // eslint-disable-next-line
+          const element = field.component
+            ? customComponent
+            : field.hasOwnProperty('items') && field.type !== 'select'
               ? components[`${ field.type }group`] || defaultGroup
               : components[field.type] || defaultInput;
-            const fieldOptions = this.elementOptions(element, field, field);
-            const children = [];
+          const fieldOptions = this.elementOptions(element, field, field);
+          const children = [];
 
-            const input = {
-              ref: fieldName,
-              domProps: {
-                value: fieldValue,
+          const input = {
+            ref: fieldName,
+            domProps: {
+              value: fieldValue,
+            },
+            on: {
+              input: event => {
+                const value = event && event.target ? event.target.value : event;
+                const ns = fieldName.split('.');
+                const n = ns.pop();
+                const ret = ns.length > 0 ? initChild(this.data, ns) : this.data;
+                this.$set(ret, n, value);
+                /**
+                 * Fired synchronously when the value of an element is changed.
+                 */
+                this.$emit('input', this.data);
               },
-              on: {
-                input: (event) => {
-                  const value = event && event.target ? event.target.value : event;
-                  const ns = fieldName.split('.');
-                  const n = ns.pop();
-                  const ret = (ns.length > 0 ? initChild(this.data, ns) : this.data);
-                  this.$set(ret, n, value);
-                  /**
-                   * Fired synchronously when the value of an element is changed.
-                   */
-                  this.$emit('input', this.data);
-                },
-                change: this.changed,
-              },
-              ...fieldOptions,
-            };
-            delete field.value;
-            switch (field.type) {
-            case 'textarea':
-              if (element.option.native) {
-                input.domProps.innerHTML = fieldValue;
-              }
-              break;
-            case 'radio':
-            case 'checkbox':
-              if (field.hasOwnProperty('items')) {
-                field.items.forEach((item) => {
-                  const itemOptions = this.elementOptions(
-                    components[field.type], item, item, item);
-                  children.push(createElement(
-                    components[field.type].component, itemOptions, item.label));
-                });
-              }
-              break;
-            case 'select':
-              if (!field.required) {
-                children.push(createElement(components.option.component));
-              }
-              field.items.forEach((option) => {
-                const optionOptions = this.elementOptions(components.option, {
-                  value: option.value,
-                }, field);
-                children.push(createElement(components.option.component, {
-                  domProps: {
-                    value: option.value,
-                  },
-                  ...optionOptions,
-                }, option.label));
+              change: this.changed,
+            },
+            ...fieldOptions,
+          };
+          delete field.value;
+          switch (field.type) {
+          case 'textarea':
+            if (element.option.native) {
+              input.domProps.innerHTML = fieldValue;
+            }
+            break;
+          case 'radio':
+          case 'checkbox':
+            if (field.hasOwnProperty('items')) {
+              field.items.forEach(item => {
+                const itemOptions = this.elementOptions(components[field.type], item, item, item);
+                children.push(createElement(components[field.type].component, itemOptions, item.label));
               });
-              break;
             }
-            const inputElement = createElement(element.component, input, children);
+            break;
+          case 'select':
+            if (!field.required) {
+              children.push(createElement(components.option.component));
+            }
+            field.items.forEach(option => {
+              const optionOptions = this.elementOptions(
+                components.option,
+                {
+                  value: option.value,
+                },
+                field
+              );
+              children.push(
+                createElement(
+                  components.option.component,
+                  {
+                    domProps: {
+                      value: option.value,
+                    },
+                    ...optionOptions,
+                  },
+                  option.label
+                )
+              );
+            });
+            break;
+          }
+          const inputElement = createElement(element.component, input, children);
 
-            const formControlsNodes = [];
-            if (field.label && !option.disableWrappingLabel) {
-              const labelOptions = this.elementOptions(components.label, field, field);
-              const labelNodes = [];
-              if (components.label.option.native) {
-                labelNodes.push(createElement('span', {
-                  attrs: {
-                    'data-required-field': field.required ? 'true' : 'false',
+          const formControlsNodes = [];
+          if (field.label && !option.disableWrappingLabel) {
+            const labelOptions = this.elementOptions(components.label, field, field);
+            const labelNodes = [];
+            if (components.label.option.native) {
+              labelNodes.push(
+                createElement(
+                  'span',
+                  {
+                    attrs: {
+                      'data-required-field': field.required ? 'true' : 'false',
+                    },
                   },
-                }, field.label));
-              }
-              labelNodes.push(inputElement);
-              if (field.description) {
-                labelNodes.push(createElement('br'));
-                labelNodes.push(createElement('small', field.description));
-              }
-              formControlsNodes.push(createElement(
-                components.label.component, labelOptions, labelNodes));
-            } else {
-              formControlsNodes.push(inputElement);
-              if (field.description) {
-                formControlsNodes.push(createElement('br'));
-                formControlsNodes.push(createElement('small', field.description));
-              }
+                  field.label
+                )
+              );
             }
-            if (this.inputWrappingClass) {
-              formNodes.push(createElement('div', {
-                class: this.inputWrappingClass,
-              }, formControlsNodes));
-            } else {
-              formControlsNodes.forEach((node) => formNodes.push(node));
+            labelNodes.push(inputElement);
+            if (field.description) {
+              labelNodes.push(createElement('br'));
+              labelNodes.push(createElement('small', field.description));
             }
-            node[key] = formNodes[0];
-          });
-        }
-      }
-      createForm.call(this, this.fields);
-
-      function createNode(fields, sub) {
-        const nodes = [];
-        const subName = sub && sub.pop();
-        if(fields.$title) {
-          nodes.push(createElement('div', {
-            class: 'sub-title',
-          }, fields.$title));
-        }
-        Object.keys(fields).forEach((key) => {
-          if(key.indexOf('$') === 0) return;
-          const field = fields[key];
-          if(field.$sub) {
-            const node = createNode.call(this, field, sub ? [ ...sub, key ] : [ key ]);
-            nodes.push(createElement('div', {
-              class: 'sub',
-            }, node));
-          } else if(subName) {
-            nodes.push(getChild(formNode, subName.split('.'))[key]);
+            formControlsNodes.push(createElement(components.label.component, labelOptions, labelNodes));
+          } else {
+            formControlsNodes.push(inputElement);
+            if (field.description) {
+              formControlsNodes.push(createElement('br'));
+              formControlsNodes.push(createElement('small', field.description));
+            }
+          }
+          if (this.inputWrappingClass) {
+            formNodes.push(
+              createElement(
+                'div',
+                {
+                  class: this.inputWrappingClass,
+                },
+                formControlsNodes
+              )
+            );
           } else {
-            nodes.push(formNode.root[key]);
+            formControlsNodes.forEach(node => formNodes.push(node));
           }
+          node[key] = formNodes[0];
         });
-        return nodes;
       }
-      const formNodes = createNode.call(this, this.fields);
-      allFormNodes.push(formNodes);
+    }
+    createForm.call(this, this.fields);
 
-      const labelOptions = this.elementOptions(components.label);
-      const button = this.$slots.hasOwnProperty('default')
-        ? { component: this.$slots.default, option }
-        : components.button;
-      if (button.component instanceof Array) {
-        allFormNodes.push(createElement(
-          components.label.component, labelOptions, button.component));
-      } else {
-        const buttonOptions = this.elementOptions(button);
-        const buttonElement = createElement(button.component, buttonOptions, button.option.label);
-        allFormNodes.push(createElement(
-          components.label.component, labelOptions, [ buttonElement ]));
+    function createNode(fields, sub) {
+      const nodes = [];
+      const subName = sub && sub.pop();
+      if (fields.$title) {
+        nodes.push(
+          createElement(
+            'div',
+            {
+              class: 'sub-title',
+            },
+            fields.$title
+          )
+        );
       }
-      const formOptions = this.elementOptions(components.form, {
-        autocomplete: this.autocomplete,
-        novalidate: this.novalidate,
+      Object.keys(fields).forEach(key => {
+        if (key.indexOf('$') === 0) return;
+        const field = fields[key];
+        if (field.$sub) {
+          const node = createNode.call(this, field, sub ? [...sub, key] : [key]);
+          nodes.push(
+            createElement(
+              'div',
+              {
+                class: 'sub',
+              },
+              node
+            )
+          );
+        } else if (subName) {
+          nodes.push(getChild(formNode, subName.split('.'))[key]);
+        } else {
+          nodes.push(formNode.root[key]);
+        }
       });
-      nodes.push(createElement(components.form.component, {
-        ref: '__form',
-        on: {
-          submit: (event) => {
-            event.stopPropagation();
-            this.submit(event);
+      return nodes;
+    }
+    const formNodes = createNode.call(this, this.fields);
+    allFormNodes.push(formNodes);
+
+    const labelOptions = this.elementOptions(components.label);
+    const button = this.$slots.hasOwnProperty('default')
+      ? { component: this.$slots.default, option }
+      : components.button;
+    if (button.component instanceof Array) {
+      allFormNodes.push(createElement(components.label.component, labelOptions, button.component));
+    } else {
+      const buttonOptions = this.elementOptions(button);
+      const buttonElement = createElement(button.component, buttonOptions, button.option.label);
+      allFormNodes.push(createElement(components.label.component, labelOptions, [buttonElement]));
+    }
+    const formOptions = this.elementOptions(components.form, {
+      autocomplete: this.autocomplete,
+      novalidate: this.novalidate,
+    });
+    nodes.push(
+      createElement(
+        components.form.component,
+        {
+          ref: '__form',
+          on: {
+            submit: event => {
+              event.stopPropagation();
+              this.submit(event);
+            },
+            invalid: this.invalid,
           },
-          invalid: this.invalid,
+          ...formOptions,
         },
-        ...formOptions,
-      }, allFormNodes));
-      return createElement('div', nodes);
-    },
-    mounted() {
-      this.reset();
+        allFormNodes
+      )
+    );
+    return createElement('div', nodes);
+  },
+  mounted() {
+    this.reset();
+  },
+  setComponent(type, component, option = {}) {
+    components[type] = { component, option };
+  },
+  methods: {
+    /**
+     * @private
+     */
+    optionValue(field, target, item = {}) {
+      return typeof target === 'function' ? target({ vm: this, field, item }) : target;
     },
-    setComponent(type, component, option = {}) {
-      components[type] = { component, option };
+    /**
+     * @private
+     */
+    elementOptions(element, extendingOptions = {}, field = {}, item = {}) {
+      const attrName = element.option.native ? 'attrs' : 'props';
+      const elementProps =
+        typeof element.option === 'function' ? element.option : { ...element.option, native: undefined };
+      const options = this.optionValue(field, elementProps, item);
+      return { [attrName]: { ...extendingOptions, ...options }};
     },
-    methods: {
-      /**
-       * @private
-       */
-      optionValue(field, target, item = {}) {
-        return typeof target === 'function'
-          ? target({ vm: this, field, item })
-          : target;
-      },
-      /**
-       * @private
-       */
-      elementOptions(element, extendingOptions = {}, field = {}, item = {}) {
-        const attrName = element.option.native ? 'attrs' : 'props';
-        const elementProps = typeof element.option === 'function'
-          ? element.option
-          : { ...element.option, native: undefined };
-        const options = this.optionValue(field, elementProps, item);
-        return { [attrName]: { ...extendingOptions, ...options }};
-      },
-      /**
-       * @private
-       */
-      changed(e) {
-        /**
-         * Fired when a change to the element's value is committed by the user.
-         */
-        this.$emit('change', e);
-      },
-      /**
-       * Get a form input reference
-       */
-      input(name) {
-        if (!this.$refs[name]) {
-          throw new Error(`Undefined input reference '${ name }'`);
-        }
-        return this.$refs[name][0];
-      },
-      /**
-       * Get the form reference
-       */
-      form() {
-        return this.$refs.__form;
-      },
+    /**
+     * @private
+     */
+    changed(e) {
       /**
-       * Checks whether the form has any constraints and whether it satisfies them. If the form fails its constraints, the browser fires a cancelable `invalid` event at the element, and then returns false.
+       * Fired when a change to the element's value is committed by the user.
        */
-      checkValidity() {
-        return this.$refs.__form.checkValidity();
-      },
+      this.$emit('change', e);
+    },
+    /**
+     * Get a form input reference
+     */
+    input(name) {
+      if (!this.$refs[name]) {
+        throw new Error(`Undefined input reference '${ name }'`);
+      }
+      return this.$refs[name][0];
+    },
+    /**
+     * Get the form reference
+     */
+    form() {
+      return this.$refs.__form;
+    },
+    /**
+     * Checks whether the form has any constraints and whether it satisfies them. If the form fails its constraints, the browser fires a cancelable `invalid` event at the element, and then returns false.
+     */
+    checkValidity() {
+      return this.$refs.__form.checkValidity();
+    },
+    /**
+     * @private
+     */
+    invalid(e) {
       /**
-       * @private
+       * Fired when a submittable element has been checked and doesn't satisfy its constraints. The validity of submittable elements is checked before submitting their owner form, or after the `checkValidity()` of the element or its owner form is called.
        */
-      invalid(e) {
+      this.$emit('invalid', e);
+    },
+    /**
+     * Reset the value of all elements of the parent form.
+     */
+    reset() {
+      for (const key in this.data) {
+        const ns = key.split('.');
+        const n = ns.pop();
+        const ret = ns.length > 0 ? initChild(this.data, ns) : this.data;
+        const value = getChild(this.default, key.split('.'));
+        this.$set(ret, n, value);
+      }
+    },
+    /**
+     * Send the content of the form to the server
+     */
+    submit(event) {
+      if (this.checkValidity()) {
         /**
-         * Fired when a submittable element has been checked and doesn't satisfy its constraints. The validity of submittable elements is checked before submitting their owner form, or after the `checkValidity()` of the element or its owner form is called.
+         * Fired when a form is submitted
          */
-        this.$emit('invalid', e);
-      },
-      /**
-       * Reset the value of all elements of the parent form.
-       */
-      reset() {
-        for (const key in this.data) {
-          const ns = key.split('.');
-          const n = ns.pop();
-          const ret = (ns.length > 0 ? initChild(this.data, ns) : this.data);
-          const value = getChild(this.default, key.split('.'));
-          this.$set(ret, n, value);
-        }
-      },
-      /**
-       * Send the content of the form to the server
-       */
-      submit(event) {
-        if (this.checkValidity()) {
-          /**
-           * Fired when a form is submitted
-           */
-          this.$emit('submit', event);
-        }
-      },
-      /**
-       * Set a message error.
-       */
-      setErrorMessage(message) {
-        this.error = message;
-      },
-      /**
-       * clear the message error.
-       */
-      clearErrorMessage() {
-        this.error = null;
-      },
+        this.$emit('submit', event);
+      }
+    },
+    /**
+     * Set a message error.
+     */
+    setErrorMessage(message) {
+      this.error = message;
+    },
+    /**
+     * clear the message error.
+     */
+    clearErrorMessage() {
+      this.error = null;
     },
-  };
+  },
+};
 </script>
diff --git a/src/parser.js b/src/parser.js
index eba95f5..bc0993c 100644
--- a/src/parser.js
+++ b/src/parser.js
@@ -1,13 +1,11 @@
 'use strict';
 const { initChild, getChild } = require('./utils');
 
-const ARRAY_KEYWORDS = [ 'anyOf', 'oneOf', 'enum' ];
+const ARRAY_KEYWORDS = ['anyOf', 'oneOf', 'enum'];
 
 const setCommonFields = (schema, field, schemaName) => {
   // eslint-disable-next-line no-nested-ternary
-  field.value = schema.hasOwnProperty('default')
-    ? schema.default
-    : field.hasOwnProperty('value') ? field.value : '';
+  field.value = schema.hasOwnProperty('default') ? schema.default : field.hasOwnProperty('value') ? field.value : '';
 
   field.component = schema.component;
   field.schemaType = schema.type;
@@ -23,12 +21,11 @@ const setFormValue = (vm, field) => {
   const vmValue = getChild(vm.value, ns);
   if (vm.value && !vmValue) {
     const n = ns.pop();
-    const ret = (ns.length > 0 ? initChild(vm.value, ns) : vm.value);
+    const ret = ns.length > 0 ? initChild(vm.value, ns) : vm.value;
     vm.$set(ret, n, field.value);
   }
 };
 
-
 export const parseBoolean = (vm, schema, schemaName) => {
   const field = schema.attrs || {};
 
@@ -104,8 +101,8 @@ export const parseString = (vm, schema, schemaName) => {
   return field;
 };
 
-export const parseItems = (items) => {
-  return items.map((item) => {
+export const parseItems = items => {
+  return items.map(item => {
     if (typeof item !== 'object') {
       return { value: item, label: item };
     }
@@ -144,11 +141,10 @@ export const parseArray = (vm, schema, schemaName) => {
         field.value = field.value || [];
         field.items = parseItems(schema[keyword]);
         break;
-
       }
     }
   }
-  if(!field.type) {
+  if (!field.type) {
     field.type = schema.type;
     field.value = field.value || [];
     field.items = [];
@@ -180,14 +176,19 @@ export const loadFields = (vm, schema, fields = vm.fields, sub) => {
           }
         }
       }
-      if(schema.name && !fields[schemaName]) {
+      if (schema.name && !fields[schemaName]) {
         fields[schemaName] = {
           $sub: true,
           $title: schema.title,
           $description: schema.description,
         };
       }
-      loadFields(vm, schema.properties[key], schema.name ? fields[schemaName] : undefined, sub ? [ ...sub, key ] : [ key ]);
+      loadFields(
+        vm,
+        schema.properties[key],
+        schema.name ? fields[schemaName] : undefined,
+        sub ? [...sub, key] : [key]
+      );
     }
     break;
 
@@ -217,5 +218,4 @@ export const loadFields = (vm, schema, fields = vm.fields, sub) => {
   default:
     fields[schemaName] = parseString(vm, schema, schemaName);
   }
-
 };
diff --git a/src/utils.js b/src/utils.js
index fcea363..fa97fd4 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -42,7 +42,7 @@ export function initChild(data, ns) {
     const n = ns[i];
     const ret = getExtendibleLeaf(obj, n, true);
     if (ret === undefined) {
-      throw new TypeError('fail to init because namespace ' + ns.join('.') + ' = ' + obj + '(' + (typeof obj) + ')');
+      throw new TypeError('fail to init because namespace ' + ns.join('.') + ' = ' + obj + '(' + typeof obj + ')');
     }
     parent = obj;
     obj = ret;
@@ -57,7 +57,7 @@ export function setVal(data, n, v) {
   const ns = Array.isArray(n) ? n : n.split('.');
   // eslint-disable-next-line
   n = ns.pop();
-  const ret = (ns.length > 0 ? initChild(data, ns) : data);
+  const ret = ns.length > 0 ? initChild(data, ns) : data;
   ret[n] = v;
   return v;
 }