Set tls provider upon dns provider change, not in a watcher, which has side-effects

dashboard/src/components/DomainProviderForm.vue

@@ -59,6 +59,7 @@ function resetFields() {
   dnsConfig.value.accessToken = '';
   dnsConfig.value.apiKey = '';
   dnsConfig.value.apikey = '';
+  dnsConfig.value.appKey = '';
   dnsConfig.value.appSecret = '';
   dnsConfig.value.apiPassword = '';
   dnsConfig.value.apiSecret = '';
@@ -77,7 +78,7 @@ function resetFields() {
   dnsConfig.value.username = '';
 }
 
-watch(provider, (p) => {
+function onProviderChange(p) {
   resetFields();
 
   // wildcard LE won't work without automated DNS
@@ -86,7 +87,7 @@ watch(provider, (p) => {
   } else {
     tlsProvider.value = 'letsencrypt-prod-wildcard';
   }
-}, { immediate: true });
+}
 
 const gcdnsFileParseError = ref('');
 function onGcdnsFileInputChange(event) {
@@ -127,7 +128,7 @@ function onGcdnsFileInputChange(event) {
   <div>
     <FormGroup>
       <label for="providerInput">{{ $t('domains.domainDialog.provider') }} <sup><a href="https://docs.cloudron.io/domains/#dns-providers" class="help" target="_blank"><i class="fa fa-question-circle"></i></a></sup></label>
-      <SingleSelect v-model="provider" :disabled="disabled" :options="DomainsModel.providers" option-key="value" option-label="name" required />
+      <SingleSelect v-model="provider" :disabled="disabled" :options="DomainsModel.providers" option-key="value" option-label="name" required @select="onProviderChange"/>
     </FormGroup>
 
     <div class="warning-label" v-show="provider === 'wildcard'" v-html="$t('domains.domainDialog.wildcardInfo', { domain: domain })"></div>