vuejs2 - Laravel Spark vuejs 方法不适用于事件

Question

我已经在 IRC 和 slack 中询问过，但我无法让任何人弄清楚为什么这不起作用。

//test-vue.blade.php
@extends('spark::layouts.app')
@section('content')
<div id="testing">

    <input type="text" v-model="vin">
    <button type="button" v-on:click="test">Click me</button>

</div>
@endsection

       /* resources/assets/js/boostrap.js
 |--------------------------------------------------------------------------
 | Laravel Spark Components
 |--------------------------------------------------------------------------
 |
 | Here we will load the Spark components which makes up the core client
 | application. This is also a convenient spot for you to load all of
 | your components that you write while building your applications.
 */

require('./../spark-components/bootstrap');

require('./home');


var f = new Vue({

    el:'#testing',

    data: {
        items: '',
        vin: 'vdfdfa'
    },
    created: function () {
        console.log(this.vin);
        this.test();
    },

    mounted: function (){

    },

    methods: {

        test : function(){

            alert('test function called');
        },

        getDetailByVin: function(){

            console.log('testing');

            var urlData = 'http://asisauto.app:8000/test_data.json';
            // GET /someUrl
            var self = this;
            this.$http.get(urlData).then((response) => {
                // success callback
                console.log(response.body);
        }, (response) => {
                // error callback
                console.log('error');
            });

        }

    }

});

我已经尝试了很多事情，但无法弄清楚会发生什么。Mounted 被调用所以 f.text(); 如果我把它放在声明之后。但是按下按钮永远不起作用。控制台中也没有任何错误。