Vue js. Mi función en methods no es reconocida.

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>

Sigue devolviéndome este error:

> TypeError: t.infoCard is not a function
>     at click (app.f815278e.js:1)
>     at Xe (900.23d000da.js:2)
>     at HTMLDivElement.n (900.23d000da.js:2)
>     at HTMLDivElement.o._wrapper (900.23d000da.js:2)

¿Alguien puede ayudarme?