Collect Film's nested data on mounted (Locations/Vehicles/People)

pages/films/_id.vue

@@ -1,7 +1,36 @@
 <template>
-  <div>
-    {{ film }}
-  </div>
+  <section class="py-4">
+    <h1>
+      {{ film.title + " (" + film.release_date + ")" }}
+    </h1>
+    <h2 class="text-gray-700 mt-0">{{ "by " + film.director }}</h2>
+    <p>{{ film.description }}</p>
+    <p
+      class="film-score font-bold text-lg"
+      :class="{
+        'text-green-600': film.rt_score >= 75,
+        'text-orange-600': film.rt_score >= 50 && film.rt_score < 75,
+        'text-yellow-600': film.rt_score >= 25 && film.rt_score < 50,
+        'text-red-600': film.rt_score >= 0 && film.rt_score < 25
+      }"
+    >
+      {{ film.rt_score + "%" }}
+    </p>
+    <section class="people">
+      <h3>People</h3>
+      <div>{{ film.people }}</div>
+    </section>
+
+    <section class="vehicles">
+      <h3>Vehicles</h3>
+      <div>{{ film.vehicles }}</div>
+    </section>
+
+    <section class="locations">
+      <h3>Locations</h3>
+      <div>{{ film.locations }}</div>
+    </section>
+  </section>
 </template>
 
 <script>
@@ -21,12 +50,18 @@ export default {
     return uuid.test(params.id);
   },
   async asyncData({ params, store }) {
-    await store.dispatch("films/getFilm", params.id);
+    if (!store.state.films.film.id !== params.id)
+      await store.dispatch("films/getFilm", params.id);
   },
   computed: {
     ...mapGetters({
       film: "films/film"
     })
+  },
+  async mounted() {
+    await this.$store.dispatch("films/getPeople");
+    await this.$store.dispatch("films/getVehicles");
+    await this.$store.dispatch("films/getLocations");
   }
 };
 </script>