how to use vue as cdn

[lmislm]

class Workspace {
  constructor(elId = "_workspace-id") {
    this.elId = elId;
    this.workspaceOriginalVM = null;
    this._RootVM = null;
  }

  toMountInstance(callback) {
    let workspaceVM = new Vue({
      router,
      render: (h) => h(App),
    });
    this.workspaceOriginalVM = workspaceVM;
    workspaceVM.$mount(`#${this.elId}`);

    this.setRootVM(workspaceVM);

    if (typeof callback === "function") {
      callback(workspaceVM);
    }
  }
  setRootVM(workspaceVM) {
    this._RootVM = workspaceVM;
  }
  toUnMountInstance(callback) {
    this.workspaceOriginalVM.$destroy();
    this.workspaceOriginalVM = null;
    this._RootVM = null;

    if (typeof callback === "function") {
      callback();
    }
  }

  mount(callback) {
    const rootId = document.querySelector(`#${this.elId}`);
    if (!rootId) {
      document.body.append(
        Object.assign(document.createElement("div"), { id: this.elId })
      );
    }
    this.toMountInstance(callback);
  }

  unMount(callback) {
    const rootId = document.querySelector(`#${this.elId}`);
    if (rootId) {
      document.body.removeChild(rootId);
      this.toUnMountInstance(callback);
    }
  }
  get RootVM() {
    // .$children[0]
    return this._RootVM;
  }

  set RootVM(value) {
    this._RootVM = value;
  }
}

window.workspaceVM = new Workspace();

test

// Import the necessary dependencies
const Vue = require("vue");
const { createLocalVue } = require("@vue/test-utils");
const Workspace = require("./Workspace");

describe("Workspace", () => {
  let workspace;

  beforeEach(() => {
    workspace = new Workspace();
  });

  afterEach(() => {
    workspace = null;
  });

  it("should mount Vue instance to the provided element ID", () => {
    const localVue = createLocalVue();
    const mountSpy = jest.spyOn(localVue.prototype, "$mount");

    workspace.mount();

    expect(mountSpy).toHaveBeenCalledWith(`#${workspace.elId}`);
  });

  it("should unmount Vue instance from the DOM", () => {
    const destroySpy = jest.spyOn(workspace.workspaceOriginalVM, "$destroy");
    const removeChildSpy = jest.spyOn(document.body, "removeChild");

    workspace.unMount();

    expect(destroySpy).toHaveBeenCalled();
    expect(removeChildSpy).toHaveBeenCalledWith(
      document.querySelector(`#${workspace.elId}`)
    );
  });

  it("should set the root Vue instance", () => {
    const rootVM = new Vue();
    workspace.setRootVM(rootVM);

    expect(workspace.RootVM).toBe(rootVM);
  });
});

window.workspaceVM.mount((ctx) => {
  console.log(ctx._roomVM);
  console.log("1111111111 mounting workspace");
});

window.workspaceVM.unMount();

 window.workspaceVM.roomVM.$data.homeAbout = 'xxx'

single on file

const { defineConfig } = require("@vue/cli-service");
module.exports = defineConfig({
  transpileDependencies: true,
  css: {
    extract: false,
  },
  configureWebpack: {
    output: {
      filename: "workspace.js",
    },
    optimization: {
      splitChunks: false,
    },
  },
});