tengo este componente Vue pero no entiendo el problema:

 <template> <div> <div class="all-cards" > <template v-for="(card,index) in res" > <div class="cards-new " draggable="true" :data-id="card.id" @click="infoCard(index)" :key="card.id"> <div class="image-card"></div> <div class="titles-card"> <p>{{card.title}}</p> </div> <div class="footer-card"> <div class="circle-people-card"></div> </div> </div> </template> </div> <card-info descriptionCard="hi" idInfo="2" titleCard="sua"></card-info> </div> </template> <script> import axios from 'axios'; import CardInfo from './CardInfo.vue' export default { name: 'Card', components:{ CardInfo }, data(){ return{ uri : 'http://localhost:8000', res: [], infoCard:'' } }, methods:{ infoCard: function(clickedId){ return this.infoCard = clickedId; } }, mounted(){ let url = this.uri + "/ajax/field-info" axios.get(url).then((msg) => { this.res = msg.data }); } } </script> <style> </style>

Continúa devolviéndome este error:

TypeError: t.infoCard no es una función al hacer clic (app.f815278e.js:1) en Xe (900.23d000da.js:2) en HTMLDivElement.n (900.23d000da.js:2) en HTMLDivElement.o._wrapper (900.23 d000da.js:2)

Alguien puede ayudarme ?