Gulp 4 + Watchify does not apply vueify

[MidnightPolaris]

I am doing some simple tests on using Gulp and Watchify for Vue projects when I run into a problem where Watchify triggers a rebundle but the resulting bundle.js gives an error when run. Further investigation indicates when rebundling the <script> of the Vue component is not included in the bundle. This only happens when Watchify triggers a rebundle but not during initial bundling using the default task or running the js task directly.

gulpfile.js

var browserify = require('browserify')
var watchify = require('watchify')
var gulp = require('gulp')
var source = require('vinyl-source-stream')
var buffer = require('vinyl-buffer')
var uglify = require('gulp-uglify')
var sourcemaps = require('gulp-sourcemaps')
var rename = require("gulp-rename")

const b = browserify({
	entries: './index.js',
	debug: true,
	cache: {},
	packageCache: {},
})

gulp.task('js', function(){
	return b
		.transform('babelify', {presets: ['env']})
		.transform('vueify')
	.bundle()
		.pipe(source('bundle.js'))
		.pipe(buffer())
		.pipe(sourcemaps.init({loadMaps: true}))
		.pipe(uglify())
		.on('error', console.log.bind(console))
		.pipe(sourcemaps.write('./'))
		.pipe(gulp.dest('./'))
});

gulp.task('watch', function(){
	b.plugin(watchify)
	b.on('update', gulp.series('js'))
	return Promise.resolve(true)
})

gulp.task('default', gulp.series('watch', 'js'))

index.js

var Vue = require('vue')
var App = require('./App.vue')

new Vue({
	el: '#app',
	render: h => h(App)
})

App.vue

<template>
	<div id="app" class="container">
		<h2 class="display-2">{{ msg }}</h2>
	</div>
</template>

<script>
	module.exports = {
		data: () => ({
			msg: 'Hello World'
		})
	}
</script>

<style scoped>
</style>

[francarmona]

I have got the same issue