Gulp 4 + Watchify does not apply vueify

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>

vuejs / vueify

Gulp 4 + Watchify does not apply vueify #225