fix: period selection error, sync issue, no transaction message

src/components/Charts/DonutChart.vue

@@ -57,12 +57,18 @@
     <div class="relative" style="top: -50%">
       <div class="text-base text-center font-semibold grid justify-center">
         <p class="text-xs text-gray-600 w-32">
-          {{ active !== null ? sectors[active].label : totalLabel }}
+          {{
+            active !== null && sectors.length !== 0
+              ? sectors[active].label
+              : totalLabel
+          }}
         </p>
         <p class="w-32">
           {{
             valueFormatter(
-              active !== null ? sectors[active].value : totalValue,
+              active !== null && sectors.length !== 0
+                ? sectors[active].value
+                : totalValue,
               'Currency'
             )
           }}

src/pages/Dashboard/Expenses.vue

@@ -37,7 +37,7 @@
     </div>
     <div v-if="expenses.length === 0" class="flex-1 w-full h-full flex-center">
       <span class="text-base text-gray-600">
-        {{ _('No transactions yet') }}
+        {{ _('No expenses in this period') }}
       </span>
     </div>
   </div>
@@ -63,11 +63,13 @@ export default {
     active: null,
     expenses: [],
   }),
-  mounted() {
-    this.setData();
-  },
   watch: {
-    period: 'render',
+    period(new_, old) {
+      this.setData();
+    },
+  },
+  activated() {
+    this.setData();
   },
   computed: {
     totalExpense() {