traxxx/assets/components/movies/movies.vue

<template>
	<div class="movies">
		<div class="tiles">
			<Movie
				v-for="movie in movies"
				:key="`movie-${movie.id}`"
				:movie="movie"
			/>
		</div>
	</div>
</template>

<script>
import Movie from './tile.vue';

async function mounted() {
	const { movies, totalCount } = await this.$store.dispatch('fetchMovies', {
		limit: 30,
	});

	this.movies = movies;
	this.totalCount = totalCount;
}

export default {
	components: {
		Movie,
	},
	data() {
		return {
			movies: [],
			totalCount: 0,
		};
	},
	mounted,
};
</script>

<style lang="scss">
.movies {
    padding: 1rem;
}

.tiles {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(30rem, 1fr));
	grid-gap: 1rem;
}
</style>