fix: captcha ref not defined

src/components/Board/BoardForm.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed } from 'vue';
+import { ref, computed, useTemplateRef } from 'vue';
 import CAPTCHA from '../CAPTCHA.vue';
 
 const emit = defineEmits(['new-message']);
@@ -7,7 +7,7 @@ const props = defineProps(['locked']);
 
 const text = ref('');
 
-const captcha = ref(null);
+const captcha = useTemplateRef('captcha');
 const captchaResponse = ref(null);
 const captchaVerified = computed(() => {
   return captchaResponse.value !== null;

src/components/Login/LoginForm.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, watch, computed } from 'vue';
+import { ref, watch, computed, useTemplateRef } from 'vue';
 import CAPTCHA from '../CAPTCHA.vue';
 
 const emit = defineEmits(['login-submit']);
@@ -7,6 +7,7 @@ const emit = defineEmits(['login-submit']);
 const username = ref('');
 const password = ref('');
 
+const captcha = useTemplateRef('captcha');
 const captchaResponse = ref(null);
 const captchaVerified = computed(() => {
   return captchaResponse.value !== null;
@@ -91,6 +92,7 @@ const submit = () => {
         </div>
       </div>
       <CAPTCHA
+        ref="captcha"
         :hcaptchaSitekey="$hcaptchaSitekey"
         :recaptchaSitekey="$recaptchaSitekey"
         :turnstileSitekey="$turnstileSitekey"

src/components/Profile/ProfileForm.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed, defineProps } from 'vue';
+import { ref, computed, defineProps, useTemplateRef } from 'vue';
 import { useRouter } from 'vue-router';
 import { uploadAvatar } from '../../lib/api';
 import CAPTCHA from '../CAPTCHA.vue';
@@ -17,6 +17,8 @@ const router = useRouter();
 
 const avatarFile = ref(null);
 const avatarError = ref('');
+
+const captcha = useTemplateRef('captcha');
 const captchaResponse = ref(null);
 
 const onFileChange = (event) => {
@@ -101,6 +103,7 @@ const avatarUrl = computed(() => {
         </div>
       </div>
       <CAPTCHA
+        ref="captcha"
         :hcaptchaSitekey="$hcaptchaSitekey"
         :recaptchaSitekey="$recaptchaSitekey"
         :turnstileSitekey="$turnstileSitekey"

src/components/Register/RegisterForm.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, watch, computed } from 'vue';
+import { ref, watch, computed, useTemplateRef } from 'vue';
 import CAPTCHA from '../CAPTCHA.vue';
 
 const emit = defineEmits(['new-user']);
@@ -11,6 +11,7 @@ const captchaResponse = ref(null);
 const usernameError = ref('');
 const passwordError = ref('');
 
+const captcha = useTemplateRef('captcha');
 const captchaVerified = computed(() => {
   return captchaResponse.value !== null;
 });
@@ -62,6 +63,7 @@ const submit = () => {
   }
 
   emit('new-user', { username: username.value, password: password.value, captchaResponse: captchaResponse.value });
+  captcha.value.reset();
 };
 </script>
 

src/views/DailyMottoView.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, ref } from 'vue';
+import { computed, ref, useTemplateRef } from 'vue';
 import { generateMotto as generateMottoApi } from '../lib/api';
 import { useAuthStore } from '../stores/auth';
 
@@ -10,7 +10,7 @@ const mottoLoading = ref(false);
 
 const authStore = useAuthStore();
 
-const captcha = ref(null);
+const captcha = useTemplateRef('captcha');
 const captchaResponse = ref(null);
 const captchaVerified = computed(() => {
   return captchaResponse.value !== null;