vuejs 3: не рендерится шаблон отдельного компонента

Всем привет. Достался один проектик с webpack, в который я хочу добавить vue.js Сам vue заработал (функция в нужном компоненте вроде mounted() в консольку выводит инфу), но шаблон компонента вообще не выводится. Консольных ошибок нету.

Проблемный компонент Departments.vue:

<template lang="pug">
.cont
  .department 111
</template>


<script>
export default {
 name: 'departments',
 data() {
   return {
     deps: '',
   }
 },
 props: {
   list: {
     type: String,
     default: ''
   }
 },
 beforeMount() {
   console.log('before');
 },
 mounted() {
   console.log('mount');
 }
}
</script>

<style></style>

html(только на одной странице пока вывожу, в шаблоне битрикса правда):

<div id="app">
    <hr/>
    lala <br/>
    <departments list='vue list'></departments>
    <hr/>
    <test></test>
</div>

в app.js:

import { createApp } from 'vue'
import departments from './components/Departments.vue';

    const app = createApp({
      data() {
        return {
          count: 134
        }
      },
      // components: {
      //     departments,
      // },
    })
    app.component('departments', departments)
    app.component('test', {
        template : '<div><h1>This is coming from component</h1></div>'
    })

    app.mount('#app')

Уже для теста я прописал еще один компонент прямо в app.js - и работает, зараза! Вот так:

А проблемный компонент в консольке выводит вот это: '< ! ---- >'

package.json

{
  "name": "---",
  "version": "1.0.0",
  "description": "just show me vue templates",
  "main": "index.js",
  "scripts": {
    "dev": "webpack --mode development",
    "build": "webpack --mode production"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@vue/compiler-sfc": "^3.2.37",
    "autoprefixer": "^10.4.7",
    "babel-core": "^6.26.3",
    "babel-loader": "^8.2.5",
    "babel-preset-env": "^1.7.0",
    "browser-sync": "^2.27.10",
    "browser-sync-webpack-plugin": "^2.3.0",
    "chartist-plugin-pointlabels": "^0.0.6",
    "copy-webpack-plugin": "^11.0.0",
    "css-loader": "^6.7.1",
    "cssnano": "^5.1.12",
    "html-webpack-plugin": "^5.5.0",
    "jquery": "^3.6.0",
    "jquery-mask-plugin": "^1.14.16",
    "jquery.cookie": "^1.4.1",
    "jquery.photoswipe": "^1.1.1",
    "magnific-popup": "^1.1.0",
    "mini-css-extract-plugin": "^2.6.1",
    "node-loader": "^2.0.0",
    "node-sass": "^7.0.1",
    "nouislider": "^15.6.0",
    "photoswipe": "^5.2.8",
    "postcss-loader": "^7.0.1",
    "pug": "^2.0.4",
    "pug-html-loader": "^1.1.5",
    "pug-plain-loader": "^1.1.0",
    "resolve-url-loader": "^5.0.0",
    "sass": "^1.53.0",
    "sass-loader": "^13.0.2",
    "style-loader": "^3.3.1",
    "swiper": "^8.3.1",
    "url-loader": "^4.1.1",
    "vue-loader": "^17.0.0",
    "vue-style-loader": "^4.1.3",
    "vue-template-compiler": "^2.7.7",
    "webpack": "^5.73.0",
    "webpack-cli": "^4.10.0",
    "webpack-node-externals": "^3.0.0"
  },
  "dependencies": {
    "@babel/core": "^7.18.6",
    "afterglowplayer": "^1.1.0",
    "bigpicture": "^2.6.2",
    "chartist": "^0.11.4",
    "clean-webpack-plugin": "^4.0.0",
    "file-loader": "^6.2.0",
    "imagemin-mozjpeg": "^10.0.0",
    "imagemin-webpack-plugin": "^2.4.2",
    "lity": "^2.4.1",
    "vue": "^3.2.37",
    "vue-click-outside": "^1.1.0"
  }
}

webpack.config.js

const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CleanWebpackPlugin = require('clean-webpack-plugin');
const ImageminPlugin = require('imagemin-webpack-plugin').default;
const CopyWebpackPlugin = require('copy-webpack-plugin');
const BrowserSyncPlugin = require('browser-sync-webpack-plugin')
const webpack = require('webpack');

const { VueLoaderPlugin } = require('vue-loader');


module.exports = {
  entry: { main: './src/js/app.js' },
  output: {
    path: path.resolve(),
    filename: '../js/bundle.js'
  },
  target: 'node',
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.scss$/,
        use:  [
            'style-loader',
            MiniCssExtractPlugin.loader,
            {
              loader: 'css-loader',
              options: {
                url: false,
              },
            },
          'postcss-loader',
          'resolve-url-loader',
          {
            loader: 'sass-loader',
              options: {
                sourceMap: true
              }
          }
          ]
      },
      {
        test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
        use: [{
            loader: 'file-loader',
            options: {
                name: '[name].[ext]',
                outputPath: 'fonts/'
            }
        }]
      },
      {
        test: /\.(png|gif)(\?v=\d+\.\d+\.\d+)?$/,
        use: [{
            loader: 'file-loader',
            options: {
                name: '[name].[ext]',
                outputPath: 'images/plugins'
            }
        }]
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.pug$/,
        loader: 'pug-plain-loader'
      }
    ]
  },
  plugins: [
    new BrowserSyncPlugin({
      host: 'localhost',
      port: 3000,
      server: { baseDir: [path] }
    }),
    new CopyWebpackPlugin({
      patterns:[
        {from: 'src/img/', to: '../images/',},
        {from: 'src/fonts/', to: '../fonts/',}
      ]
    }),
    new ImageminPlugin({
      pngquant: {
        quality: '100'
      },
    }),
    new MiniCssExtractPlugin({
      filename: '../template_styles.css',
    }),
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
      'window.jQuery': 'jquery'
    }),
       new  VueLoaderPlugin(),
  ],
};

Подскажите кто-нить в чем я облажался?