diff --git a/frontend/src/components/SidePanelLayout.vue b/frontend/src/components/SidePanelLayout.vue
index 878bf6953..4b47125c8 100644
--- a/frontend/src/components/SidePanelLayout.vue
+++ b/frontend/src/components/SidePanelLayout.vue
@@ -101,7 +101,10 @@
                                 :label="data[field.fieldname]"
                                 class="dropdown-button flex w-full items-center justify-between rounded border border-gray-100 bg-surface-gray-2 px-2 py-1.5 text-base text-ink-gray-8 placeholder-ink-gray-4 transition-colors hover:border-outline-gray-modals hover:bg-surface-gray-3 focus:border-outline-gray-4 focus:bg-surface-white focus:shadow-sm focus:outline-none focus:ring-0 focus-visible:ring-2 focus-visible:ring-outline-gray-3"
                               >
-                                <div v-if="data[field.fieldname]" class="truncate">
+                                <div
+                                  v-if="data[field.fieldname]"
+                                  class="truncate"
+                                >
                                   {{ data[field.fieldname] }}
                                 </div>
                                 <div
diff --git a/frontend/src/pages/Contact.vue b/frontend/src/pages/Contact.vue
index ea386e408..92f919a1e 100644
--- a/frontend/src/pages/Contact.vue
+++ b/frontend/src/pages/Contact.vue
@@ -227,9 +227,7 @@ const _address = ref({})
 const contact = createResource({
   url: 'crm.api.contact.get_contact',
   cache: ['contact', props.contactId],
-  params: {
-    name: props.contactId,
-  },
+  params: { name: props.contactId },
   auto: true,
   transform: (data) => {
     return {
@@ -340,7 +338,7 @@ const sections = createResource({
   cache: ['sidePanelSections', 'Contact'],
   params: { doctype: 'Contact' },
   auto: true,
-  transform: (data) => getParsedSections(data),
+  transform: (data) => computed(() => getParsedSections(data)),
 })
 
 function getParsedSections(_sections) {
diff --git a/frontend/src/pages/MobileContact.vue b/frontend/src/pages/MobileContact.vue
index dc6dcfffc..a3caf3655 100644
--- a/frontend/src/pages/MobileContact.vue
+++ b/frontend/src/pages/MobileContact.vue
@@ -320,9 +320,7 @@ const tabs = [
 const deals = createResource({
   url: 'crm.api.contact.get_linked_deals',
   cache: ['deals', props.contactId],
-  params: {
-    contact: props.contactId,
-  },
+  params: { contact: props.contactId },
   auto: true,
 })
 
@@ -337,7 +335,7 @@ const sections = createResource({
   cache: ['sidePanelSections', 'Contact'],
   params: { doctype: 'Contact' },
   auto: true,
-  transform: (data) => getParsedSections(data),
+  transform: (data) => computed(() => getParsedSections(data)),
 })
 
 function getParsedSections(_sections) {