title: Vue.JS "TypeError: reverseMessage is not a function"
body: <p>I'm trying to display a string in reverse, using Vue. My template is:</p>
  
  <pre><code>&lt;div id="app"&gt;
    &lt;reverse :msgreverse="message" :reverseMessage="reverseMessage()"&gt;&lt;/reverse&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And my script:</p>
  
  <pre><code>function reverseMessage(msg) {
    return msg.split('').reverse().join('')
  }
  
  Vue.component('reverse', {
    props:["msgreverse", "reverseMessage"],
    template: '&lt;p v-html="reverseMessage(msgreverse)"&gt;&lt;/p&gt;'
  })
  
  var app = new Vue({
    el: '#app',
    data: {
      message:'The message to reverse !',
    }
  })
  </code></pre>
  
  <p>This fails with the following console errors:</p>
  
  <ul>
  <li><p>TypeError: reverseMessage is not a function. (In 'reverseMessage()', 'reverseMessage' is undefined)</p></li>
  <li><p>Error in render: "TypeError: reverseMessage is not a function. (In 'reverseMessage()', 'reverseMessage' is undefined)"</p></li>
  <li><p>Property or method "reverseMessage" 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</p></li>
  </ul>
  
  <p>How do I get the <code>&lt;reverse&gt;</code> component to display a given string in reverse?</p>