title: vue component and alert on click button
body: <p>I`m trying to make my button (which is inside vue component) to show alert when pressed, and a message is input field content.</p>
  
  <p>so far i have following:</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>    &lt;vue-form-input placeholder="Name"&gt;&lt;/vue-form-input&gt;     
      &lt;vue-form-submit button-text="Submit"&gt;&lt;/vue-form-submit&gt;
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>Vue.component('vue-form-input', {
  props: {
      placeholder: {
          String,
          required: true
      }
  },
  template:`
      &lt;div&gt;
          &lt;input type="text" class="form-control" :placeholder="placeholder"&gt;
      &lt;/div&gt;` });   
  
  Vue.component('vue-form-submit', {
  props: {
      buttonText: {
          String,
          required: true,
          default: 'Submit' }
  
  },
  template:`
      &lt;div&gt;
          &lt;button v-on:click="submitBut" class="btn btn-lg btn-primary btn-block" type="submit"&gt;{{buttonText}}&lt;/button&gt;
      &lt;/div&gt;` });
  
  
  new Vue({
          el: '#forms',
          data: {
  
          },
          methods: {
              submitBut: () =&gt; {
                  alert('Blablabla')
              }
          }, })
  </code></pre>
  
  <p>There are console errors
  1) Property or method "submitBut" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option. 
  2) Invalid handler for event "click": got undefined </p>
  
  <p>Can someone please help me with that?</p>