Interpolação do filtro só retorna o primeiro caracter do input

<template>
  <div class="corpo">
    <h1 class="centralizado">{{ titulo }}</h1>

    <input type="search" class="filtro" v-on:input="filtro = $event.target.value" placeholder="filtre pelo título da foto"> 
    {{ filtro }}
    <ul class="lista-fotos">
      <li v-for="foto of fotos" class="lista-fotos-item">
        <meu-painel :titulo="foto.titulo">
            <img :src="foto.url" :alt="foto.titulo" class="imagem-responsiva"/>
        </meu-painel>    
      </li>
    </ul>    
  </div>
</template>

<script>
import Painel from "./components/shared/painel/Painel.vue";
export default {
components:{
  'meu-painel' : Painel
},
data(){
   return {
      titulo: 'Alura Pic',
      fotos: [],
      filtro: ''
   }
 },
created(){
    this.$http.get('http://localhost:3000/v1/fotos')
      .then(res => res.json())
      .then(fotos => this.fotos = fotos, err => console.log(err));    
  }
}
</script>
<style>

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

Boa tarde, Quando digito no input, a interpolação do filtro só imprime o primeiro caracter, mesmo quando inspeciono com f12 só aparece o primeiro caracter digitado