title: vue graphql composition api :data binding
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>//This is my HomeView
  
  &lt;template&gt;
    &lt;div class="home"&gt;
      &lt;div class="error" v-if="error"&gt;Error: {{error.message}}&lt;/div&gt;
       &lt;div v-else&gt; &lt;BlogList :allBlogs="allBlogs" /&gt; &lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import { useQuery, useResult } from '@vue/apollo-composable'
  import gql from 'graphql-tag'
  import BlogList from '../components/BlogList.vue'
  // @ is an alias to /src
  
  const ALL_BLOGS = gql`
      query{
          allBlogs{
              id
              title
              author
              body
              yearPublished
          }
      }`
  
  export default {
    name: 'HomeView',
    components: { BlogList },
  
    setup() {
      const {result, error } = useQuery(ALL_BLOGS)
  
  // We use use result for nested queries
  
      const allBlogs = useResult(result, null, data =&gt; data.allBlogs)
  
      
      return { allBlogs, error}
  
    }
  }
  &lt;/script&gt;
  &lt;style&gt;&lt;/style&gt;
  
  //This is my BLogList
  
  &lt;template&gt;
   &lt;div v-for="blog in allBlogs" :key="blog.id"&gt;
       &lt;SingleBlog :blog='blog' /&gt;
   &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import SingleBlog from '../components/SingleBlog.vue'
  
  export default {
      props: ['allBlogs'],
      components: { SingleBlog },
  
      
  }
  &lt;/script&gt;
  
  &lt;style&gt;&lt;/style&gt;
  
  //This is my SingleBlog
  
  &lt;template&gt;
      &lt;router-link :to="{name: 'Details', params: {id: blog.id}}"&gt;&lt;h1&gt;{{blog.title}}&lt;/h1&gt;&lt;/router-link&gt;
    &lt;p&gt;{{snippet}}&lt;/p&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import { computed } from '@vue/runtime-core'
  export default {
   props: [ 'blog' ],
  
   setup(props) {
       
       const snippet = computed(() =&gt; {
           return props.blog.body.substring(0,100) + '....'
       })
  
       return { snippet }
   }
  }
  &lt;/script&gt;
  
  &lt;style&gt;&lt;/style&gt;
  
  //This is my Details view
  
  &lt;template&gt;
     {{blog.title}}
  &lt;/template&gt;
   
  &lt;script&gt;
  import { useQuery, useResult } from '@vue/apollo-composable'
  import gql from 'graphql-tag'
  export default {
      props: ['id'],
  
      setup(props) {
        const {result, error} = useQuery(gql`
            query allBlogs($id: ID!){
                allBlogs(id: $id){
                    id
                    title
                    author
                    body
                    yearPublished
                }
            }
        `, props)
      const blog = useResult(result)
        return {blog, error }
      }
      
  }
  &lt;/script&gt;
  
  &lt;style&gt;&lt;/style&gt;
  
   In the above code everything works fine, until i get to Details view. The fetching graphql api (django backend) for list of blog I've created works fine. However, trying to see the detail of the blog which has been router-linked to Singleblog is not working. I tried to use the example provided on vue apollo site.
  
   Does anyone have any idea what might be the problem is with my code at Details.vue?</code></pre>
  </div>
  </div>
  </p>