为什么Laravel 5.8中Vue 3渲染的组件无法使用data属性和methods方法

问题根因 #

你在webpack-mix配置中手动关闭了Vue3的选项式API支持：__VUE_OPTIONS_API__: false。该全局变量是Vue3提供的构建时配置项，设为false时，构建过程会剔除所有和选项式API相关的运行时代码，达到减小产物体积的效果。
你当前编写的组件仍在使用Vue2风格的选项式API（data、methods等均为选项式API的声明字段），相关逻辑在运行时无法被Vue识别，因此会出现组件可正常渲染、props可正常传入，但内部属性、方法全部失效且无报错的现象。

解决方法 #

1. 修改webpack-mix配置文件中的DefinePlugin配置，将__VUE_OPTIONS_API__的值改为true：

new webpack.DefinePlugin({
    __VUE_OPTIONS_API__: true, // 开启选项式API支持
    __VUE_PROD_DEVTOOLS__: false,
}),

2. 保存配置后重新执行编译命令：

npm run dev
# 开发环境下也可使用 npm run watch

3. 清空浏览器缓存后重新测试，即可恢复内部data、methods的正常功能。

如果后续你将所有组件都迁移为Vue3的组合式API写法，可以再将该配置改回false以减小生产环境的代码体积。

内容的提问来源于stack exchange，提问作者ATLANT