Deck.gl: DeckGL + VueJS highlight color not displaying properly

[FilipHusnjak]

Description

I'm using DeckGL library with VueJS and ran into a possible bug. When i set property autohighlight to true inside SimpleMeshLayer inside mounted() method of VueJS lifecycle the highlight color is different from default one.
When i set the same layer with the exact same properties inside the method which is for example invoked when object is clicked or hovered, after click/hover event highlight color is correct. Its the same if i try to set highlightColor property myself, only when the click/hover event happens and method which creates layer again is invoked the proper highlight color is used. Until then different color is used (which is not even default one).

Repro Steps

mounted() {
  this.deck = new Deck({
      canvas: this.$refs.canvas,
      width: '100%',
      height: '100%',
      initialViewState: this.buildingViewState,
      layers: [
          new SimpleMeshLayer({
             id: 'test',
             coordinateSystem: COORDINATE_SYSTEM.METER_OFFSETS,
             data: [
             {
               position: [0, 0],
               color: this.buildingColor,
               orientation: this.buildingOrientation
             }
             ],
             mesh: url,
             pickable: true,
             autohighlight: true,
             highlightColor: [255, 0, 0, 128],
             onClick: info => this.click(info),
             getPosition: d => d.position,
             getColor: d => d.color,
             getOrientation: d => d.orientation,
             getScale: this.buildingScale
          })
        ]
    })
}

methods: {
   click (info) {
      this.deck.setProps({
          layers: [
             new SimpleMeshLayer({
                 id: 'test',
                 coordinateSystem: COORDINATE_SYSTEM.METER_OFFSETS,
                 data: [
                 {
                     position: [0, 0],
                     color: this.buildingColor,
                     orientation: this.buildingOrientation
                  }
                  ],
                  mesh: url,
                  pickable: true,
                  autohighlight: true,
                  highlightColor: [255, 0, 0, 128],
                  onClick: info => this.click(info),
                  getPosition: d => d.position,
                  getColor: d => d.color,
                  getOrientation: d => d.orientation,
                  getScale: this.buildingScale
              })
          ]
      })
   }
}

The code above does not show selected highlight color until the object is clicked.
The following highlight color is used before the click event:

Environment (please complete the following information):

• Framework Version: deck.gl 8.2.3
• Browser Version: Chrome 84.0.4147.89
• OS: Windows 10

Logs

There are no any warnings nor errors inside the console.

[Pessimistress]

@FilipHusnjak You should check:

1. If you are misspelling highlightColor in your code
2. If you are setting layers elsewhere without specifying highlightColor.

I do not use vue.js but I cannot think of any reason it would work differently with vue.

Here's an example of it working. It will help us help you if you can reproduce the bug in Codepen.

[FilipHusnjak]

I just discovered that it works fine with new luma.CubeGeometry() as mesh property but the problem I have occurs when custom URL is used instead with loaders.gl library for loading .obj files.
I created demo VueJS app https://codesandbox.io/s/zen-darkness-vk0m2?file=/src/components/HelloWorld.vue .
You can see that highlight color is incorrect but when MESH_URL is replaced with new luma.CubeGeometry() the highlight color is correct (you have to adjust scaling for cubes).
So, am I doing something wrong trying to display arbitrary 3D model or loader.gl library is causing the bug?

[Pessimistress]

Fix published in 8.2.5