How to render items grouped by the common entity

<template>
  <v-container>
    <v-row class="text-center">
      <ul>
        <li v-for="issue in issues" :key="issue.id">
          {{ issue.number }}
          <ul>
            <li v-for="article in articles" :key="article.title">
              <p v-if="article.articleIssueId == issue.id">
                {{ article.title }}
              </p>
            </li>
          </ul>
        </li>
      </ul>
    </v-row>
  </v-container> 
</template>

<script>
export default {
  data: () => ({
    issues: [
      { number: 123, id: 321 },
      { number: 124, id: 320 }
    ],

    articles: [
      { title: "first article here", route: "/article", articleIssueId: 320 },
      { title: "first article here", route: "/article", articleIssueId: 320 },
      { title: "first article here", route: "/article", articleIssueId: 320 },
      { title: "first article here", route: "/article", articleIssueId: 321 },
      { title: "first article here", route: "/article", articleIssueId: 321 },
      { title: "first article here", route: "/article", articleIssueId: 321 }
    ]
  })
};
</script>

as you can see on the screenshot the browser just fetch all the articles on each issue and hide those with different ID, which i think it is not a proper way!!

Use a computed property to filter your array and display only what’s required. Using v-if in a loop is inefficient (it has to check the condition anytime any data in articles changes) and can lead to performance issues.