Repository: digitalocean/nginxconfig.io
File: src/nginxconfig/templates/domain_sections/https.vue (Vue)

Code before:
                        this.$props.data.http3.computed = this.$props.data.http3.value;
                        this.$props.data.forceHttps.enabled = true;
                        this.$props.data.forceHttps.computed = this.$props.data.forceHttps.value;
                        this.$props.data.hsts.enabled = true;
                        this.$props.data.hsts.computed = this.$props.data.hsts.value;
                        this.$props.data.certType.enabled = true;
                        this.$props.data.certType.computed = this.$props.data.certType.value;
                    } else {
                        this.$props.data.http2.enabled = false;
                        this.$props.data.http2.computed = false;
                        this.$props.data.http3.enabled = false;
                        this.$props.data.http3.computed = false;
                        this.$props.data.forceHttps.enabled = false;
                        this.$props.data.forceHttps.computed = false;
                        this.$props.data.hsts.enabled = false;
                        this.$props.data.hsts.computed = false;
                        this.$props.data.certType.enabled = false;
                        this.$props.data.certType.computed = '';
                    }
                },
                deep: true,
            },
            // Only allow port reuse when HTTP/3 is enabled first
            '$props.data.http3': {
                handler(data) {
                    // This might cause recursion, but seems not to
                    if (data.computed) {
                        this.$props.data.portReuse.enabled = true;
                        this.$props.data.portReuse.computed = this.$props.data.portReuse.value;
                    } else {
                        this.$props.data.portReuse.enabled = false;
                        this.$props.data.portReuse.computed = false;
                    }
                },
                deep: true,
            },
            // Disable hsts options if hsts is disabled
            '$props.data': {
                handler() {
                    // hstsSubdomains
                    if (this.$props.data.hsts.computed) {
                        this.$props.data.hstsSubdomains.enabled = true;
                        this.$props.data.hstsSubdomains.computed = this.$props.data.hstsSubdomains.value;
                    } else {
                        this.$props.data.hstsSubdomains.enabled = false;
                        this.$props.data.hstsSubdomains.computed = false;
                    }

                    // hstsPreload
                    if (this.$props.data.hsts.computed && this.$props.data.hstsSubdomains.computed) {
                        this.$props.data.hstsPreload.enabled = true;

Review comment (suggestion):
```suggestion
```
Comment doesn't make sense, nothing here should result in recursion, this is updating a completely different object from the one being watched.

Code after:
                    if (state) {
                        this.$props.data.http2.enabled = true;
                        this.$props.data.http2.computed = this.$props.data.http2.value;
                        this.$props.data.http3.enabled = true;
                        this.$props.data.http3.computed = this.$props.data.http3.value;
                        this.$props.data.forceHttps.enabled = true;
                        this.$props.data.forceHttps.computed = this.$props.data.forceHttps.value;
                        this.$props.data.hsts.enabled = true;
                        this.$props.data.hsts.computed = this.$props.data.hsts.value;
                        this.$props.data.certType.enabled = true;
                        this.$props.data.certType.computed = this.$props.data.certType.value;
                    } else {
                        this.$props.data.http2.enabled = false;
                        this.$props.data.http2.computed = false;
                        this.$props.data.http3.enabled = false;
                        this.$props.data.http3.computed = false;
                        this.$props.data.forceHttps.enabled = false;
                        this.$props.data.forceHttps.computed = false;
                        this.$props.data.hsts.enabled = false;
                        this.$props.data.hsts.computed = false;
                        this.$props.data.certType.enabled = false;
                        this.$props.data.certType.computed = '';
                    }
                },
                deep: true,
            },
            // Only allow port reuse when HTTP/3 is enabled first
            '$props.data.http3': {
                handler(data) {
                    if (data.computed) {
                        this.$props.data.portReuse.enabled = true;
                        this.$props.data.portReuse.computed = this.$props.data.portReuse.value;
                    } else {
                        this.$props.data.portReuse.enabled = false;
                        this.$props.data.portReuse.computed = false;
                    }
                },
                deep: true,
            },
            // Disable hsts options if hsts is disabled
            '$props.data': {
                handler() {
                    // hstsSubdomains
                    if (this.$props.data.hsts.computed) {
                        this.$props.data.hstsSubdomains.enabled = true;
                        this.$props.data.hstsSubdomains.computed = this.$props.data.hstsSubdomains.value;
                    } else {
                        this.$props.data.hstsSubdomains.enabled = false;
                        this.$props.data.hstsSubdomains.computed = false;
                    }