diff --git a/resources/scripts/admin/views/customers/partials/CustomerChart.vue b/resources/scripts/admin/views/customers/partials/CustomerChart.vue
index 8b85c102c..ce60d968b 100644
--- a/resources/scripts/admin/views/customers/partials/CustomerChart.vue
+++ b/resources/scripts/admin/views/customers/partials/CustomerChart.vue
@@ -35,16 +35,7 @@
       </div>
 
       <div
-        class="
-          grid
-          col-span-12
-          mt-6
-          text-center
-          xl:mt-0
-          sm:grid-cols-4
-          xl:text-right xl:col-span-3 xl:grid-cols-1
-          xxl:col-span-2
-        "
+        class="grid col-span-12 mt-6 text-center xl:mt-0 sm:grid-cols-4 xl:text-right xl:col-span-3 xl:grid-cols-1 xxl:col-span-2"
       >
         <div class="px-6 py-2">
           <span class="text-xs leading-5 lg:text-sm">
@@ -177,10 +168,12 @@ const getChartInvoices = computed(() => {
   return []
 })
 
+const customerId = computed(() => route.params.id)
+
 watch(
-  route,
-  () => {
-    if (route.params.id) {
+  () => customerId.value,
+  (id) => {
+    if (id && route.name === 'customers.view') {
       loadCustomer()
     }
     selectedYear.value = 'This year'
diff --git a/resources/scripts/admin/views/estimates/View.vue b/resources/scripts/admin/views/estimates/View.vue
index a4d0f7996..878ac4d5e 100644
--- a/resources/scripts/admin/views/estimates/View.vue
+++ b/resources/scripts/admin/views/estimates/View.vue
@@ -37,32 +37,10 @@
 
     <!-- Sidebar -->
     <div
-      class="
-        fixed
-        top-0
-        left-0
-        hidden
-        h-full
-        pt-16
-        pb-[6.4rem]
-        ml-56
-        bg-white
-        xl:ml-64
-        w-88
-        xl:block
-      "
+      class="fixed top-0 left-0 hidden h-full pt-16 pb-[6.4rem] ml-56 bg-white xl:ml-64 w-88 xl:block"
     >
       <div
-        class="
-          flex
-          items-center
-          justify-between
-          px-4
-          pt-8
-          pb-2
-          border border-gray-200 border-solid
-          height-full
-        "
+        class="flex items-center justify-between px-4 pt-8 pb-2 border border-gray-200 border-solid height-full"
       >
         <div class="mb-6">
           <BaseInput
@@ -92,14 +70,7 @@
             </template>
 
             <div
-              class="
-                px-4
-                py-1
-                pb-2
-                mb-1 mb-2
-                text-sm
-                border-b border-gray-200 border-solid
-              "
+              class="px-4 py-1 pb-2 mb-1 mb-2 text-sm border-b border-gray-200 border-solid"
             >
               {{ $t('general.sort_by') }}
             </div>
@@ -156,12 +127,7 @@
 
       <div
         ref="estimateListSection"
-        class="
-          h-full
-          overflow-y-scroll
-          border-l border-gray-200 border-solid
-          base-scroll
-        "
+        class="h-full overflow-y-scroll border-l border-gray-200 border-solid base-scroll"
       >
         <div v-for="(estimate, index) in estimateList" :key="index">
           <router-link
@@ -181,29 +147,11 @@
               <BaseText
                 :text="estimate.customer.name"
                 :length="30"
-                class="
-                  pr-2
-                  mb-2
-                  text-sm
-                  not-italic
-                  font-normal
-                  leading-5
-                  text-black
-                  capitalize
-                  truncate
-                "
+                class="pr-2 mb-2 text-sm not-italic font-normal leading-5 text-black capitalize truncate"
               />
 
               <div
-                class="
-                  mt-1
-                  mb-2
-                  text-xs
-                  not-italic
-                  font-medium
-                  leading-5
-                  text-gray-600
-                "
+                class="mt-1 mb-2 text-xs not-italic font-medium leading-5 text-gray-600"
               >
                 {{ estimate.estimate_number }}
               </div>
@@ -220,26 +168,11 @@
               <BaseFormatMoney
                 :amount="estimate.total"
                 :currency="estimate.customer.currency"
-                class="
-                  block
-                  mb-2
-                  text-xl
-                  not-italic
-                  font-semibold
-                  leading-8
-                  text-right text-gray-900
-                "
+                class="block mb-2 text-xl not-italic font-semibold leading-8 text-right text-gray-900"
               />
 
               <div
-                class="
-                  text-sm
-                  not-italic
-                  font-normal
-                  leading-5
-                  text-right text-gray-600
-                  est-date
-                "
+                class="text-sm not-italic font-normal leading-5 text-right text-gray-600 est-date"
               >
                 {{ estimate.formatted_estimate_date }}
               </div>
@@ -264,13 +197,7 @@
     >
       <iframe
         :src="`${shareableLink}`"
-        class="
-          flex-1
-          border border-gray-400 border-solid
-          rounded-md
-          bg-white
-          frame-style
-        "
+        class="flex-1 border border-gray-400 border-solid rounded-md bg-white frame-style"
       />
     </div>
   </BasePage>
@@ -345,11 +272,14 @@ const getCurrentEstimateId = computed(() => {
   return null
 })
 
-watch(route, (to, from) => {
-  if (to.name === 'estimates.view') {
-    loadEstimate()
+const estimateId = computed(() => route.params.id)
+
+watch(
+  () => estimateId.value,
+  (id) => {
+    if (id && route.name === 'estimates.view') loadEstimate()
   }
-})
+)
 
 loadEstimates()
 loadEstimate()
diff --git a/resources/scripts/admin/views/invoices/View.vue b/resources/scripts/admin/views/invoices/View.vue
index 6e2829343..40b13a582 100644
--- a/resources/scripts/admin/views/invoices/View.vue
+++ b/resources/scripts/admin/views/invoices/View.vue
@@ -65,11 +65,14 @@ const getCurrentInvoiceId = computed(() => {
   return null
 })
 
-watch(route, (to, from) => {
-  if (to.name === 'invoices.view') {
-    loadInvoice()
+const invoiceId = computed(() => route.params.id)
+
+watch(
+  () => invoiceId.value,
+  (id) => {
+    if (id && route.name === 'invoices.view') loadInvoice()
   }
-})
+)
 
 async function onMarkAsSent() {
   dialogStore
@@ -286,32 +289,10 @@ onSearched = debounce(onSearched, 500)
 
     <!-- sidebar -->
     <div
-      class="
-        fixed
-        top-0
-        left-0
-        hidden
-        h-full
-        pt-16
-        pb-[6.4rem]
-        ml-56
-        bg-white
-        xl:ml-64
-        w-88
-        xl:block
-      "
+      class="fixed top-0 left-0 hidden h-full pt-16 pb-[6.4rem] ml-56 bg-white xl:ml-64 w-88 xl:block"
     >
       <div
-        class="
-          flex
-          items-center
-          justify-between
-          px-4
-          pt-8
-          pb-2
-          border border-gray-200 border-solid
-          height-full
-        "
+        class="flex items-center justify-between px-4 pt-8 pb-2 border border-gray-200 border-solid height-full"
       >
         <div class="mb-6">
           <BaseInput
@@ -335,14 +316,7 @@ onSearched = debounce(onSearched, 500)
               </BaseButton>
             </template>
             <div
-              class="
-                px-2
-                py-1
-                pb-2
-                mb-1 mb-2
-                text-sm
-                border-b border-gray-200 border-solid
-              "
+              class="px-2 py-1 pb-2 mb-1 mb-2 text-sm border-b border-gray-200 border-solid"
             >
               {{ $t('general.sort_by') }}
             </div>
@@ -399,12 +373,7 @@ onSearched = debounce(onSearched, 500)
 
       <div
         ref="invoiceListSection"
-        class="
-          h-full
-          overflow-y-scroll
-          border-l border-gray-200 border-solid
-          base-scroll
-        "
+        class="h-full overflow-y-scroll border-l border-gray-200 border-solid base-scroll"
       >
         <div v-for="(invoice, index) in invoiceList" :key="index">
           <router-link
@@ -424,29 +393,11 @@ onSearched = debounce(onSearched, 500)
               <BaseText
                 :text="invoice.customer.name"
                 :length="30"
-                class="
-                  pr-2
-                  mb-2
-                  text-sm
-                  not-italic
-                  font-normal
-                  leading-5
-                  text-black
-                  capitalize
-                  truncate
-                "
+                class="pr-2 mb-2 text-sm not-italic font-normal leading-5 text-black capitalize truncate"
               />
 
               <div
-                class="
-                  mt-1
-                  mb-2
-                  text-xs
-                  not-italic
-                  font-medium
-                  leading-5
-                  text-gray-600
-                "
+                class="mt-1 mb-2 text-xs not-italic font-medium leading-5 text-gray-600"
               >
                 {{ invoice.invoice_number }}
               </div>
@@ -460,27 +411,12 @@ onSearched = debounce(onSearched, 500)
 
             <div class="flex-1 whitespace-nowrap right">
               <BaseFormatMoney
-                class="
-                  mb-2
-                  text-xl
-                  not-italic
-                  font-semibold
-                  leading-8
-                  text-right text-gray-900
-                  block
-                "
+                class="mb-2 text-xl not-italic font-semibold leading-8 text-right text-gray-900 block"
                 :amount="invoice.total"
                 :currency="invoice.customer.currency"
               />
               <div
-                class="
-                  text-sm
-                  not-italic
-                  font-normal
-                  leading-5
-                  text-right text-gray-600
-                  est-date
-                "
+                class="text-sm not-italic font-normal leading-5 text-right text-gray-600 est-date"
               >
                 {{ invoice.formatted_invoice_date }}
               </div>
@@ -505,13 +441,7 @@ onSearched = debounce(onSearched, 500)
     >
       <iframe
         :src="`${shareableLink}`"
-        class="
-          flex-1
-          border border-gray-400 border-solid
-          bg-white
-          rounded-md
-          frame-style
-        "
+        class="flex-1 border border-gray-400 border-solid bg-white rounded-md frame-style"
       />
     </div>
   </BasePage>
diff --git a/resources/scripts/admin/views/payments/View.vue b/resources/scripts/admin/views/payments/View.vue
index 0b08827e3..13565f883 100644
--- a/resources/scripts/admin/views/payments/View.vue
+++ b/resources/scripts/admin/views/payments/View.vue
@@ -22,31 +22,10 @@
 
     <!-- Sidebar -->
     <div
-      class="
-        fixed
-        top-0
-        left-0
-        hidden
-        h-full
-        pt-16
-        pb-[6rem]
-        ml-56
-        bg-white
-        xl:ml-64
-        w-88
-        xl:block
-      "
+      class="fixed top-0 left-0 hidden h-full pt-16 pb-[6rem] ml-56 bg-white xl:ml-64 w-88 xl:block"
     >
       <div
-        class="
-          flex
-          items-center
-          justify-between
-          px-4
-          pt-8
-          pb-6
-          border border-gray-200 border-solid
-        "
+        class="flex items-center justify-between px-4 pt-8 pb-6 border border-gray-200 border-solid"
       >
         <BaseInput
           v-model="searchData.searchText"
@@ -70,14 +49,7 @@
             </template>
 
             <div
-              class="
-                px-4
-                py-1
-                pb-2
-                mb-2
-                text-sm
-                border-b border-gray-200 border-solid
-              "
+              class="px-4 py-1 pb-2 mb-2 text-sm border-b border-gray-200 border-solid"
             >
               {{ $t('general.sort_by') }}
             </div>
@@ -159,43 +131,17 @@
               <BaseText
                 :text="payment?.customer?.name"
                 :length="30"
-                class="
-                  pr-2
-                  mb-2
-                  text-sm
-                  not-italic
-                  font-normal
-                  leading-5
-                  text-black
-                  capitalize
-                  truncate
-                "
+                class="pr-2 mb-2 text-sm not-italic font-normal leading-5 text-black capitalize truncate"
               />
 
               <div
-                class="
-                  mb-1
-                  text-xs
-                  not-italic
-                  font-medium
-                  leading-5
-                  text-gray-500
-                  capitalize
-                "
+                class="mb-1 text-xs not-italic font-medium leading-5 text-gray-500 capitalize"
               >
                 {{ payment?.payment_number }}
               </div>
 
               <div
-                class="
-                  mb-1
-                  text-xs
-                  not-italic
-                  font-medium
-                  leading-5
-                  text-gray-500
-                  capitalize
-                "
+                class="mb-1 text-xs not-italic font-medium leading-5 text-gray-500 capitalize"
               >
                 {{ payment?.invoice_number }}
               </div>
@@ -203,15 +149,7 @@
 
             <div class="flex-1 whitespace-nowrap right">
               <BaseFormatMoney
-                class="
-                  block
-                  mb-2
-                  text-xl
-                  not-italic
-                  font-semibold
-                  leading-8
-                  text-right text-gray-900
-                "
+                class="block mb-2 text-xl not-italic font-semibold leading-8 text-right text-gray-900"
                 :amount="payment?.amount"
                 :currency="payment.customer?.currency"
               />
@@ -313,9 +251,14 @@ const paymentDate = computed(() => {
   )
 })
 
-watch(route, () => {
-  loadPayment()
-})
+const paymentId = computed(() => route.params.id)
+
+watch(
+  () => paymentId.value,
+  (id) => {
+    if (id && route.name === 'payments.view') loadPayment()
+  }
+)
 
 loadPayments()
 loadPayment()
diff --git a/resources/scripts/admin/views/recurring-invoices/partials/RecurringInvoiceInfo.vue b/resources/scripts/admin/views/recurring-invoices/partials/RecurringInvoiceInfo.vue
index bdee42e53..c80b3bcb4 100644
--- a/resources/scripts/admin/views/recurring-invoices/partials/RecurringInvoiceInfo.vue
+++ b/resources/scripts/admin/views/recurring-invoices/partials/RecurringInvoiceInfo.vue
@@ -78,10 +78,12 @@ let isLoading = computed(() => {
   return recurringInvoiceStore.isFetchingViewData
 })
 
+const invoiceId = computed(() => route.params.id)
+
 watch(
-  route,
-  () => {
-    if (route.params.id && route.name === 'recurring-invoices.view') {
+  () => invoiceId.value,
+  (id) => {
+    if (id && route.name === 'recurring-invoices.view') {
       loadRecurringInvoice()
     }
   },