title: Vue 2: Unable to find method on click event from component
body: <p>In my vue app i am calling a function on click event, which is located in a component. Here is the component code:</p>
  
  <pre><code>Vue.component( 'new-board', {
    template: `
      &lt;div&gt;
        &lt;br/&gt;
        &lt;div class="panel panel-primary"&gt;
          &lt;div class="panel-heading"&gt;
            Create New Board
          &lt;/div&gt;
          &lt;div class="panel-body"&gt;
            &lt;input class="form-control" placeholder="Board Name"/&gt;
            &lt;button 
              style="margin-top: 5px;" 
              @click.stop="addBoard"
              class="btn btn-success btn-xs btn-block"
            &gt;
              Add Board
            &lt;/button&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    `
  } )
  </code></pre>
  
  <p>Here is the vue app instance:</p>
  
  <pre><code>var boardItem = new Vue( {
    el: "#board-item",
    data: {
      boards: [
        { name: 'learning vue 2' }
      ],
      newBoard: [],
      viewNewBoard: true
    },
    methods: {
      displayNewBoard: function() {
        event.preventDefault()
        if( this.viewNewBoard == false ) {
          this.viewNewBoard = true
        } else {
          this.viewNewBoard = false
        }
      },
      addBoard: function() {
        console.log( 'add board' )
      }
    }
  } )
  </code></pre>
  
  <p>Now, when i click on the <code>Add Board</code> button from the above component, it is showing this error:</p>
  
  <blockquote>
    <p>Uncaught ReferenceError: addBoard is not defined
        at click (eval at Xr (vue.min.js:7), :2:455)
        at HTMLButtonElement.invoker (vue.min.js:6)</p>
  </blockquote>
  
  <p>It seems that the button from the component can't find the <code>addBoard</code> method, which is written in the same file!
  What i am missing here?</p>