diff --git a/package.json b/package.json
index b0742ae..ec8c060 100644
--- a/package.json
+++ b/package.json
@@ -33,6 +33,7 @@
   "dependencies": {
     "@babel/runtime": "^7.9.2",
     "babel-polyfill": "^6.26.0",
+    "clone": "^2.1.2",
     "do-bulma": "git+https://github.com/do-community/do-bulma.git",
     "do-vue": "git+https://github.com/do-community/do-vue.git",
     "parcel-bundler": "^1.12.4",
diff --git a/src/nginxconfig/templates/app.vue b/src/nginxconfig/templates/app.vue
index ce0c72f..bd60e48 100644
--- a/src/nginxconfig/templates/app.vue
+++ b/src/nginxconfig/templates/app.vue
@@ -30,7 +30,7 @@ limitations under the License.
             <div class="tabs">
                 <ul>
                     <li v-for="(data, index) in domains" :class="index === active ? 'is-active' : undefined">
-                        <a @click="active = index">{{ data.python.test.value }}{{ changes(index) }}</a>
+                        <a @click="active = index">{{ data.server.domain.computed }}{{ changes(index) }}</a>
                     </li>
                 </ul>
             </div>
@@ -48,6 +48,7 @@ limitations under the License.
 </template>
 
 <script>
+    import clone from 'clone';
     import i18n from '../i18n';
     import Header from 'do-vue/src/templates/header';
     import Footer from 'do-vue/src/templates/footer';
@@ -64,7 +65,8 @@ limitations under the License.
             return {
                 i18n,
                 domains: [
-                    Domain.delegated,
+                    clone(Domain.delegated),
+                    clone(Domain.delegated),
                 ],
                 active: 0,
             };
@@ -72,8 +74,9 @@ limitations under the License.
         methods: {
             changes(index) {
                 const data = this.$data.domains[index];
-                const changes = Object.values(data).reduce((prev, current) => {
-                    prev += Object.values(current).filter(d => d.default !== d.computed).length;
+                const changes = Object.entries(data).reduce((prev, current) => {
+                    if (current[0] === 'presets') return prev; // Ignore changes from presets
+                    prev += Object.values(current[1]).filter(d => d.default !== d.computed).length;
                     return prev;
                 }, 0);
                 if (changes) return ` (${changes.toLocaleString()})`;
diff --git a/src/nginxconfig/templates/domain.vue b/src/nginxconfig/templates/domain.vue
index 6133608..4e002ab 100644
--- a/src/nginxconfig/templates/domain.vue
+++ b/src/nginxconfig/templates/domain.vue
@@ -34,9 +34,9 @@ limitations under the License.
 </template>
 
 <script>
-    import { Python } from './domain_sections';
+    import * as Sections from './domain_sections';
 
-    const tabs = [ Python ];
+    const tabs = Object.values(Sections);
     const delegated = tabs.reduce((prev, tab) => {
         prev[tab.key] = tab.delegated;
         return prev;
@@ -56,6 +56,7 @@ limitations under the License.
         },
         methods: {
             changes(tab) {
+                if (tab === 'presets') return ''; // Ignore changes from presets
                 const changes = Object.values(this.$props.data[tab]).filter(d => d.default !== d.computed).length;
                 if (changes) return ` (${changes.toLocaleString()})`;
                 return '';
diff --git a/src/nginxconfig/templates/domain_sections/https.vue b/src/nginxconfig/templates/domain_sections/https.vue
index 2e94c99..07c3358 100644
--- a/src/nginxconfig/templates/domain_sections/https.vue
+++ b/src/nginxconfig/templates/domain_sections/https.vue
@@ -4,51 +4,66 @@
 
 <script>
     import i18n from '../../i18n';
+    import delegatedFromDefaults from '../../util/delegated_from_defaults';
+    import computedFromDefaults from '../../util/computed_from_defaults';
 
     const defaults = {
-        https: true,
-        http2: true,
-        forceHttps: true,
-        hsts: true,
-        hstsSubdomains: true,
-        hstsPreload: true,
-        certType: 'letsEncrypt',
-        letsEncryptEmail: '',
-        sslCertificate: '',
-        sslCertificateKey: '',
+        https: {
+            default: true,
+            enabled: true,
+        },
+        http2: {
+            default: true,
+            enabled: true,
+        },
+        forceHttps: {
+            default: true,
+            enabled: true,
+        },
+        hsts: {
+            default: true,
+            enabled: true,
+        },
+        hstsSubdomains: {
+            default: true,
+            enabled: true,
+        },
+        hstsPreload: {
+            default: true,
+            enabled: true,
+        },
+        certType: {
+            default: 'letsEncrypt',
+            options: ['letsEncrypt', 'custom'],
+            enabled: true,
+        },
+        letsEncryptEmail: {
+            default: '',
+            enabled: true,
+        },
+        sslCertificate: {
+            default: '',
+            enabled: false,
+        },
+        sslCertificateKey: {
+            default: '',
+            enabled: false,
+        },
     };
 
     export default {
-        name: 'DomainHTTPS',
+        name: 'DomainHTTPS',                        // Component name
+        display: 'HTTPS',                           // Display name for tab
+        key: 'https',                               // Key for data in parent
+        delegated: delegatedFromDefaults(defaults), // Data the parent will present here
         props: {
-            data: Object,
+            data: Object,                           // Data delegated back to us from parent
         },
         data () {
             return {
                 i18n,
-                defaults,
-                ...defaults,
             };
         },
-        created () {
-            if (this.$props.data) {
-                for (const key in this.$props.data) {
-                    if (key in defaults) {
-                        this.$data[key] = this.$props.data[key];
-                    }
-                }
-            }
-        },
-        methods: {
-            exports() {
-                return Object.keys(defaults).reduce((prev, key) => {
-                    prev[key] = this.$data[key];
-                    return prev;
-                }, {});
-            },
-        },
-        changes() {
-            return Object.keys(defaults).filter(key => defaults[key] !== this.$data[key]).length;
-        },
+        computed: computedFromDefaults(defaults),   // Getters & setters for the delegated data
     };
 </script>
diff --git a/src/nginxconfig/templates/domain_sections/logging.vue b/src/nginxconfig/templates/domain_sections/logging.vue
index 1cb9ad6..e8ad5ff 100644
--- a/src/nginxconfig/templates/domain_sections/logging.vue
+++ b/src/nginxconfig/templates/domain_sections/logging.vue
@@ -4,43 +4,33 @@
 
 <script>
     import i18n from '../../i18n';
+    import delegatedFromDefaults from '../../util/delegated_from_defaults';
+    import computedFromDefaults from '../../util/computed_from_defaults';
 
     const defaults = {
-        accessLog: false,
-        errorLog: false,
+        accessLog: {
+            default: false,
+            enabled: true,
+        },
+        errorLog: {
+            default: false,
+            enabled: true,
+        },
     };
 
     export default {
-        name: 'DomainLogging',
+        name: 'DomainLogging',                      // Component name
+        display: 'Logging',                         // Display name for tab
+        key: 'logging',                             // Key for data in parent
+        delegated: delegatedFromDefaults(defaults), // Data the parent will present here
         props: {
-            data: Object,
+            data: Object,                           // Data delegated back to us from parent
         },
         data () {
             return {
                 i18n,
-                defaults,
-                ...defaults,
             };
         },
-        created () {
-            if (this.$props.data) {
-                for (const key in this.$props.data) {
-                    if (key in defaults) {
-                        this.$data[key] = this.$props.data[key];
-                    }
-                }
-            }
-        },
-        methods: {
-            exports() {
-                return Object.keys(defaults).reduce((prev, key) => {
-                    prev[key] = this.$data[key];
-                    return prev;
-                }, {});
-            },
-            changes() {
-                return Object.keys(defaults).filter(key => defaults[key] !== this.$data[key]).length;
-            },
-        },
+        computed: computedFromDefaults(defaults),   // Getters & setters for the delegated data
     };
 </script>
diff --git a/src/nginxconfig/templates/domain_sections/php.vue b/src/nginxconfig/templates/domain_sections/php.vue
index 2678629..43e02ae 100644
--- a/src/nginxconfig/templates/domain_sections/php.vue
+++ b/src/nginxconfig/templates/domain_sections/php.vue
@@ -4,45 +4,41 @@
 
 <script>
     import i18n from '../../i18n';
+    import delegatedFromDefaults from '../../util/delegated_from_defaults';
+    import computedFromDefaults from '../../util/computed_from_defaults';
 
     const defaults = {
-        php: true,
-        wordPressRules: false,
-        drupalRules: false,
-        magentoRules: false,
+        php: {
+            default: true,
+            enabled: true,
+        },
+        wordPressRules: {
+            default: false,
+            enabled: true,
+        },
+        drupalRules: {
+            default: false,
+            enabled: true,
+        },
+        magentoRules: {
+            default: false,
+            enabled: true,
+        },
     };
 
     export default {
-        name: 'DomainPHP',
+        name: 'DomainPHP',                          // Component name
+        display: 'PHP',                             // Display name for tab
+        key: 'php',                                 // Key for data in parent
+        delegated: delegatedFromDefaults(defaults), // Data the parent will present here
         props: {
-            data: Object,
+            data: Object,                           // Data delegated back to us from parent
         },
         data () {
             return {
                 i18n,
-                defaults,
-                ...defaults,
             };
         },
-        created () {
-            if (this.$props.data) {
-                for (const key in this.$props.data) {
-                    if (key in defaults) {
-                        this.$data[key] = this.$props.data[key];
-                    }
-                }
-            }
-        },
-        methods: {
-            exports() {
-                return Object.keys(defaults).reduce((prev, key) => {
-                    prev[key] = this.$data[key];
-                    return prev;
-                }, {});
-            },
-        },
-        changes() {
-            return Object.keys(defaults).filter(key => defaults[key] !== this.$data[key]).length;
-        },
+        computed: computedFromDefaults(defaults),   // Getters & setters for the delegated data
     };
 </script>
diff --git a/src/nginxconfig/templates/domain_sections/presets.vue b/src/nginxconfig/templates/domain_sections/presets.vue
index d2e48d6..0057a03 100644
--- a/src/nginxconfig/templates/domain_sections/presets.vue
+++ b/src/nginxconfig/templates/domain_sections/presets.vue
@@ -4,49 +4,57 @@
 
 <script>
     import i18n from '../../i18n';
+    import delegatedFromDefaults from '../../util/delegated_from_defaults';
+    import computedFromDefaults from '../../util/computed_from_defaults';
 
     const defaults = {
-        frontend: false,
-        php: true,
-        django: false,
-        nodejs: false,
-        singlePageApplication: false,
-        wordPress: false,
-        drupal: false,
-        magento: false,
+        frontend: {
+            default: false,
+            enabled: true,
+        },
+        php: {
+            default: true,
+            enabled: true,
+        },
+        django: {
+            default: false,
+            enabled: true,
+        },
+        nodejs: {
+            default: false,
+            enabled: true,
+        },
+        singlePageApplication: {
+            default: false,
+            enabled: true,
+        },
+        wordPress: {
+            default: false,
+            enabled: true,
+        },
+        drupal: {
+            default: false,
+            enabled: true,
+        },
+        magento: {
+            default: false,
+            enabled: true,
+        },
     };
 
     export default {
-        name: 'DomainPresets',
+        name: 'DomainPresets',                      // Component name
+        display: 'Presets',                         // Display name for tab
+        key: 'presets',                             // Key for data in parent
+        delegated: delegatedFromDefaults(defaults), // Data the parent will present here
         props: {
-            data: Object,
+            data: Object,                           // Data delegated back to us from parent
         },
         data () {
             return {
                 i18n,
-                defaults,
-                ...defaults,
             };
         },
-        created () {
-            if (this.$props.data) {
-                for (const key in this.$props.data) {
-                    if (key in defaults) {
-                        this.$data[key] = this.$props.data[key];
-                    }
-                }
-            }
-        },
-        methods: {
-            exports() {
-                return Object.keys(defaults).reduce((prev, key) => {
-                    prev[key] = this.$data[key];
-                    return prev;
-                }, {});
-            },
-            changes() {
-                return Object.keys(defaults).filter(key => defaults[key] !== this.$data[key]).length;
-            },
-        },
+        computed: computedFromDefaults(defaults),   // Getters & setters for the delegated data
     };
 </script>
diff --git a/src/nginxconfig/templates/domain_sections/python.vue b/src/nginxconfig/templates/domain_sections/python.vue
index fefcb27..59362de 100644
--- a/src/nginxconfig/templates/domain_sections/python.vue
+++ b/src/nginxconfig/templates/domain_sections/python.vue
@@ -1,7 +1,6 @@
 <template>
     <div>
         Hello world python
-        <input v-model="test" type="text" />
     </div>
 </template>
 
@@ -17,11 +16,7 @@
         },
         djangoRules: {
             default: false,
-            enabled: true,
-        },
-        test: {
-            default: '',
-            enabled: true,
+            enabled: false,
         },
     };
 
diff --git a/src/nginxconfig/templates/domain_sections/reverse_proxy.vue b/src/nginxconfig/templates/domain_sections/reverse_proxy.vue
index 39c3d72..881030a 100644
--- a/src/nginxconfig/templates/domain_sections/reverse_proxy.vue
+++ b/src/nginxconfig/templates/domain_sections/reverse_proxy.vue
@@ -4,44 +4,37 @@
 
 <script>
     import i18n from '../../i18n';
+    import delegatedFromDefaults from '../../util/delegated_from_defaults';
+    import computedFromDefaults from '../../util/computed_from_defaults';
 
     const defaults = {
-        reverseProxy: false,
-        path: '/',
-        proxyPass: '',
+        reverseProxy: {
+            default: false,
+            enabled: true,
+        },
+        path: {
+            default: '/',
+            enabled: false,
+        },
+        proxyPass: {
+            default: 'http://127.0.0.1:3000',
+            enabled: false,
+        },
     };
 
     export default {
-        name: 'DomainReverseProxy',
+        name: 'DomainReverseProxy',                 // Component name
+        display: 'Reverse proxy',                   // Display name for tab
+        key: 'reverseProxy',                        // Key for data in parent
+        delegated: delegatedFromDefaults(defaults), // Data the parent will present here
         props: {
-            data: Object,
+            data: Object,                           // Data delegated back to us from parent
         },
         data () {
             return {
                 i18n,
-                defaults,
-                ...defaults,
             };
         },
-        created () {
-            if (this.$props.data) {
-                for (const key in this.$props.data) {
-                    if (key in defaults) {
-                        this.$data[key] = this.$props.data[key];
-                    }
-                }
-            }
-        },
-        methods: {
-            exports() {
-                return Object.keys(defaults).reduce((prev, key) => {
-                    prev[key] = this.$data[key];
-                    return prev;
-                }, {});
-            },
-        },
-        changes() {
-            return Object.keys(defaults).filter(key => defaults[key] !== this.$data[key]).length;
-        },
+        computed: computedFromDefaults(defaults),   // Getters & setters for the delegated data
     };
 </script>
diff --git a/src/nginxconfig/templates/domain_sections/routing.vue b/src/nginxconfig/templates/domain_sections/routing.vue
index 0ee8fad..581da8f 100644
--- a/src/nginxconfig/templates/domain_sections/routing.vue
+++ b/src/nginxconfig/templates/domain_sections/routing.vue
@@ -4,45 +4,43 @@
 
 <script>
     import i18n from '../../i18n';
+    import delegatedFromDefaults from '../../util/delegated_from_defaults';
+    import computedFromDefaults from '../../util/computed_from_defaults';
 
     const defaults = {
-        root: true,
-        index: 'index.php',
-        fallbackRouting: ['index.php'],
-        legacyPhpRouting: false,
+        root: {
+            default: true,
+            enabled: true,
+        },
+        index: {
+            default: 'index.php',
+            options: ['index.html', 'index.php'],
+            enabled: true,
+        },
+        fallbackRouting: {
+            default: ['index.php'],
+            options: ['index.html', 'index.php'],
+            enabled: true,
+        },
+        legacyPhpRouting: {
+            default: false,
+            enabled: true,
+        },
     };
 
     export default {
-        name: 'DomainRouting',
+        name: 'DomainRouting',                      // Component name
+        display: 'Routing',                         // Display name for tab
+        key: 'routing',                             // Key for data in parent
+        delegated: delegatedFromDefaults(defaults), // Data the parent will present here
         props: {
-            data: Object,
+            data: Object,                           // Data delegated back to us from parent
         },
         data () {
             return {
                 i18n,
-                defaults,
-                ...defaults,
             };
         },
-        created () {
-            if (this.$props.data) {
-                for (const key in this.$props.data) {
-                    if (key in defaults) {
-                        this.$data[key] = this.$props.data[key];
-                    }
-                }
-            }
-        },
-        methods: {
-            exports() {
-                return Object.keys(defaults).reduce((prev, key) => {
-                    prev[key] = this.$data[key];
-                    return prev;
-                }, {});
-            },
-            changes() {
-                return Object.keys(defaults).filter(key => defaults[key] !== this.$data[key]).length;
-            },
-        },
+        computed: computedFromDefaults(defaults),   // Getters & setters for the delegated data
     };
 </script>
diff --git a/src/nginxconfig/templates/domain_sections/server.vue b/src/nginxconfig/templates/domain_sections/server.vue
index 1ac585f..723efb1 100644
--- a/src/nginxconfig/templates/domain_sections/server.vue
+++ b/src/nginxconfig/templates/domain_sections/server.vue
@@ -7,47 +7,57 @@
 
 <script>
     import i18n from '../../i18n';
+    import delegatedFromDefaults from '../../util/delegated_from_defaults';
+    import computedFromDefaults from '../../util/computed_from_defaults';
 
     const defaults = {
-        domain: 'example.com',
-        path: '',
-        documentRoot: '',
-        wwwSubdomain: false,
-        cdnSubdomain: false,
-        redirectSubdomains: true,
+        domain: {
+            default: 'example.com',
+            enabled: true,
+        },
+        path: {
+            default: '',
+            enabled: true,
+        },
+        documentRoot: {
+            default: '/public',
+            enabled: true,
+        },
+        wwwSubdomain: {
+            default: false,
+            enabled: true,
+        },
+        cdnSubdomain: {
+            default: false,
+            enabled: false,
+        },
+        redirectSubdomains: {
+            default: true,
+            enabled: true,
+        },
+        listenIpv4: {
+            default: '*',
+            enabled: true,
+        },
+        listenIpv6: {
+            default: '::',
+            enabled: true,
+        },
     };
 
     export default {
-        name: 'DomainServer',
+        name: 'DomainServer',                       // Component name
+        display: 'Server',                          // Display name for tab
+        key: 'server',                              // Key for data in parent
+        delegated: delegatedFromDefaults(defaults), // Data the parent will present here
         props: {
-            data: Object,
+            data: Object,                           // Data delegated back to us from parent
         },
         data () {
             return {
                 i18n,
-                defaults,
-                ...defaults,
             };
         },
-        created () {
-            if (this.$props.data) {
-                for (const key in this.$props.data) {
-                    if (key in defaults) {
-                        this.$data[key] = this.$props.data[key];
-                    }
-                }
-            }
-        },
-        methods: {
-            exports() {
-                return Object.keys(defaults).reduce((prev, key) => {
-                    prev[key] = this.$data[key];
-                    return prev;
-                }, {});
-            },
-            changes() {
-                return Object.keys(defaults).filter(key => defaults[key] !== this.$data[key]).length;
-            },
-        },
+        computed: computedFromDefaults(defaults),   // Getters & setters for the delegated data
     };
 </script>