Why is there an error in the template?

Question

JavaScript

Vue.component('Pict',{
  props: {
    order: String
  },
  computed: {
    picture(){
      return gallery.find(item => item.order === this.order);
    }
  },
  mounted(){
    console.log(this.picture)
  },
  template: `<div class="galery-img-wrapper">
                      <div class="gallery-img" :style="{background: \`url(img/gallery/${picture.img}\`}"></div>
                  </div>`
})

Why does he say that Uncaught ReferenceError: picture is not defined in the template line,
and if you remove it from there, then everything is OK and displays picture in the console?

Answer 1

https://tuhub.ru/posts/rabota-s-shablonami-v-vue-js-2