ordenar Listas watcheffect

src/layouts/MainLayout.vue

@@ -11,7 +11,8 @@
           <div class="q-pa-md">
             <div class="q-gutter-md">
 
-              <q-btn color="secondary" label="Menú">
+              <q-btn flat>
+                <q-icon name="menu" />
                 <q-menu>
                   <q-list style="min-width: 100px">
                     <q-item clickable v-close-popup @click="openDialogNewList"
@@ -42,7 +43,7 @@
       </q-card-section>
 
       <q-card-section class="q-pt-none">
-        <q-input dense v-model="nameList" autofocus @keyup.enter="dialogNewList = false" />
+        <q-input dense v-model="nameList" autofocus @keyup.enter="newLista" />
       </q-card-section>
 
       <q-card-actions align="right" class="text-primary">
@@ -101,6 +102,7 @@ const newLista = async () => {
       })
     }
   }
+  dialogNewList.value = false
 }
 
 const openDialogNewList = () => {

src/pages/IndexPage.vue

@@ -47,6 +47,7 @@
 </template>
 
 <script setup>
+import { watchEffect } from 'vue'
 import useSupabase from '../boot/supabase'
 import { useQuasar } from 'quasar'
 import { onMounted } from 'vue'
@@ -59,6 +60,10 @@ const store = supabaseStore()
 const ordenarArray = (array) => {
   array.sort((a, b) => new Date(b.updated_at) - new Date(a.updated_at));
 }
+
+watchEffect(() => {
+  ordenarArray(store.listas)
+})
 const getListas = async () => {
   try {
     let { data: listas, error } = await supabase
@@ -66,7 +71,6 @@ const getListas = async () => {
       .select(`*, profiles(*),items(is_done)`)
     if (error) throw error
     store.listas = listas
-    ordenarArray(store.listas)
   } catch (error) {
     if (error instanceof Error) {
       $q.notify({
@@ -119,7 +123,6 @@ const changeNameList = async (id, nombre) => {
       }
       store.listas.filter(l => l.id === id)[0].nombre = data
       store.listas.filter(l => l.id === id)[0].updated_at = ahora
-      ordenarArray(store.listas)
     })
   } catch (error) {
     if (error instanceof Error) {