Aparece NAN no título.

Está aparecendo NAN no título. O que está errado? App.vue

<template>
  <div class="corpo">
    <h1 class="centralizado"> {{titulo}}</h1>
      <ul class="lista-fotos">
        <li class="lista-fotos-item" v-for="foto in fotos">

          <meu-painel :titulo="foto-titulo">
            <img class="imagem-responsiva" :src="foto.url" :alt="foto.titulo">
          </meu-painel>

        </li>
      </ul>
  </div>
</template>

<script>
import Painel from './components/shared/painel/Painel.vue';
export default {
    components: {
      'meu-painel' : Painel
    },

  name: 'app',
  data () {
    return {
      titulo: 'Photos',
      fotos:[

      ]
     }
    },
    created() {
        let promise = this.$http.get('http://localhost:3000/v1/fotos');
        promise
        .then(res => res.json())
        .then(fotos => this.fotos= fotos, err => console.log(err));
    }

}
</script>

<style>
.corpo{
  font-family: Helvetica, sans-serif;
  width: 96%;
  margin: 0 auto;
}
.centralizado{
  text-align: center;
}
.lista-fotos{
  list-style: none;
}
.lista-fotos .lista-fotos-item {
  display: inline-block;
}
.imagem-responsiva{
  width: 100%
}

</style>

Painel.vue

<template>

          <div class="painel">
              <h2 class="painel-titulo">{{ titulo }} </h2>
          <slot class="painel-conteudo">

          </slot>
          </div>

</template>

<script>
export default {
  props: ['titulo']
}
</script>

<style scoped>

.painel {
    padding: 0 auto;
    border: solid 2px grey;
    display: inline-block;
    margin: 5px;
    box-shadow: 5px 5px 10px grey;
    width: 200px;
    height: 100%;
    vertical-align: top;
    text-align: center;
  }

  .painel .painel-titulo {
    text-align: center;
    border: solid 2px;
    background: lightblue;
    margin: 0 0 15px 0;
    padding: 10px;
    text-transform: uppercase;
  }
  * {
    box-shadow: 5px 5px 5px;
  }
</style>

Estou usando o visual studio code e está aparecendo o erro na linha do App.vue

<li class="lista-fotos-item" v-for="foto in fotos">

[eslint-plugin-vue]
[vue/require-v-for-key]
Elements in iteration expect to have 'v-bind:key' directives.
Renders the element or template block multiple times based on the source data.

Obrigado desde já