refactor(tables): Load on mount

package.json

@@ -1,6 +1,6 @@
 {
   "name": "nuxt3-primevue-starter",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "license": "MIT",
   "private": true,
   "scripts": {
@@ -21,23 +21,23 @@
     "vue-logger-plugin": "^2.2.2"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^0.20.7",
+    "@antfu/eslint-config": "^0.21.1",
     "@iconify-json/carbon": "^1.1.3",
-    "@iconify-json/twemoji": "^1.1.3",
     "@iconify-json/mdi": "^1.1.9",
     "@iconify-json/prime": "^1.1.1",
-    "@nuxt/test-utils-edge": "^3.0.0-rc.1-27510703.46ecbc5",
+    "@iconify-json/twemoji": "^1.1.3",
+    "@nuxt/test-utils-edge": "^3.0.0-rc.1-27515112.2d202b5",
     "@nuxtjs/color-mode": "^3.0.2",
     "@pinia/nuxt": "^0.1.8",
-    "@unocss/nuxt": "^0.31.13",
+    "@unocss/nuxt": "^0.31.16",
     "@vitejs/plugin-vue": "^2.3.1",
-    "@vitest/ui": "^0.9.4",
+    "@vitest/ui": "^0.10.0",
     "@vueuse/nuxt": "^8.3.1",
     "c8": "^7.11.2",
     "eslint": "^8.14.0",
     "nuxt": "^3.0.0-rc.1",
-    "sass": "^1.50.1",
+    "sass": "^1.51.0",
     "typescript": "^4.6.3",
-    "vitest": "^0.9.4"
+    "vitest": "^0.10.0"
   }
 }

pages/prime/table.vue

@@ -38,19 +38,15 @@
 
       </template>
     </DataTable>
-
-    <Button class="mt-6" label="Update Products" @click="update"/>
   </div>
 </template>
 
 <script setup lang='ts'>
-import {useDataStore} from '~/stores/data';
 import {FilterMatchMode} from 'primevue/api';
 import {useDataTable} from "~/composables/primevue/dataTable";
 import {useLogger} from "vue-logger-plugin";
 
 const log = useLogger();
-const dataStore = useDataStore();
 const {tableData, filters, dataTableRef, exportCSV} = useDataTable();
 
 filters.value = {
@@ -68,9 +64,10 @@ watch(products, (newProducts) => {
   tableData.value = newProducts.data
 })
 
-const update = () => {
+onMounted(async () => {
   refreshProducts();
-}
+});
+
 
 </script>
 

pages/stores.vue

@@ -10,7 +10,7 @@
     </div>
 
     <h5 class='font-bold text-2xl mb-4 text-blue-600'>Data Store</h5>
-    <span class='text-xs'>Example of a Cached Pinia Store, data is cached in local storage ...</span>
+    <span class='text-xs'>Example of a Data Store</span>
     <div class='grid grid-cols-2 mt-6 gap-4'>
       <div>Customers</div>
       <div>{{ dataStore.customers.length }}</div>