diff --git a/app/src/views/domain/DomainAdd.vue b/app/src/views/domain/DomainAdd.vue
index 47afb9bd..79014e60 100644
--- a/app/src/views/domain/DomainAdd.vue
+++ b/app/src/views/domain/DomainAdd.vue
@@ -34,7 +34,7 @@ function init() {
   })
 }
 
-function save() {
+async function save() {
   return ngx.build_config(ngx_config).then(r => {
     // eslint-disable-next-line promise/no-nesting
     domain.save(ngx_config.name, { name: ngx_config.name, content: r.content, overwrite: true }).then(() => {
@@ -82,8 +82,13 @@ async function next() {
   await save()
   current_step.value++
 }
+
+const ngx_directives = computed(() => {
+  return ngx_config.servers[0].directives
+})
+
 provide('save_site_config', save)
-provide('ngx_directives', ngx_config.servers[0].directives)
+provide('ngx_directives', ngx_directives)
 provide('ngx_config', ngx_config)
 </script>
 
diff --git a/app/src/views/domain/ngx_conf/config_template/ConfigTemplate.vue b/app/src/views/domain/ngx_conf/config_template/ConfigTemplate.vue
index 45c3c5dd..2b8d1059 100644
--- a/app/src/views/domain/ngx_conf/config_template/ConfigTemplate.vue
+++ b/app/src/views/domain/ngx_conf/config_template/ConfigTemplate.vue
@@ -72,8 +72,12 @@ function build_template() {
   })
 }
 
+const ngx_directives = computed(() => {
+  return data.value?.directives
+})
+
 provide('build_template', build_template)
-provide('ngx_directives', data.value?.directives)
+provide('ngx_directives', ngx_directives)
 </script>
 
 <template>
diff --git a/app/src/views/domain/ngx_conf/directive/DirectiveEditor.vue b/app/src/views/domain/ngx_conf/directive/DirectiveEditor.vue
index 6b2bf7ff..7a5b4096 100644
--- a/app/src/views/domain/ngx_conf/directive/DirectiveEditor.vue
+++ b/app/src/views/domain/ngx_conf/directive/DirectiveEditor.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useGettext } from 'vue3-gettext'
 import Draggable from 'vuedraggable'
-import { provide } from 'vue'
+import type { ComputedRef } from 'vue'
 import DirectiveAdd from './DirectiveAdd.vue'
 import DirectiveEditorItem from '@/views/domain/ngx_conf/directive/DirectiveEditorItem.vue'
 import type { NgxDirective } from '@/api/ngx'
@@ -13,7 +13,7 @@ defineProps<{
 const { $gettext } = useGettext()
 const current_idx = ref(-1)
 
-const ngx_directives = inject('ngx_directives') as NgxDirective[]
+const ngx_directives = inject('ngx_directives') as ComputedRef<NgxDirective[]>
 
 provide('current_idx', current_idx)
 </script>