Пакет gulp-single-file-component не создает корректный вывод шаблона.Какой пакет gulp будет правильно компилировать мои компоненты .vue?

Question

Я новичок в Vue.js, поэтому прошу прощения за отсутствие знаний. Я пытаюсь использовать gulp для компиляции моих файлов vue в правильно скомпилированные файлы, но безуспешно с файлами vue, которые имеют несколько тегов 'template'. Любая помощь очень ценится.

мой поиск-form.vue. в основном вытаскивается с сайта buefy для шаблона таблицы.

<template>
    <section>
        <b-field grouped group-multiline>
            <div class="control">
                <b-switch v-model="showDetailIcon">Show detail icon</b-switch>
            </div>
        </b-field>
        <b-table :data="data" ref="table" paginated per-page="5" :opened-detailed="defaultOpenedDetails" detailed detail-key="id" @details-open="(row, index) => $toast.open(`Expanded ${row.logID}`)" :show-detail-icon="showDetailIcon" aria-next-label="Next page" aria-previous-label="Previous page" aria-page-label="Page" aria-current-label="Current page">
            <template slot-scope="props">
                <b-table-column field="callerName" label="Caller" width="40" numeric>{{ props.row.callerName }}</b-table-column>
                <b-table-column field="logQuestion" label="Question" sortable>
                    <template v-if="showDetailIcon">
                        {{ props.row.logQuestion }}

                    </template>
                    <template v-else>
                        <a @click="toggle(props.row)">{{ props.row.logQuestion }}</a>
                    </template>
                </b-table-column>
                <b-table-column field="logAnswer" label="Answer" sortable>{{ props.row.logAnswer }}</b-table-column>
                <b-table-column field="logDate" label="Log Date" sortable centered><span class="tag is-success">{{ new Date(props.row.logDate).toLocaleDateString() }}</span></b-table-column>
            </template>
            <template slot="detail" slot-scope="props">
                <article class="media">
                    <figure class="media-left">
                        <p class="image is-64x64"><img src="/static/img/placeholder-128x128.png">/p>
                    </figure>
                    <div class="media-content">
                        <div class="content">
                            <p>
                                <strong>{{ props.row.customCategoryName }} {{ props.row.categories }}</strong>
                                <small>@{{ props.row.logStaffName }}</small>
                                <small>31m</small>
                                <br>Lorem ipsum dolor sit amet, consectetur adipiscing elit.Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.
                            </p>
                        </div>
                    </div>
                </article>
            </template>
        </b-table>
    </section>
</template>
<script type="text/javascript">
    export default {
        name: 'search-form',
        data() {
            return {
                data: [],
                columns: [
                    {
                        field: 'logID',
                        label: 'Log ID',
                        visible: false
                    },
                    {
                        field: 'callerName',
                        label: 'Caller',
                        sortable: true
                    },
                    {
                        field: 'logQuestion',
                        label: 'Question',
                        sortable: true
                    },
                    {
                        field: 'logAnswer',
                        label: 'Answer',
                        sortable: true
                    },
                    {
                        field: 'customCategoryName',
                        label: 'Custom Category',
                        sortable: true
                    },
                    {
                        field: 'categories',
                        label: 'Categories',
                        sortable: true
                    },
                    {
                        field: 'logStaffName',
                        label: 'Staff Name',
                        sortable: true
                    },
                    {
                        field: 'logDate',
                        label: 'Log Date',
                        sortable: true
                    }
                ],
                isPaginated: true,
                isPaginationSimple: false,
                defaultSortDirection: 'asc',
                currentPage: 1,
                perPage: 15,
                isStriped: true,
                isHoverable: true,
                hasMobileCards: true,
                isEmpty: false,
                defaultOpenedDetails: [1],
                showDetailIcon: true
            }
        },
        mounted() {
            let self = this;
            axios.get('https://localhost:44390/Log')
                .then(response => {
                    self.data = response.data;
                    if (self.data.length === 0) {
                        self.isEmpty = true;
                    }
                }).catch(function (error) {
                    console.log(error);
                });
        },
        methods: {
            toggle(row) {
                this.$refs.table.toggleDetails(row)
            }
        }
    }
</script>

my gulpfile.js

const gulp = require('gulp');
const plumber = require('gulp-plumber');
const ts = require('gulp-typescript');
const tsProject = ts.createProject("tsconfig.json");
const vueify = require('gulp-vue-single-file-component');
const babel = require('gulp-babel');
const rename = require('gulp-rename');

