title: What is the mechanism of calling a function from a template in Vue js
body: <p>I am trying to learn Vue.js. I am following a tutorial on this site <a href="https://scrimba.com/p/pZ45Hz/c7anmTk" rel="nofollow noreferrer"><code>https://scrimba.com/p/pZ45Hz/c7anmTk</code></a>. From here I am not getting something clear.</p>
  <p>Here is the code below and my confusion as well :</p>
  <pre><code>&lt;div id=&quot;app&quot;&gt;
          &lt;wizard :name=&quot;harry&quot;    :cast=&quot;oculus_reparo&quot;     &gt;&lt;/wizard&gt;
          &lt;wizard :name=&quot;ron&quot;      :cast=&quot;wingardium_leviosa&quot;&gt;&lt;/wizard&gt;
          &lt;wizard :name=&quot;hermione&quot; :cast=&quot;alohomora&quot;         &gt;&lt;/wizard&gt;
      &lt;/div&gt;
  
  
  // emojify returns the corresponding emoji image
  function emojify(name) {
      var out = `&lt;img src=&quot;emojis/` + name + `.png&quot;&gt;`
      return out
  }
  
  // cast returns a spell (function) that decorates the wizard
  function cast(emoji) {
      var magic = emojify(&quot;magic&quot;)
      return function (wizard) {
          return wizard + &quot; &quot; + magic + &quot; &quot; + emoji + &quot; &quot; + magic
      }
  }
  
  
  Vue.component(&quot;wizard&quot;, {
      props: [&quot;name&quot;, &quot;cast&quot;],
      template: `&lt;p v-html=&quot;cast(name)&quot;&gt;&lt;/p&gt;`
  })
  
  var app = new Vue({
      el: &quot;#app&quot;,
      data: {
          harry    : emojify(&quot;harry&quot;   ), 
          ron      : emojify(&quot;ron&quot;     ),
          hermione : emojify(&quot;hermione&quot;)
      },
      methods: {
          // oculus_reparo returns a spell (function) that repairs glasses        
          oculus_reparo: cast(emojify(&quot;oculus-reparo&quot;)),      
          // wingardium_leviosa returns a spell (function) that levitates an object
          wingardium_leviosa: cast(emojify(&quot;wingardium-leviosa&quot;)),
          // alohomora returns a spell (function) that unlocks a door
          alohomora: cast(emojify(&quot;alohomora&quot;))
      }
  })
  </code></pre>
  <p>So far what I have got is that, I have created a component named wizard which takes two properties - <code>name</code> and <code>cast</code>. <code>name</code> is getting the value from data, and so far I understand that <code>cast</code> is calling the method with a parameter.</p>
  <p>So both of them should return their specific image. My first confusion: Where does wizard come from and how is it showing the data.name image? If it is because of the method call in the template then why does emoji return another image?</p>