Tengo un componente principal que llama a un componente secundario, vea el componente secundario a continuación y el componente principal le pasa una serie de autores

Matriz entrante con componente principal

 [ { "name":"James T. Kirk", "series":[ { "title":"myserie1", "kind":"comedy" } ] }, { "name":"Spock", "series":[ { "title":"Star Trek" "kind":"action" }, { "title":"The Next Generation" "kind":"comedy" } ] }, { "name":"Jean-Luc Picard", "series":[ ] }, { "name":"Worf", "series":[ ] } ]

componente hijo

 <template> <div v-for="(auth,i) in allAuthors" :key="auth.id" class="d-sm-flex mt-8 align-start"> // here i call my allAuthors method <div> <div class=""> <p>{{auth.name }}</p> <p>{{auth.series[i].title}}</p> </div> <div class="py-4">{{auth.series[i].kind}}</div> </div> </div> </template> <script> export default { name: "MyListItem", props: { users: [] }, data () { return { author:[] } }, created: function() { this.author = this.allAuthors console.log(this.author); }, computed:{ }, methods: { allAuthors() { let newArr = this.users.find(x => x.series.length === 0) return newArr } } } </script>

Quiero iterar en el componente secundario en la tabla que proviene del componente principal filtrando la tabla del componente principal en un método y llamando a este método en v-for . Quiero filtrar las matrices para tener solo una matriz cuya serie exista (diferente de vacía), es decir, cuya propiedad de serie contenga al menos un elemento. Luego use esta matriz en v-for . problema no funciona.

como puedo hacerlo por favor