diff --git a/src/pages/08_request-list/RequestListView.vue b/src/pages/08_request-list/RequestListView.vue
index d82829a7..982f3203 100644
--- a/src/pages/08_request-list/RequestListView.vue
+++ b/src/pages/08_request-list/RequestListView.vue
@@ -812,25 +812,32 @@ function toEmployee(employee: RequestData['employee']) {
             </transition>
           </article>
           <!-- product -->
-          <template v-for="(value, index) in productsList" :key="value">
+          <template
+            v-for="(value, index) in productsList.map((v) =>
+              Object.assign(v, {
+                _readonly:
+                  data.requestDataStatus === RequestDataStatus.Canceled ||
+                  (responsibleList &&
+                    (!!responsibleList[pageState.currentStep]?.user?.length ||
+                      !!responsibleList[pageState.currentStep]?.group
+                        ?.length) &&
+                    !responsibleList[pageState.currentStep]?.user.find(
+                      (v) => v.id === getUserId(),
+                    ) &&
+                    !responsibleList[pageState.currentStep]?.group.some((v) =>
+                      currentUserGroup.includes(v),
+                    )),
+              }),
+            )"
+            :key="value"
+          >
             <ProductExpansion
               :request-cancel="value.customerRequestCancel"
               :request-cancel-reason="value.customerRequestCancelReason"
               :reject-request-cancel="value.rejectRequestCancel"
               :reject-request-cancel-reason="value.rejectRequestCancelReason"
               :cancel="data.requestDataStatus === RequestDataStatus.Canceled"
-              :readonly="
-                data.requestDataStatus === RequestDataStatus.Canceled ||
-                (responsibleList &&
-                  (!!responsibleList[pageState.currentStep]?.user?.length ||
-                    !!responsibleList[pageState.currentStep]?.group?.length) &&
-                  !responsibleList[pageState.currentStep]?.user.find(
-                    (v) => v.id === getUserId(),
-                  ) &&
-                  !responsibleList[pageState.currentStep]?.group.some((v) =>
-                    currentUserGroup.includes(v),
-                  ))
-              "
+              :readonly="value._readonly"
               :order-able="value._messengerExpansion"
               :installment-info="getInstallmentInfo()"
               :pay-success="
@@ -868,9 +875,7 @@ function toEmployee(employee: RequestData['employee']) {
                 >
                   <DocumentExpansion
                     v-if="value._documentExpansion"
-                    :readonly="
-                      data.requestDataStatus === RequestDataStatus.Canceled
-                    "
+                    :readonly="value._readonly"
                     ref="refDocumentExpansion"
                     :attributes="value.attributes"
                     @change-status="
@@ -919,9 +924,7 @@ function toEmployee(employee: RequestData['employee']) {
                   />
                   <MessengerExpansion
                     v-if="value._messengerExpansion"
-                    :readonly="
-                      data.requestDataStatus === RequestDataStatus.Canceled
-                    "
+                    :readonly="value._readonly"
                     :default-messenger="
                       value.stepStatus[pageState.currentStep - 1]
                         ? undefined
@@ -946,9 +949,7 @@ function toEmployee(employee: RequestData['employee']) {
                   />
                   <DutyExpansion
                     v-if="value._dutyExpansion"
-                    :readonly="
-                      data.requestDataStatus === RequestDataStatus.Canceled
-                    "
+                    :readonly="value._readonly"
                     :step="{
                       step: pageState.currentStep,
                       requestWorkId: value.id || '',
@@ -961,9 +962,7 @@ function toEmployee(employee: RequestData['employee']) {
                   <FormExpansion
                     v-if="value._formExpansion"
                     :request-work-id="value.id"
-                    :readonly="
-                      data.requestDataStatus === RequestDataStatus.Canceled
-                    "
+                    :readonly="value._readonly"
                     :step="{
                       step: pageState.currentStep,
                       requestWorkId: value.id || '',
@@ -976,9 +975,7 @@ function toEmployee(employee: RequestData['employee']) {
                   <PropertiesExpansion
                     :request-list-data="data"
                     :id="value.id"
-                    :readonly="
-                      data.requestDataStatus === RequestDataStatus.Canceled
-                    "
+                    :readonly="value._readonly"
                     :properties-to-show="
                       value.productService.work?.attributes.workflowStep[
                         pageState.currentStep - 1