Laravel-mix extract 之后 vue 为啥不能正常使用？

mix.js('resources/assets/js/app.js', 'public/js')
    .extract(['jquery' , 'vue'])
   .sass('resources/assets/sass/vendor.scss', 'public/css/vendor.css')
    .sass('resources/assets/sass/app.scss', 'public/css/app.css');Copy

<script src="{{ mix('/js/manifest.js') }}"></script>
<script src="{{ mix('/js/vendor.js') }}"></script>
<script src="{{ mix('/js/app.js') }}"></script>Copy

@extends('layouts.app')
@section('content')
    <example></example>
    <div>@{{ message }}</div>
@endsection
@section('body-js')
    <script>
        new Vue({
            el: "#app",
            data: {
                message: "hello"
            }
        })
    </script>
@endsectionCopy

vendor.js:11051 [Vue warn]: Property or method "message" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option. 
(found in <Root>)Copy