"Uknown component" in Phaser.Scene getting from a Vue component

Phaser 3
1

Made component that loads data and builds up a scene. This is part of the code:

  mounted() {
    if (this.Game == null) {
      const config = {
                 ...
      };
      axios.get("/world").then(response => {
        this.worldData = response.data;
        this.Game = new Phaser.Game(config);
        let layerMap = new LayerMap( // LayerMap extends Phaser.Scene.
          this.worldData.LandID,
          this.worldData.MapSize,
          this.worldData.TileSize,
          this.worldData.Land
        );
        this.tileSize = this.worldData.TileSize;
        this.worldData.Land;
        this.Game.scene.add("MapLayer", layerMap, true);
      });
    }
  },
  data() {
    return {
      Game: null,
      worldData: null,
      tileSize: null
    };

The scene renders fine.

When checking the component with the Vue explorer, I get this:

image
image.png325×547 35 KB

“Unknown Component” This is specially annoying from the scene, as I need to access to it for further work. Is the scene and renderer objects here somehow separated from Phaser? I’m clueless.

Thanks.

2

why don’t u try normal firefox or chrome dev tools?

3

Because I need the Vue object to access the underlying data so I need to check what’s Vue doing with the Phaser object.