todavia comprobarUsername no acepta null

src/pages/RegisterPage.vue

@@ -4,12 +4,12 @@
   >
     <div class="column">
       <div class="row">
-        <h5 class="text-h5 text-white q-my-md">Company & Co</h5>
+        <h5 class="text-h5 text-white q-my-md">Mis listas</h5>
       </div>
       <div class="row">
         <q-card square bordered class="q-pa-lg shadow-1">
           <q-card-section>
-            <q-form class="q-gutter-md">
+            <q-form class="q-gutter-md" @click.once="recibeDatos()">
               <q-input
                 square
                 filled
@@ -19,7 +19,7 @@
                 label="username"
                 :rules="[
                   (val) => val.length >= 3 || 'Mínimo 3 caracteres',
-                  (val) => val.length <= 3 || 'Ya existe',
+                  (val) => comprobarUsername?.length == 0 || 'Ya existe',
                 ]"
               />
               <q-input
@@ -79,12 +79,23 @@
 </template>
 
 <script setup>
-import { ref } from "vue";
+import { ref, computed } from "vue";
+import { useListaStore } from "../stores/lista.js";
+const listaStore = useListaStore();
 const email = ref("");
 const password = ref("");
 const username = ref(""); //No exista en la bd, tamaño mínimo
 const confirmpassword = ref("");
 const nombre = ref("");
+const usuarios = ref([]);
+const recibeDatos = () => {
+  listaStore.getUsers().then(function (item) {
+    usuarios.value = item;
+  });
+};
+const comprobarUsername = computed(() => {
+  return usuarios.value?.filter((user) => user.username == username.value);
+});
 </script>
 
 <style>