O código está correto, porém não filtra

Verifiquei o código e está corretamente. Mas não mostra o filtro que peço

<template>

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

    <input type="search" class="filtro" v-on:input = "filtro=$event.target.value" placeholder="Filtre a parte de baixo">

    <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
},
  data() {
    return {
      titulo: 'Alurapic',
      fotos:[],
      filtro:''
    }
},
  computed: {

    fotosComFiltro() {

      if (this.filtro) {
        let exp = new RegExp(this.filtro.trim(), 'i');
        return this.fotos.filter(foto => exp.test(foto.titulo));
      } else {
        return this.fotos;
      }

    }
  },


  created() {

    let promise = this.$http.get('http://localhost:3000/v1/fotos');
    promise
      .then(res => res.json())
      .then(fotos => this.fotos = fotos);

  }
}
</script>