Gulp task to configure VueJS

Question

I am build a Chrome extension that uses Vuejs in several content pages, I am having hard time configure the gulpfile because I can not refernace files within main.js. the problem is that it can not find ./app.vue as if the location is not defined.

Here is my configuration

// generated on 2017-01-30 using generator-chrome-extension 0.6.1
import gulp from 'gulp';
import gulpLoadPlugins from 'gulp-load-plugins';
import del from 'del';
import runSequence from 'run-sequence';
import {stream as wiredep} from 'wiredep';
var fs = require("fs")
var browserify = require('browserify')
var vueify = require('vueify')
var babelify = require('babelify')
var aliasify = require('aliasify')
// var nodeSass = require('node-sass')

const $ = gulpLoadPlugins();

gulp.task('vueify', () => {
  return browserify({
    entries:['./app/recorder/main.js'],
  })
  .transform(vueify)
  .transform(babelify)
  .bundle()
  .pipe(fs.createWriteStream("app/scripts/recorder.js"))
})

I am looking for resources to find a solution to build a task that watches vue changes and apply the transformations. I already built my app on webpack but due to client changes I have to make it work with gulp.