I'm working on rendering an array of movies but i don't want all of my movies to be rendered in one row (div). How can I say, after the 4th movie render the rest of them below - is that possible?

I guess i could make a new array for each section to be rendered but if there is a better way any help is appreciated.

Movies:[
      {MovieName: 'Venom (2018)',rating: 7 , imgPath: 'Venom.png'},
      {MovieName: 'Black Panther (2018)', rating: 9 , imgPath: 'BlackPanther.png'},
      {MovieName: 'Tenet (2020)',rating: 8 , imgPath: 'Tenet.png'},
      {MovieName: 'ProjectPower',rating: 8 , imgPath: 'ProjectPower.png'},
      {MovieName: 'After',rating: 8.5, imgPath: 'After.png'},
      {MovieName: 'MoonLight',rating: 9, imgPath: 'MoonLight.png'},
      {MovieName: 'Us',rating: 8 , imgPath: 'Us.png'},
    ]

<div class="MoviesContainer">
    <div class="Movies" v-for="(movie,index) in filteredMovies" :id="index">
      <img class="image_img" :src="require('../assets/MoviesMap/' + movie.imgPath)">
      <div class="image_Overlay">
        <button @click="addedMovie">Add to Favorites</button>
        <p>Watch {{movie.MovieName}}</p>
      </div>
    </div>
  </div>