Vue3 graphql composition api dynamic router segment is not working

Hi all, I was trying to create a list of blogs using vue3 graphql composition api (django backend). Fetching and creating new blog works fine. However, I have some problem on creating router-link for the detail of the blog. I followed the the example provided on vue apollo page, it didn’t help.

This is my Details.vue view

<template>
{{blog.title}}
</template>

<script>
import { useQuery, useResult } from '@vue/apollo-composable'
import gql from 'graphql-tag'

const BLOG = gql`
      query($id: Int!){
      blog(id: $id){
        id
        title
      }
}`
export default {
 props: [ 'id' ],
 
 setup(props) {
   const {result, error} = useQuery(BLOG, props)

const blog = useResult(result, null, data => data.allBlogs)
   return {blog, error }
 }

}
</script>

<style>

</style>