title: Submitting form in Vue.js with ajax
body: <p>I'm really stuck on how I would work with submitting a form that makes an ajax request using Vue.js and vue-resource then using the response to fill a div.</p>
  <p>I do this from project to project with js/jQuery like this:</p>
  <p><strong>view in blade</strong></p>
  <pre><code>{!! Form::open(['route' =&gt; 'formRoute', 'id' =&gt; 'searchForm', 'class' =&gt; 'form-inline']) !!}
      &lt;div class=&quot;form-group&quot;&gt;
          &lt;input type=&quot;text&quot; name=&quot;id&quot; class=&quot;form-control&quot; placeholder=&quot;id&quot; required=&quot;required&quot;&gt;
      &lt;/div&gt;
      &lt;button type=&quot;submit&quot; class=&quot;btn btn-default&quot;&gt;Search&lt;/button&gt;
  {!! Form::close() !!}
  </code></pre>
  <p><strong>js/jquery</strong></p>
  <pre><code>var $searchForm = $('#searchForm');
  var $searchResult = $('#searchResult');
  
  $searchForm.submit(function(e) {
      e.preventDefault() ;
  
      $.get(
          $searchForm.attr('action'),
          $searchForm.serialize(),
          function(data) {
              $searchResult.html(data['status']);
          }
      );
  });
  </code></pre>
  <p>What I've done/tried so far in Vue.js:</p>
  <p><strong>view in blade</strong></p>
  <pre><code>{!! Form::open(['route' =&gt; 'formRoute', 'id' =&gt; 'searchForm', 'class' =&gt; 'form-inline']) !!}
      &lt;div class=&quot;form-group&quot;&gt;
          &lt;input type=&quot;text&quot; name=&quot;id&quot; class=&quot;form-control&quot; placeholder=&quot;id&quot; required=&quot;required&quot;&gt;
      &lt;/div&gt;
      &lt;button type=&quot;submit&quot; class=&quot;btn btn-default&quot; v-on=&quot;click: search&quot;&gt;Search&lt;/button&gt;
  {!! Form::close() !!}
  </code></pre>
  <p><strong>vue/js</strong></p>
  <pre><code>    Vue.http.headers.common['X-CSRF-TOKEN'] = document.querySelector('#token').getAttribute('value');
  
      new Vue({
          el: '#someId',
  
          data: {
  
          },
  
          methods: {
              search: function(e) {
                  e.preventDefault();
  
                  var req = this.$http.get(
                      // ???, // url
                      // ???, // data
                      function (data, status, request) {
                          console.log(data);
                      }
                  );
              }
          }
      });
  </code></pre>
  <p>I'm wondering if it's possible to use components when dealing with the response to output the response data to a div?</p>
  <p>Just to summarise everything:</p>
  <ol>
  <li>How do I submit a form using vue js and vue-resource instead of my usual jQuery way?</li>
  <li>Using a response from ajax, how can I output data into a div preferably using components?</li>
  </ol>