fix: watching query param changes to reload lead list

frontend/src/components/SortBy.vue

@@ -144,6 +144,15 @@ watch(
   }
 )
 
+watch(
+  () => getOrderBy(),
+  (value) => {
+    if (!value) {
+      sortValues.value = []
+    }
+  }
+)
+
 function setSort(data) {
   sortValues.value = [
     ...sortValues.value,

frontend/src/main.js

@@ -3,19 +3,18 @@ import './index.css'
 import { createApp } from 'vue'
 import router from './router'
 import App from './App.vue'
-import { createPinia } from "pinia";
+import { createPinia } from 'pinia'
 
-import { FrappeUI, Button, setConfig, frappeRequest, resourcesPlugin } from 'frappe-ui'
+import { FrappeUI, Button, setConfig, frappeRequest } from 'frappe-ui'
 
 // create a pinia instance
-let pinia = createPinia();
+let pinia = createPinia()
 
 let app = createApp(App)
 
 setConfig('resourceFetcher', frappeRequest)
-
 app.use(FrappeUI)
-app.use(pinia);
+app.use(pinia)
 app.use(router)
 
 app.component('Button', Button)

frontend/src/pages/Leads.vue

@@ -70,7 +70,7 @@ import {
   createResource,
 } from 'frappe-ui'
 import { useRouter } from 'vue-router'
-import { ref, computed, reactive, onBeforeUpdate } from 'vue'
+import { ref, computed, reactive, watch } from 'vue'
 
 const list = {
   title: 'Leads',
@@ -101,12 +101,20 @@ const leads = createListResource({
     'lead_owner',
     'modified',
   ],
-  orderBy: getOrderBy() || 'modified desc',
+  orderBy: 'modified desc',
   cache: 'Leads',
   pageLength: 20,
   auto: true,
 })
 
+watch(
+  () => getOrderBy(),
+  (value) => {
+    leads.orderBy = value || 'modified desc'
+    leads.reload()
+  }
+)
+
 const columns = [
   {
     label: 'Name',
@@ -268,9 +276,4 @@ function createNewLead(close) {
     })
     .then(close)
 }
-
-onBeforeUpdate(() => {
-  leads.orderBy = getOrderBy() || 'modified desc'
-  leads.reload()
-})
 </script>