Property or method "item" is not defined on the instance but referenced during render

Question

The application throws me an error in the console.
The property or method "logo" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option or for class-based components, by initializing the property

This is what HTML and script look like.

<template id="items-template">
    <span class="items">
        <img v-if="logo.name" src="/images/name.png"/>
    </span>
</template>

@section scripts {
    <script type="text/javascript">
        Vue.component('items', {
            props: ['logo'],
            template: '#items-template'
        });
    </script>
}

Answer 1

Here's an example of how it should work:

<div id="app">
  <items :logo="logo"></items>
</div>

<script type="text/x-template" id="items-template">
    <div>
      <span class="items">
        <img v-if="logo.name" src="https://thumbs-prod.si-cdn.com/d4e3zqOM5KUq8m0m-AFVxuqa5ZM=/800x600/filters:no_upscale():focal(554x699:555x700)/https://public-media.si-cdn.com/filer/a4/04/a404c799-7118-459a-8de4-89e4a44b124f/img_1317.jpg"/>
      </span>
    </div>
</script>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var itemComponent = {
    template: "#items-template",
    props: {
    logo: Object
  } 
}

new Vue({
    el: "#app",
    data: {
      logo: {
        name: 'someName'
      }
    },
    components: {
      'items': itemComponent
    }
})
</script>

In this example, div#app is parent, and it passes down logo to items-component logo prop.