使用Ajax在Vue.js中提交表单

我真的对如何使用Vue.js和vue-resource提交一个提出ajax请求的表单，然后使用响应来填充div的工作方式感到困惑。

我使用js / jQuery从一个项目到另一个项目都这样做，如下所示：

在刀片中查看

{!! Form::open(['route' => 'formRoute', 'id' => 'searchForm', 'class' => 'form-inline']) !!}
    <div class="form-group">
        <input type="text" name="id" class="form-control" placeholder="id" required="required">
    </div>
    <button type="submit" class="btn btn-default">Search</button>
{!! Form::close() !!}

js / jquery

var $searchForm = $('#searchForm');
var $searchResult = $('#searchResult');

$searchForm.submit(function(e) {
    e.preventDefault() ;

    $.get(
        $searchForm.attr('action'),
        $searchForm.serialize(),
        function(data) {
            $searchResult.html(data['status']);
        }
    );
});

到目前为止，我在Vue.js中已经完成/尝试过的工作：

在刀片中查看

{!! Form::open(['route' => 'formRoute', 'id' => 'searchForm', 'class' => 'form-inline']) !!}
    <div class="form-group">
        <input type="text" name="id" class="form-control" placeholder="id" required="required">
    </div>
    <button type="submit" class="btn btn-default" v-on="click: search">Search</button>
{!! Form::close() !!}

vue / js

    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);
                    }
                );
            }
        }
    });

我想知道在处理响应时是否可以使用组件将响应数据输出到div？

只是总结一下一切：

如何使用vue js和vue-resource而不是通常的jQuery方式提交表单？
使用ajax的响应，如何最好使用组件将数据输出到div中？

在此方面的任何帮助将不胜感激，谢谢。