JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://unpkg.com/vue"></script>
<div id='app'>
<ul>
  <li v-for='movie in movies'>
    <p>{{movie.upperCase()}}</p>
    <img :src=getMovieImg(movie) alt="movie img">
    <br>
    <span>This line is only as sample, img SRC={{getMovieImg(movie)}}</span>
  </li>
</ul>
</div>

JavaScript

new Vue({
	el: '#app',
  data: {
		movies: [{
    	name: 'Avatar',
      pics: ['http://imagenes.catholic.net/imagenes_db/07418b_avatar.jpg', 'pic2.jpg'],
      upperCase: function(){
        return this.name.toUpperCase()
      }
    },
    {
    	name: 'Titanic',
      pics: ['http://imagenes.catholic.net/imagenes_db/07418b_avatar.jpg', 'pic2.jpg'],
      upperCase: function(){
        return this.name.toUpperCase()
      }
    }
    ]
  },
  methods: {
  	getMovieImg(movie){
			return movie.pics.length > 0 ? movie.pics[0] : 0
    }
  }
})