a broken JupyterLab extension implemented (twice) in vue

index.ts

import {
  JupyterFrontEnd, JupyterFrontEndPlugin
} from '@jupyterlab/application';

import {MainAreaWidget} from '@jupyterlab/apputils';
import {ILauncher} from '@jupyterlab/launcher';
import '../style/index.css';

const id = 'vue-example';
let _nextId = 0;
const CMD = {
  show: `${id}:show`
};
const CSS = {
  icon: 'jp-VueExample-Icon',
  show: 'jp-VueExample-Show'
}

/**
 * Initialization data for the vue-example extension.
 */
const extension: JupyterFrontEndPlugin<void> = {
  id,
  autoStart: true,
  requires: [ILauncher],
  activate: (app: JupyterFrontEnd, launcher: ILauncher) => {
    console.log('example vue extension loaded');

    app.commands.addCommand(CMD.show, {
      iconClass: CSS.icon,
      label: 'Vue Example',
      caption: 'Show the Vue Example',
      iconLabel: 'Vue Example',
      usage: 'click it',
      className: CSS.show,
      icon: CSS.icon,
      execute: async () => {
        const {ExampleVueWidget} = await import(/* webpackChunkName: "vue" */ './widget');
        const content = new ExampleVueWidget();
        const main = new MainAreaWidget({content});
        const i = _nextId++;
        main.id = `${id}-${i}`;
        let updateTitle = () => {
          main.title.label = `Vue Example ${content.name}`;
        }
        updateTitle();
        content.nameChanged.connect(updateTitle);
        main.title.iconClass = CSS.icon;
        app.shell.add(main);
        console.log('added to shell');
      }
    });

    launcher.add({
      command: CMD.show,
      category: 'Other'
    });
  }
};

export default extension;

package.json

{
  "name": "vue-example",
  "version": "0.1.0",
  "description": "A JupyterLab extension.",
  "keywords": [
    "jupyter",
    "jupyterlab",
    "jupyterlab-extension"
  ],
  "homepage": "https://github.com/my_name/myextension",
  "bugs": {
    "url": "https://github.com/my_name/myextension/issues"
  },
  "license": "BSD-3-Clause",
  "author": "foo",
  "files": [
    "{lib,style}/**/*.{d.ts,eot,gif,html,jpg,js,js.map,json,png,svg,woff2,ttf,css,vue}"
  ],
  "main": "lib/index.js",
  "types": "lib/index.d.ts",
  "style": "style/index.css",
  "repository": {
    "type": "git",
    "url": "https://github.com/my_name/myextension.git"
  },
  "scripts": {
    "bootstrap": "jlpm && jlpm build",
    "build": "jlpm build:ts && jlpm build:vue",
    "build:ts": "tsc",
    "build:vue": "cp src/*.vue lib/",
    "clean": "rimraf lib && rimraf tsconfig.tsbuildinfo",
    "watch": "tsc -w"
  },
  "dependencies": {
    "@jupyterlab/application": "^1.0.0",
    "@jupyterlab/launcher": "^1.0.0",
    "vue": "^2.6.10",
    "vue-loader": "14",
    "vue-template-compiler": "^2.6.10",
    "ts-loader": "^6.0.2"
  },
  "devDependencies": {
    "rimraf": "^2.6.1",
    "typescript": "~3.5.2",
    "webpack": "^4.32.2",
    "css-loader": "~2.1.1"
  },
  "sideEffects": [
    "style/*.css"
  ],
  "jupyterlab": {
    "extension": true
  }
}

vue-shims.d.ts

declare module '*.vue' {
  import Vue from 'vue';
  export default Vue;
}

declare module 'vue/dist/vue.js' {
  import Vue from 'vue';
  export default Vue;
}

widget.ts

import {Widget} from '@phosphor/widgets';
import {Message} from '@phosphor/messaging';
import {Signal} from '@phosphor/signaling';

import Vue from 'vue/dist/vue.js';

import HelloComponent from 'vue-loader!./Hello.vue';

const template = `
<div>
  Name: <input v-model="name" type="text">
  <hello-component :name="name" :initialEnthusiasm="1" />
</div>
`;

export class ExampleVueWidget extends Widget {
  private _v: Vue;
  private _name = 'Jupyter';

  private _nameChanged = new Signal<this, string>(this);

  onAfterShow(msg: Message) {
    super.onAfterShow(msg);

    if (this._v) {
      return;
    }
    const el = document.createElement('div');
    this.node.appendChild(el);

    const that = this;

    this._v = new Vue({
        el,
        template,
        data: { name: this.name },
        components: { HelloComponent },
        watch: { name(_newVal, _oldVal) { that.name = _newVal; } }
    });
  }

  get name() {
    return this._name;
  }

  set name(name) {
    if (name !== this._name) {
      this._name = name;
      this._nameChanged.emit(this._name);
    }
  }

  get nameChanged() {
    return this._nameChanged;
  }
}