Vue3 composition api data :binding

[ezraermy]

I have BlogList.vue, SingleBlog.vue components. Quering all blogs I have works fine. I have some trouble in creating a clickable blog title
and see the detail of the blog. For this purpose is used Details.vue route. Kindly check the pictures I uploaded below and forward me some comment? Thanks a lot.

Below is my SingleBlog.vue
`

{{blog.title}}

{{snippet}}

<script> import { computed } from '@vue/runtime-core' export default { props: [ 'blog' ], setup(props) { const snippet = computed(() => { return props.blog.body.substring(0,100) + '....' }) return { snippet } } } </script> <style> </style>`

Below Details.vue

`
{{blog.title}}

<script> import gql from 'graphql-tag' import { useQuery, useResult } from '@vue/apollo-composable' import { useRoute } from 'vue-router' const BLOG = gql` query{ blog{ id title author body yearPublished } }` export default { props: ['id'], setup() { const route = useRoute() const {result, error} = useQuery(BLOG, route.params.id) const blog = useResult(result, null, data => data.blog) return (blog, error) } } </script> <style> </style>`

In pictures: