I’ve been experimenting with vue.js and I'm having difficulty accessing JS object values in components when routing. 

Using this repo to experiment, <https://github.com/johnayeni/filter-app-vue-js>, I'm just trying to replicate a basic a “product list” and “product description” app, but I can't get it working. The repo's homepage (the SearchPage.vue component) serves as the "product list," and I'm just trying to add the "product description" component to display only one item at a time.

I've added a "description page" component (calling it "item.vue") to allow a user to click on one of the languages/frameworks that will then route to item.vue to just display that specific object's associated information (item.name, item.logo, etc.), i.e., and not display any of the other languages. 

Following some tutorials, here's what I've tried: 

First, I added ids to the JS objects (found in data/data.js), i.e., **id:'1'**. 

```
const data = [
 {
    id: '1',
    name: 'vue js',
    logo: 'http://... .png',
    stack: [ 'framework', 'frontend', 'web', 'mobile' ],
 },
 {
    id: '2',
    name: 'react js',
    logo: 'http://... .png',
    stack: [ 'framework', 'frontend', 'web', 'mobile' ]
 },
...
];
export default data

```

Then, I wrapped the item.name (in ItemCard.vue) in router-link tags:

```
<router-link :to="'/item/'+item.id"> {{ item.name}} </router-link>

```

I then added a new path in router/index.js:

```
{
path: './item/:id', 
component: item,
props: true
}

```

But, when that router-link is clicked I can only access the ".id" (via $route.params.id), but I can't get .name or .logo. How do I access the other values (i.e. item.name, item.logo, etc.)? I have a feeling I'm going down the wrong track here.

Thank you so much for your help.