Display an array from a json with vuejs

Question

Hello and thanks for reading my issue ! I've started vVue yesterday so be comprehensive if I made some huge mistakes ^^. Here's an overview of my JSON :

{
  "id": 10313,
  "last_name": "McNally",
  "first_name": "Robin",
  "birth_date": "...",
  "sex": "F",
  "residence_address": "...",
  "phone_number": "...",
  "zip_code": "...",
  "residence_city": "...",
  "residence_country": "...",
  "death_date": "...",
  "ipp": "...",
  "documents": [
    {
      "title": "Biology Analysis",
      "displayed_text": "...",
      "document_type": "Journal Article",
      "document_origin_code": "STARE",
      "document_date": "2006-01-27"
    },
    {
      "title": "Biology Analysis",
      "displayed_text": "...",
      "document_type": "Journal Article",
      "document_origin_code": "EPSOS",
      "document_date": "2013-02-09"
    }
  ]
}

Grille.vue

<template>
  <div>
    <table v-if="filteredData.length">
        <thead>
        <tr>
            <th v-for="key in columns"
            @click="sortBy(key)"
            :class="{ active: sortKey == key }" :key="key">
            {{ capitalize(key) }}
            <span class="arrow" :class="sortOrders[key] > 0 ? 'asc' : 'dsc'">
            </span>
            </th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="entry in filteredData" :key="entry">
            <td v-for="key in columns" :key="key">
            {{entry[key]}}
            </td>
        </tr>
        </tbody>
    </table>
    <p v-else>No matches found.</p>
  </div>
</template>

<script>
export default {
    name: 'GrilleItem',
    props: {
        data: Array,
        columns: Array,
        filterKey: String
    },
  data() {
    return {
      sortKey: '',
      sortOrders: this.columns.reduce((o, key) => ((o[key] = 1), o), {})
    }
  },
  computed: {
    filteredData() {
      const sortKey = this.sortKey
      const filterKey = this.filterKey && this.filterKey.toLowerCase()
      const order = this.sortOrders[sortKey] || 1
      let data = this.data
      if (filterKey) {
        data = data.filter((row) => {
          return Object.keys(row).some((key) => {
            return String(row[key]).toLowerCase().indexOf(filterKey) > -1
          })
        })
      }
      if (sortKey) {
        data = data.slice().sort((a, b) => {
          a = a[sortKey]
          b = b[sortKey]
          return (a === b ? 0 : a > b ? 1 : -1) * order
        })
      }
      return data
    }
  },
  methods: {
    sortBy(key) {
      this.sortKey = key
      this.sortOrders[key] = this.sortOrders[key] * -1
    },
    capitalize(str) {
      return str.charAt(0).toUpperCase() + str.slice(1)
    }
  }
}
</script>

<style>
table {
  border: 2px solid #42b983;
  border-radius: 3px;
  background-color: #fff;
}

th {
  background-color: #42b983;
  color: rgba(255, 255, 255, 0.66);
  cursor: pointer;
  user-select: none;
}

td {
  background-color: #f9f9f9;
}

th,
td {
  min-width: 120px;
  padding: 10px 20px;
}

th.active {
  color: #fff;
}

th.active .arrow {
  opacity: 1;
}

.arrow {
  display: inline-block;
  vertical-align: middle;
  width: 0;
  height: 0;
  margin-left: 5px;
  opacity: 0.66;
}

.arrow.asc {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 4px solid #fff;
}

.arrow.dsc {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid #fff;
}
</style>

Documents.vue

<script>
import Grille from './Grille.vue'
import Document from './Document.vue'

export default {
    name:'DocumentsItem',
    components: {
        Grille,
        Document,
    },
    data() {
        return {
        searchQuery: '',
        gridColumns: ['Date', 'Type','Origine','Aperçu'],
        };
    },
    props: ["dataUser"],
};
</script>

<template>
    <div>
        <form id="search">
            Search <input name="query" v-model="searchQuery">
        </form>
        <Document :doc="dataUser.documents"/>
        <Grille
            :data="dataUser.documents"
            :columns="gridColumns"
            :filter-key="searchQuery" />
    </div>
</template>

This is my output with my code right now click me

What I want to do is to display each document inside "documents" (json file) in the table (Grille.vue). I manage to display one element because I've wrote it inside gridData (Documents.vue) but what I'd like is to wrote something like a v-for to call every document inside my json so that they could be displayed on the grid. I also thought about passing all the documents from Documents.vue to Grille.vue and then to display each document one by one in Grille.vue but I can't find a way to do it properly...

Please tell me if anything isn't clear for you.

Thanks in advance for your time & attention :)

EDIT : I did some debugging & researches and now I have all the data that I want inside the grid but nothing is printed on the screen even though the data is here (debugger says so and my filtering method works) Any idea ? I've updated the code. This is what it looks like now : Without Filtering With Filtering Vuedevtool without filtering