Changing a `<Material />`'s `key` prop doesn't attach new material, remove old one

[andretchen0]

Expected

In this <template /> ...

<template>
  <TresCanvas>
    <TresMesh>
      ... 
      <MyMaterial :prop="myProp" />
    </TresMesh>
  </TresCanvas>
</template>

... if changing :prop changes the material :key:

• the existing material should be removed from the parent.
• the rerendered material should be attached to the parent.

Bug

• The existing material is not removed from the parent.
• The new material is not attached to the parent.

What happens instead

• The existing material remains on the parent.
• A new material is created.
• The new material is not attached.

Changing the :prop again leads to:

• The new material is disposed.
• Another new material is created.

Context

Working on updating MeshReflectionMaterial from Cientos. It's based on this Drei component.

Both components use the key prop to force a rerender/recompile. Drei | Cientos

Using the key to force rerendering/recompiling currently doesn't work in the Cientos component.

Rerendering/recompiling the material's shader is required here for full reactivity.

Reproduction

https://stackblitz.com/edit/tresjs-basic-a7wxyh?file=src%2Fcomponents%2FTheExperience.vue

Steps to reproduce

See Stackblitz.

System Info

all platforms

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.