Novo Componente quebra o display das imagens

Oi Ana, estava seguindo o exemplo do professor e aconteceu o mesmo aqui comigo, revisando o código fiz uns pequeno ajuste na sintaxe e funciono segue o exemplo

ImagemResponsiva.vue

<template>
    <img class="imagem-responsiva" :src="url" :alt="titulo">
</template>

<script>

/*Propriedades que o Elemento pode receber */
export default {
    props: ["url", "titulo"],
}

</script>

<style scoped>
/* estilo imagem */
    .imagem-responsiva {
        width: 100%;
    }
</style>

App.vue

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

import Painel from "./components/shared/painel/Painel.vue";
import ImagemResponsiva from './components/shared/imagem-responsiva/ImagemResponsiva.vue'
export default {

   components: {
    "meu-painel": Painel,
    "imagem-responsiva": ImagemResponsiva,
  },