Fetch teekyuu with graphql request

src/components/Content.vue

@@ -1,8 +1,49 @@
-<script setup>
+<script>
 import Card from './Card.vue';
 
+import query from '../gql/anime';
+import { useQuery } from "@vue/apollo-composable";
+import { watch } from 'vue';
+
+
+
+export default {
+  data() {
+    return {
+      id: 1,
+      title: null,
+      description: null,
+      url: null
+    }
+  },
+  methods: {
+    async fetchAnime() {
+      const variables = {
+        id: 15125
+      }
+
+      this.url = null;
+      const { result } = useQuery(query, variables);
+
+      watch(result, value => {
+        this.url = value.Media.coverImage.large;
+        this.title = value.Media.title.english;
+        this.description = value.Media.description;
+      });
+    }
+  },
+  mounted() {
+    this.fetchAnime();
+  },
+  components: {
+    Card
+  }
+}
+
 </script>
 
 <template>
-  <Card title="My Product" description="My description" />
+<div>
+  <Card :title="title" :description="description" :url="url" />
+</div>
 </template>