JS code:

new Vue({

    el : '#app',
    data : {
        aa : 1
    }
})

Print on the page:
@{{ aa }}

Normally, "1" should be printed on the page, but it keeps reporting errors. The error message is: Property or method "aa" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.

The VUE referenced is app.js generated after npm installation under the Laravel framework. If you switch to the independent vue.js downloaded from the official website, the error will not be reported and "1" will be printed on the page. Why is this? For beginners, I don’t quite understand. Is there something wrong with the generated app.js? Or is there something wrong with my package.json configuration
package.json:
{
"private": true,
"scripts": {

"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"

},
"devDependencies": {

"axios": "^0.15.3",
"bootstrap-sass": "^3.3.7",
"cross-env": "^3.2.3",
"jquery": "^3.1.1",
"laravel-mix": "0.*",
"lodash": "^4.17.4",
"vue": "^2.1.10"

}
}

Has anyone encountered this problem? Could you please help me to answer it. I would be very grateful.