Babelify not transforming arrow function in Vue Components - vue.js

Question

I am trying to use Vue Single File Components with a Gulp build system.
Gulp should transform the files with Vueify and Babel, but neither of them are transforming arrow functions.
package.json
{
"dependencies": {
"#babel/cli": "7.4.4",
"#babel/core": "7.4.5",
"#babel/plugin-transform-arrow-functions": "7.2.0",
"#babel/plugin-transform-runtime": "7.4.4",
"#babel/preset-env": "7.5.2",
"#babel/runtime": "7.5.2",
"#vue/babel-preset-app": "3.7.0",
"babelify": "10.0.0",
"browserify": "16.2.3",
"core-js": "3.1.4",
"gulp": "4.0.1",
"gulp-babel": "8.0.0",
"gulp-concat": "2.6.1",
"gulp-jshint": "2.1.0",
"gulp-nodemon": "2.4.2",
"gulp-sass": "4.0.2",
"gulp-sourcemaps": "2.6.5",
"gulp-uglify": "3.0.2",
"gulp-watch": "5.0.1",
"node-sass": "4.11.0",
"regenerator-runtime": "0.13.2",
"uglifyify": "5.0.1",
"vinyl-buffer": "1.0.1",
"vinyl-source-stream": "2.0.0",
"vue": "2.6.10",
"vue-script2": "2.1.0",
"vueify": "9.4.1"
},
"engines": {
"node": "11.12.0",
"npm": "6.9.0"
},
}
gulpfile.js
gulp.task('script:' + pageName, function(done) {
var b = browserify(__dirname + '/public/js/vue/entry/'+pageName+'.js', {
debug: true, standalone: 'Bundle'
});
return b
.transform(vueify)
.transform('babelify', {
presets: ['#babel/preset-env', '#vue/babel-preset-app'],
plugins: ['#babel/plugin-transform-arrow-functions']
})
.bundle()
.pipe(source(pageName + '.min.js'))
.pipe(buffer())
.pipe(gulp.dest(paths.js.output));
done();
});
myPage.vue
<script>
module.exports = {
data: ()=>{
return {};
}
}
</script>
The output inside myPage.min.js
module.exports = {
data: ()=>{
return {};
}
}
Notice the arrow function did not get transformed.