Use computed instead of v-if in v-for

app/assets/javascripts/boards/components/issue_card_inner_deprecated.vue

@@ -95,6 +95,9 @@ export default {
       }
       return __('Blocked issue');
     },
+    assignees() {
+      return this.issue.assignees.filter((_, index) => this.shouldRenderAssignee(index));
+    },
   },
   methods: {
     isIndexLessThanlimit(index) {
@@ -215,8 +218,7 @@ export default {
       </div>
       <div class="board-card-assignee gl-display-flex">
         <user-avatar-link
-          v-for="(assignee, index) in issue.assignees"
-          v-if="shouldRenderAssignee(index)"
+          v-for="assignee in assignees"
           :key="assignee.id"
           :link-href="assigneeUrl(assignee)"
           :img-alt="avatarUrlTitle(assignee)"

app/assets/javascripts/design_management/components/design_overlay.vue

@@ -70,6 +70,13 @@ export default {
         ? this.getNotePositionStyle(this.movingNoteNewPosition)
         : this.getNotePositionStyle(this.currentCommentForm);
     },
+    visibleNotes() {
+      if (this.resolvedDiscussionsExpanded) {
+        return this.notes;
+      }
+
+      return this.notes.filter((note) => !note.resolved);
+    },
   },
   methods: {
     setNewNoteCoordinates({ x, y }) {
@@ -272,8 +279,7 @@ export default {
     ></button>
 
     <design-note-pin
-      v-for="note in notes"
-      v-if="resolvedDiscussionsExpanded || !note.resolved"
+      v-for="note in visibleNotes"
       :key="note.id"
       :label="note.index"
       :position="

app/assets/javascripts/incidents_settings/components/incidents_settings_tabs.vue

@@ -12,6 +12,11 @@ export default {
     ServiceLevelAgreementForm: () =>
       import('ee_component/incidents_settings/components/service_level_agreement_form.vue'),
   },
+  computed: {
+    activeTabs() {
+      return this.$options.tabs.filter((tab) => tab.active);
+    },
+  },
   tabs: INTEGRATION_TABS_CONFIG,
   i18n: I18N_INTEGRATION_TABS,
 };
@@ -42,8 +47,7 @@ export default {
       <gl-tabs>
         <service-level-agreement-form />
         <gl-tab
-          v-for="(tab, index) in $options.tabs"
-          v-if="tab.active"
+          v-for="(tab, index) in activeTabs"
           :key="`${tab.title}_${index}`"
           :title="tab.title"
         >

app/assets/javascripts/pdf/index.vue

@@ -24,6 +24,9 @@ export default {
     hasPDF() {
       return this.pdf && this.pdf.length > 0;
     },
+    availablePages() {
+      return this.pages.filter(Boolean);
+    },
   },
   watch: { pdf: 'load' },
   mounted() {
@@ -61,13 +64,7 @@ export default {
 
 <template>
   <div v-if="hasPDF" class="pdf-viewer">
-    <page
-      v-for="(page, index) in pages"
-      v-if="page"
-      :key="index"
-      :page="page"
-      :number="index + 1"
-    />
+    <page v-for="(page, index) in availablePages" :key="index" :page="page" :number="index + 1" />
   </div>
 </template>
 

spec/frontend/incidents_settings/components/__snapshots__/incidents_settings_tabs_spec.js.snap

@@ -52,7 +52,6 @@ exports[`IncidentsSettingTabs should render the component 1`] = `
           data-testid="PagerDutySettingsForm-tab"
         />
       </gl-tab-stub>
-      <!---->
     </gl-tabs-stub>
   </div>
 </section>