diff --git a/dev/grouping/app.vue b/dev/grouping/app.vue
index d252090e..a38201d1 100644
--- a/dev/grouping/app.vue
+++ b/dev/grouping/app.vue
@@ -1,6 +1,6 @@
 <template lang="html">
 	<form>
-		<vue-form-generator :schema="schema" :model="model" :options="formOptions"></vue-form-generator>
+		<vue-form-generator :schema="schema" :model="model" :options="formOptions" tag="section"></vue-form-generator>
 		<pre>{{ model }}</pre>
 	</form>
 </template>
diff --git a/src/fields/abstractField.js b/src/fields/abstractField.js
index e4c8080f..56feed34 100644
--- a/src/fields/abstractField.js
+++ b/src/fields/abstractField.js
@@ -17,6 +17,7 @@ export default {
 	props: [
 		"model",
 		"schema",
+		"options",
 		"disabled"
 	],
 
@@ -163,14 +164,15 @@ export default {
 		},
 
 		getFieldID(schema) {
+			const idPrefix = this.options && this.options.fieldIdPrefix ? this.options.fieldIdPrefix : "";
 			// Try to get a reasonable default id from the schema,
 			// then slugify it.
 			if (typeof schema.id !== "undefined") {
 				// If an ID's been explicitly set, use it unchanged
-				return schema.idPrefix + schema.id;
+				return idPrefix + schema.id;
 			} else {
 				// Return the slugified version of either:
-				return schema.idPrefix + (schema.inputName || schema.label || schema.model)
+				return idPrefix + (schema.inputName || schema.label || schema.model)
 				// NB: This is a very simple, conservative, slugify function,
 				// avoiding extra dependencies.
 				.toString()
diff --git a/src/formGenerator.vue b/src/formGenerator.vue
index 7f2aac1e..95aff963 100644
--- a/src/formGenerator.vue
+++ b/src/formGenerator.vue
@@ -9,7 +9,7 @@ div.vue-form-generator(v-if='schema != null')
 						i.icon
 						.helpText(v-html='field.help')
 				.field-wrap
-					component(:is='getFieldType(field)', :disabled='fieldDisabled(field)', :model='model', :schema.sync='field', @model-updated='modelUpdated', @validated="onFieldValidated")
+					component(:is='getFieldType(field)', :disabled='fieldDisabled(field)', :model='model', :schema='field', :options='options', @model-updated='modelUpdated', @validated="onFieldValidated")
 					.buttons(v-if='buttonVisibility(field)')
 						button(v-for='btn in field.buttons', @click='buttonClickHandler(btn, field)', :class='btn.classes') {{ btn.label }}
 				.hint(v-if='field.hint') {{ field.hint }}
@@ -27,7 +27,7 @@ div.vue-form-generator(v-if='schema != null')
 							i.icon
 							.helpText(v-html='field.help')
 					.field-wrap
-						component(:is='getFieldType(field)', :disabled='fieldDisabled(field)', :model='model', :schema.sync='field', @model-updated='modelUpdated', @validated="onFieldValidated")
+						component(:is='getFieldType(field)', :disabled='fieldDisabled(field)', :model='model', :schema='field', :options='options',@model-updated='modelUpdated', @validated="onFieldValidated")
 						.buttons(v-if='buttonVisibility(field)')
 							button(v-for='btn in field.buttons', @click='buttonClickHandler(btn, field)', :class='btn.classes') {{ btn.label }}
 					.hint(v-if='field.hint') {{ field.hint }}
@@ -150,22 +150,6 @@ div.vue-form-generator(v-if='schema != null')
 			}
 		},
 
-		beforeMount() {
-			// Add idPrefix to fields if fieldIdPrefix is set
-			if ("groups" in this.schema) {
-				for (let group of this.schema.groups) {
-					for (let field of group.fields) {
-						field.idPrefix = this.options.fieldIdPrefix || "";
-					}
-				}
-			}
-			if ("fields" in this.schema) {
-				for (let field of this.schema.fields) {
-					field.idPrefix = this.options.fieldIdPrefix || "";
-				}
-			}
-		},
-
 		mounted() {
 			this.$nextTick(() => {
 				if (this.model) {