How to link gulp and vueify?

Question

gulp.js

Hello everyone. Please help me. There are 2 files:
gulpfile.js

var gulp         = require('gulp'),
    sass         = require('gulp-sass'),
    browserSync  = require('browser-sync'),
    concat       = require('gulp-concat'),
    uglify       = require('gulp-uglify-es').default,
    cleancss     = require('gulp-clean-css'),
    autoprefixer = require('gulp-autoprefixer'),
    rsync        = require('gulp-rsync'),
    newer        = require('gulp-newer'),
    rename       = require('gulp-rename'),
    responsive   = require('gulp-responsive'),
    del          = require('del');
var babel           = require('gulp-babel');
var vueComponent = require('gulp-vue-single-file-component');


// Local Server
gulp.task('browser-sync', function() {
  browserSync({
    server: {
      baseDir: 'app'
    },
    notify: false,
    // online: false, // Work offline without internet connection
    // tunnel: true, tunnel: 'projectname', // Demonstration page: http://projectname.localtunnel.me
  })
});
function bsReload(done) { browserSync.reload(); done(); };

// Custom Styles
gulp.task('styles', function() {
  return gulp.src('app/sass/**/*.sass')
  .pipe(sass({ outputStyle: 'expanded' }))
  .pipe(concat('styles.min.css'))
  .pipe(autoprefixer({
    grid: true,
    overrideBrowserslist: ['last 10 versions']
  }))
  .pipe(cleancss( {level: { 1: { specialComments: 0 } } })) // Optional. Comment out when debugging
  .pipe(gulp.dest('app/css'))
  .pipe(browserSync.stream())
});
gulp.task('vue', () => gulp.src('app/js/components/*.vue')
  .pipe(vueComponent({ debug: true, loadCssMethod: 'loadCss' }))
  .pipe(babel({ plugins: ['@babel/plugin-transform-modules-amd'] }))
  .pipe(rename({ extname: '.js' }))
  .pipe(gulp.dest('app/js/components'))
  .pipe(browserSync.stream())
);
// Scripts & JS Libraries
gulp.task('scripts', function() {
  return gulp.src([
    // 'node_modules/jquery/dist/jquery.min.js', // Optional jQuery plug-in (npm i --save-dev jquery)
    //'app/js/_lazy.js', // JS library plug-in example
    'app/js/components/*.js',
    'app/js/_custom.js', // Custom scripts. Always at the end
    ])
    .pipe(babel({ plugins: ['@babel/plugin-transform-modules-amd'] }))
  .pipe(concat('scripts.min.js'))
  //.pipe(uglify())
  .pipe(gulp.dest('app/js'))
  .pipe(browserSync.reload({ stream: true }))
});

// Responsive Images
var quality = 95; // Responsive images quality

// Produce @1x images
gulp.task('img-responsive-1x', async function() {
  return gulp.src('app/img/_src/**/*.{png,jpg,jpeg,webp,raw}')
    .pipe(newer('app/img/@1x'))
    .pipe(responsive({
      '**/*': { width: '50%', quality: quality }
    })).on('error', function (e) { console.log(e) })
    .pipe(rename(function (path) {path.extname = path.extname.replace('jpeg', 'jpg')}))
    .pipe(gulp.dest('app/img/@1x'))
});
// Produce @2x images
gulp.task('img-responsive-2x', async function() {
  return gulp.src('app/img/_src/**/*.{png,jpg,jpeg,webp,raw}')
    .pipe(newer('app/img/@2x'))
    .pipe(responsive({
      '**/*': { width: '100%', quality: quality }
    })).on('error', function (e) { console.log(e) })
    .pipe(rename(function (path) {path.extname = path.extname.replace('jpeg', 'jpg')}))
    .pipe(gulp.dest('app/img/@2x'))
});
gulp.task('img', gulp.series('img-responsive-1x', 'img-responsive-2x', bsReload));

// Clean @*x IMG's
gulp.task('cleanimg', function() {
  return del(['app/img/@*'], { force: true })
});

// Code & Reload
gulp.task('code', function() {
  return gulp.src('app/**/*.html')
  .pipe(browserSync.reload({ stream: true }))
});

// Deploy
gulp.task('rsync', function() {
  return gulp.src('app/')
  .pipe(rsync({
    root: 'app/',
    hostname: '[email protected]',
    destination: 'yousite/public_html/',
    // include: ['*.htaccess'], // Included files
    exclude: ['**/Thumbs.db', '**/*.DS_Store'], // Excluded files
    recursive: true,
    archive: true,
    silent: false,
    compress: true
  }))
});

gulp.task('watch', function() {
  gulp.watch('app/sass/**/*.sass', gulp.parallel('styles'));
  gulp.watch(['libs/**/*.js', 'app/js/_custom.js'], gulp.parallel('scripts'));
  gulp.watch('app/js/components/*.vue', gulp.parallel('vue'));
  gulp.watch('app/*.html', gulp.parallel('code'));
  gulp.watch('app/img/_src/**/*', gulp.parallel('img'));
});

gulp.task('default', gulp.parallel('img', 'styles', 'scripts','vue', 'browser-sync', 'watch'));

package.json

{
  "name": "optimizedhtml",
  "version": "5.0.0",
  "description": "OptimizedHTML 5 - Start HTML Template",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "WebDesign Master",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.5.5",
    "@babel/plugin-transform-modules-amd": "^7.5.0",
    "@babel/preset-env": "^7.5.5",
    "bootstrap": "^4.3.1",
    "browser-sync": "^2.26.7",
    "del": "^5.0.0",
    "gulp": "^4.0.2",
    "gulp-autoprefixer": "^7.0.0",
    "gulp-babel": "^8.0.0",
    "gulp-clean-css": "^4.2.0",
    "gulp-concat": "^2.6.1",
    "gulp-newer": "^1.4.0",
    "gulp-rename": "^1.4.0",
    "gulp-responsive": "^2.14.0",
    "gulp-rsync": "0.0.8",
    "gulp-sass": "^4.0.2",
    "gulp-uglify-es": "^1.0.4",
    "gulp-vue-single-file-component": "^1.0.11"
  },
  "dependencies": {
    "amd-loader": "0.0.8"
  }
}

When running gulp, information from '.vue' components is not displayed - it compiles incorrectly. How can vue-cli be friends with gulp?