窗体输入绑定v模型未在laravel的视图页面中呈现

Question

我对vue.js有疑问，我的Web应用程序站点中已经有一个库vue.js。现在我的问题是，当我尝试使用Form Input Bindings v-model下面的这行代码时

<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>

我注意到这是什么

Use of undefined constant test - assumed 'test'

因此，我尝试通过添加一个@来解决这一问题，因为laravel正在使用刀片模板。现在，当我添加@时，错误消失了，但是渲染方式是{{ test }}。为什么在我的浏览器中无法正确显示？有人可以帮我解决这个问题吗？非常感谢任何帮助。 TIA。

这是我的代码

@extends('layouts.app')
@section('title', 'Cases New Invoice | RMTG')
@section('content')

<div id="content-wrapper">
    <div class="container-fluid">
        <!-- Breadcrumbs-->
        <ol class="breadcrumb">
            <li class="breadcrumb-item">
              <a href="#">Dashboard</a>
            </li>
            <li class="breadcrumb-item active">Cases New Invoice</li>
        </ol>
        <div class="row">
            <div class="col-lg-12">
                <div class="card mb-3">
                    <div class="card-header">
                        <i class="fa fa-file"></i>
                        New Invoice</div>
                    <div class="card-body">
                        <div class="form-group">
                            <div class="form-row">
                                <div class="col-md-6" >
                                    <div class="table-responsive">
                                    <form action="" method="post">
                                        {{ csrf_field() }}
                                        <table class="table table-bordered"  width="100%" cellspacing="0">
                                            <thead>
                                                <tr>
                                                    <th width="150px;">Contact Name: </th>
                                                    <td>{{ $opp->contacts }}</td>
                                                </tr>
                                                <tr>
                                                    <th>Case Number:</th>
                                                    <td>OPP -{{ $opp->code }}</td>
                                                </tr>
                                                <tr>
                                                    <th>Case Name:</th>
                                                    <td>{{ $opp->tax_year }}</td>
                                                </tr>
                                                <tr>
                                                    <th>Item Code:</th>
                                                    <td>
                                                        <div id="app-item">
                                                            <select name="itemCode" class="form-control">
                                                                <option v-for="item in items" v-bind:value="item.value">
                                                                    @{{ item.text }}
                                                                </option>
                                                            </select>
                                                        </div>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <th>Notes: </th>
                                                    <td>
                                                        <input type="text" name="notes" class="form-control" />
                                                    </td>
                                                </tr>
                                                <tr>

                                                    <th>Amount: </th>

                                                    <td><input v-model="test" type="text" name="amount" class="form-control" required />

                                                    </td>
                                                </tr>
                                                <tr>
                                                    <th>VAT 20% Amt: </th>
                                                    <td>
                                                        <input type="text" name="vatAmount" class="form-control" />
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <th>Total Amount: </th>
                                                    <td>
                                                        <input type="text" name="totalAmount" class="form-control" />
                                                    </td>
                                                </tr>
                                            </thead>
                                        </table>
                                        <div class="pull-right">
                                            <button type="submit" class="btn btn-success">
                                                <i class="fa fa-save" aria-hidden="true" style="font-size:24px"></i> Save
                                            </button>
                                        </div>
                                    </form>
                                    </div>
                                </div>  
                                <div class="col-md-6" >
                                    <h3>Amount Due: £ @{{ test }}</h3>  


                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    //Item code
    new Vue({
    el: '#app-item',
        data: {
            items:[
                { text:'Tax Returns', value: 'Tax Returns' },
                { text:'UTR Filing', value: 'UTR Filing'}
            ]
        }
    })


</script>

@endsection