vue.js - Pass data object from parent to child component -

i'm making list of tools.

i'm trying pass full tool data object parent component (the tool list) each child component (the tool items), using single file templates.

in child component, error:

property or method "..." not defined on instance referenced during render. make sure declare reactive data properties in data option.

where ... property of tool data object, example title or description.

here's setup:

tools.vue (parent):

<template>     <main id="tools">         <tool v-for="tool in tools" :data="tool" :key="tool.id"></tool>     </main> </template>  <script>     import tool './tool.vue'      let test = {         id: 1,         title: 'title',         description: 'description'     };      export default {         data() {             return {                 tools: [                     test                 ]             }         },          components: {'tool': tool}     } </script> 

tool.vue (child):

<template>     <div class="tool">         <div class="title">{{ title }}</div>         <div class="description">{{ description }}</div>     </div> </template>  <script>     export default {} </script> 

it should simple, i'm unable find solution google-fu. missing here?

if want pass entire tool object, first declare property.

export default {   props: ["tool"] } 

then, pass using v-for.

<tool v-for="tool in tools" :tool="tool" :key="tool.id"></tool> 

you can reference in child component's template using

<div class="title">{{ tool.title }}</div> <div class="description">{{ tool.description }}</div>