<template>
  <section class="py-4">
    <h2 class="text-3xl font-normal mx-auto block text-center mb-4">
      Ghibli films
    </h2>
    <Grid :dataSource="films" />
  </section>
</template>

<script>
export default {
  name: "Films",
  components: { Grid: () => import("@/components/Grid") },
  head: {
    titleTemplate: "%s - Films"
  },
  async asyncData({ $axios }) {
    const films = await $axios.$get("/api/films");
    return { films };
  },
  data() {
    return {
      films: []
    };
  }
};
</script>

<style></style>
