Estoy trabajando en renderizar una serie de películas, pero no quiero que todas mis películas se rendericen en una fila (div). ¿Cómo puedo decir, después de que la cuarta película renderice el resto de ellos a continuación, es eso posible?

Supongo que podría hacer una nueva matriz para que se represente cada sección, pero si hay una mejor manera, se agradece cualquier ayuda.

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>