Nuxt和axios:获取数据,但不显示在网页中

我正在使用Nuxt、Axios和Vuetify在我的应用程序中工作,但当我想从get call中查看浏览器中的数据时,没有显示任何内容,只有标题。我在firebase中有一个关于电影名称、导演和电影海报的信息,但我一个也看不到。

这是我的代码:

  <template>
     <div>
        <v-app>
          <v-container>
            <h2>Películas</h2>
              <ul>
                <li v-for="peli in datosPelicula" :key="peli.id">
                     {{datosPelicula.nombre}}
                     {{datosPelicula.director}}
                     {{datosPelicula.imagen}}
               </li>
             </ul>
          </v-container>
       </v-app>
    </div>

  </template>

   <script>
     import axios from 'axios'
     export default {
      data() {
       return {
           datosPelicula: [],
      }
    },
      methods:{
       obtenerPeliculas(){
        axios.get('https://proyecto-final-cf888-default-rtdb.firebaseio.com/' + 
         'peliculas.json')
        .then( (res)=>{
        let results=[];
        console.log(res);
        for (let id in res.data){
        console.log(id);
        console.log(res.data[id]);
        results.push({
           id: id, 
           nombre: res.data[id].nombre,
           director: res.data[id].director,
           imagen: res.data[id].imagen,
        });
      }
      this.datosPelicula= results;
      })
      .catch((error)=>{
      console.log(error) 
    })       
   }
  }, 
   created(){
   this.obtenerPeliculas();
  }
 }; 
</script>

 <style scoped>
 .div{
 height: 100%;
 width: auto;
 }
 </style>