gulp.task('js:dev', gulp.series(compileVue, function () {
    return gulp.src('typescript/**/*.ts')
        .pipe(plumber({
            errorHandler(err) {
                notify.onError({
                    title: `Gulp error in ${err.plugin}`,
                    message: err.toString()
                })(err);
            }
        }))
        .pipe(tsProject()).js
        .pipe(gulp.dest("wwwroot/js/app"));
}));

function compileVue() {
    return gulp.src('typescript/**/*.vue')
        .pipe(vueify({ debug: true, loadCssMethod: 'loadCss' }))
        .pipe(babel({ plugins: ['@babel/plugin-transform-modules-amd'] }))
        .pipe(rename({ ext: '.js', suffix: '.vue' }))
        .pipe(gulp.dest('wwwroot/js/app'));
}

Мой вывод из функции gulpfile compileVue.

define(["exports"], function (_exports) {
  "use strict";

  Object.defineProperty(_exports, "__esModule", {
    value: true
  });
  _exports.default = void 0;
  var _default = {
    template: '<section><b-field grouped="" group-multiline=""><div class="control"><b-switch v-model="showDetailIcon">Show detail icon</b-switch></div></b-field><b-table :data="data" ref="table" paginated="" per-page="5" :opened-detailed="defaultOpenedDetails" detailed="" detail-key="id" @details-open="(row, index) => $toast.open(`Expanded ${row.logID}`)" :show-detail-icon="showDetailIcon" aria-next-label="Next page" aria-previous-label="Previous page" aria-page-label="Page" aria-current-label="Current page"><template slot-scope="props"><b-table-column field="callerName" label="Caller" width="40" numeric="">{{ props.row.callerName }}</b-table-column><b-table-column field="logQuestion" label="Question" sortable=""><template v-if="showDetailIcon">{{ props.row.logQuestion }}<template v-else=""><a @click="toggle(props.row)">{{ props.row.logQuestion }}</a></template></b-table-column><b-table-column field="logAnswer" label="Answer" sortable="">{{ props.row.logAnswer }}</b-table-column><b-table-column field="logDate" label="Log Date" sortable="" centered=""><span class="tag is-success">{{ new Date(props.row.logDate).toLocaleDateString() }}</span></b-table-column></template><template slot="detail" slot-scope="props"><article class="media"><figure class="media-left"><p class="image is-64x64"><img src="/static/img/placeholder-128x128.png">/p&gt;</p></figure><div class="media-content"><div class="content"><p><strong>{{ props.row.customCategoryName }} {{ props.row.categories }}</strong><small>@{{ props.row.logStaffName }}</small><small>31m</small><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit.Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p></div></div></article></template></b-table></section></template>',
    name: 'search-form',

    data() {
      return {
        data: [],
        columns: [{
          field: 'logID',
          label: 'Log ID',
          visible: false
        }, {
          field: 'callerName',
          label: 'Caller',
          sortable: true
        }, {
          field: 'logQuestion',
          label: 'Question',
          sortable: true
        }, {
          field: 'logAnswer',
          label: 'Answer',
          sortable: true
        }, {
          field: 'customCategoryName',
          label: 'Custom Category',
          sortable: true
        }, {
          field: 'categories',
          label: 'Categories',
          sortable: true
        }, {
          field: 'logStaffName',
          label: 'Staff Name',
          sortable: true
        }, {
          field: 'logDate',
          label: 'Log Date',
          sortable: true
        }],
        isPaginated: true,
        isPaginationSimple: false,
        defaultSortDirection: 'asc',
        currentPage: 1,
        perPage: 15,
        isStriped: true,
        isHoverable: true,
        hasMobileCards: true,
        isEmpty: false,
        defaultOpenedDetails: [1],
        showDetailIcon: true
      };
    },

    mounted() {
      let self = this;
      axios.get('https://localhost:44390/Log').then(response => {
        self.data = response.data;

        if (self.data.length === 0) {
          self.isEmpty = true;
        }
      }).catch(function (error) {
        console.log(error);
      });
    },

    methods: {
      toggle(row) {
        this.$refs.table.toggleDetails(row);
      }

    }
  };
  _exports.default = _default;
});

Я не понимаю, почему свойство шаблона внутри моего сгенерированного вывода повреждено. Что я делаю неправильно? Я попытался включить только те файлы, которые несут ответственность, чтобы не запутать мой пост.

Я искал в Интернете последние два дня, но не нашел какого-либо жесткого решения моей проблемы, поэтому здесь я задаю вопрос о SO.