JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<div id="app">
  <div v-for='movie in movies' :key='movie.id' v-if='renderPage'>
    <div class="movie" :id="'id_' + movie.id">
      <h2 class="name">{{movie.name}}</h2>
      <div class="desc">
        <img class="pic" :src="'/IMG/'+ movie.pics[0] + '.jpg'" v-if='movie.pics.length > 0' />
        <img class="pic" src="'/IMG/NO-IMAGE.jpg" v-else/>
        <p>{{movie.desc}}</p>
      </div>
      <ul class="infos">
        <li class="premiere">
          <h3>Premiere:</h3>
          <p><span class="location">{{movie.premiere.location}}</span>, <span class="date">{{movie.premiere.date}}</span></p>
        </li>
        <li class="production">
          <h3>Production: </h3>
          <h5>Cinematography:</h5>
          <ul>
            <li v-for='cinematography in movie.production.cinematography'>{{cinematography}}</li>
          </ul>
          <h5>Companies:</h5>
          <ul>
            <li v-for='company in movie.production.companies'>{{company}}</li>
          </ul>
        </li>
        <li class="cast">
          <h3>Cast:</h3>
          <ul class="roles">
            <li class="role">
              <h4>{{movie.cast.role}}:</h4>
              <p>{{movie.cast.actors}}</p> /*if more than one as csv like "Harrison Ford, Mark Wahlberg, ..."*/
            </li>
            [...]
          </ul>
        </li>
        <li class="budget">
          <h3>Budget:</h3>
          <p>{{movie.budget.usd}} USD</p>
        </li>
        <li class="boxoffice">
          <h3>Box-Office:</h3>
          <p>{{movie.boxoffice.usd}} USD</p>
        </li>
      </ul>
    </div>
  </div>
</div>

JavaScript

new Vue({
        el: '#app',
        data: {
            movies: [],
            renderPage: false
        },
        mounted () {
          this.getMovies()
        },
        methods: {
          getMovies () {
            var vm = this
            axios.get('https://api.myjson.com/bins/gw8tl')
              .then(function (res) {
                debugger
                vm.movies = res.data.movies
                vm.renderPage = true
              })
              .catch(function (err) {
                console.log(err)
              })
          }
        }
    });