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

请教一个关于laravel-mix
我使用extract把vue、jquery打包在一起，按照了顺心引入了相应的js，但是我再blade视图里面使用vue的data里面定义的数据却不能访问；我google好多资料也没找到解决办法，特来请教
打包代码

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

引入文件

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

使用代码

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

出错提示

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

我在vue的实例里面使用beforeCreate:function(){ alert() }也是可以的,这里很是不理解，特来请教，感激不尽。