vue.js - ループ内で pug と Vue を使用してデータを読み取る

Question

Vueテンプレートでは、このhtmlをパグ構文で持っています

<template lang="pug">
  div
    - var cards = [{ title: 'Mountain View' },{ title: 'Mountain View' }]


    mixin card(title, copy, button)
      .card
        .content
          h2.title= title
          p.copy= copy
          button.btn= button

    main.page-content
      each card in cards
        +card(card.title)

</template>

script タグでは、axios を使用して json ファイルからデータを取得しています。

<script>
import axios from "axios";

export default {
  data() {
    return {
      players: [],
      loading: true,
      errored: false
    };
  },
  methods: {
    fetchData() {
      axios
        .get("data.json")
        .then(response => this.players = response.data)
        .catch(error => {
          console.log(error);
          this.errored = true;
        })
        .finally(() => (this.loading = false));
    }
  },  
  mounted() {
    this.fetchData();
  }
}
</script>

players私の質問は、プロパティからデータをどのように配置するのcardsですか?