v-for doesn't rerender color after 47 elements

[Dustin Doell]

Describe the bug

In our project we render many sphere meshes and clicking on them will change the color. They are rendered using v-for. Clicking to change the color works for the first 47 spheres but any more added above that do not work.

Reproduction

https://stackblitz.com/edit/vitejs-vite-gstaas?file=src%2FApp.vue

Steps to reproduce

To reproduce, open the reproduction link in a Chromium browser.
I have colored the first 47 spheres yellow. You can click these to change the color.
I have colored an additional 3 spheres purple. Clicking these won't change the color.

System Info

No response

Used Package Manager

npm

Code of Conduct

• I agree to follow this project's Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• The provided reproduction is a minimal reproducible example of the bug.

[Dustin Doell]

After some debugging I found that I can get it to work by cloning the material on click like this instead.

const material = el.object.material.clone();
material.color.set('#11efdd');
el.object.material = material;

I'm not sure if this is expected behavior or a bug.

[andretchen0]

  {
    position: [1.2518832683563232, 1.453944206237793, 0.07235150039196014],
  },
  {
    position: [1.2961052656173706, 1.8752772808074951, -0.0429663360118866],
  },
  {
    position: [2.3921921253204346, 1.8100539445877075, -0.03350330516695976],
  }

These positions are repeated, meaning spheres are exactly overlapping. The spheres that are displayed are not the ones whose materials are modified.

Here it is without the last three points. You see that there are meshes in the same positions.

Here's another StackBlitz with a similar setup. All points respond to the click as expected.

[andretchen0]

Closing. Not a Tres bug.