title: "Property or method is not defined on the instance but referenced during render"
body: <p>I need to display the <code>item.title</code> outside the <code>&lt;v-carousel&gt;</code> but I get this error message:</p>
  <blockquote>
  <p>[Vue warn]: Property or method &quot;item&quot; 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. See: <a href="https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties" rel="nofollow noreferrer">https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties</a>.</p>
  </blockquote>
  <p>I checked the results from the Stackoverflow search but I really struggle to understand it. I would be grateful if somebody could explain it to me by this example.
  Here is my code:</p>
  <pre><code>&lt;v-carousel&gt;
  &lt;v-carousel-item v-for=&quot;(item,i) in items&quot; v-bind:src=&quot;item.src&quot; :key=&quot;i&quot;&gt;
  &lt;/v-carousel-item&gt;
  &lt;/v-carousel&gt;
  
  &lt;h1&gt;TITLE: {{ item.title }}&lt;/h1&gt;
  
  &lt;script&gt;
    export default {
      data () {
        return {
          items: [
            {
              src: '/static/a.jpg',
              title: 'A',
              text: 'texta'
            },
            {
              src: '/static/b.jpg',
              title: 'B',
              text: 'textb'
            }
            {
        }
      }
    }
  &lt;/script&gt;
  </code></pre>
  <p>This is what I need to archive:</p>
  <p>As soon as an image changes to the next one - the a text <strong>outside</strong> of the <em></em> scope should change too. I tried to check the value of the item array outside the scope but it didn't work:
  <code>&lt;h1 v-if=&quot;(item,i) === 1&quot;&gt;Lion&lt;/h1&gt; &lt;h1 v-if=&quot;(item,i) === 2&quot;&gt;Ape&lt;/h1&gt;</code>
  How to access the value of the current carousel item outside of the scope?</p>