updated showings to use typescript and composition api

src/components/modal-content/ShowMovie.vue

@@ -5,36 +5,38 @@
         {{ movie.title }} ({{ movie.year }})
       </h2>
       <div class="sm:inline-flex sm:space-x-5">
-        <img :src="movie.poster" alt="movie poster" class="mx-auto sm:mx-0 neon-border"/>
+        <img
+          :src="movie.poster"
+          alt="movie poster"
+          class="mx-auto sm:mx-0 neon-border"
+        />
         <div class="pt-5 sm:pt-0">
           <p>{{ movie.plot }}</p>
-          <ScheduleMovie v-if="logged_in" :movie="movie" class="mt-5"/>
+          <ScheduleMovie
+            v-if="logged_in"
+            :movie="movie"
+            class="mt-5"
+            @close-modal="$emit('close-modal')"
+          />
         </div>
       </div>
     </div>
-
   </div>
 </template>
 
-<script>
+<script lang="ts" setup>
 import ScheduleMovie from "~/components/forms/ScheduleMovie.vue";
 
-export default {
-  name: "ShowMovie",
-  data: () => ({
-    logged_in: false,
-  }),
-  components: {ScheduleMovie},
-  props: ["movie"],
-  mounted() {
-    const token = useCookie("token").value;
-    if (token) {
-      this.logged_in = true;
-    }
+const props = defineProps(["movie"]);
+const emits = defineEmits(["close-modal"]);
+const logged_in = ref(false);
+
+onMounted(() => {
+  const token = useCookie("token").value;
+  if (token) {
+    logged_in.value = true;
   }
-}
+});
 </script>
 
-<style scoped>
-
-</style>
+<style scoped></style>