Render Loop does not work with GltfModel

[lordLegal]

I am trying to let a Model move but the value is changing but the renderer does not update.

<template>
  <Renderer ref="renderer" antialias orbit-ctrl resize="window">
    <Camera ref="cam" :position="{ z: 40, x: 3 }"></Camera>
    <Scene ref="scene" :background="'white'">
      <AmbientLight color="#808080"></AmbientLight>
      <PointLight color="#ffffff" :position="{ y: 50, z: 0 }"></PointLight>
      <PointLight color="#ffffff" :position="{ y: -50, z: 0 }"></PointLight>
      <PointLight color="#ffffff" :position="{ y: 0, z: 0 }"></PointLight>
      <GltfModel
        ref="model"
        :rotation="{ y: 0, z: 0 }"
        src="http://192.168.178.23:8080/car.gltf"
      />
    </Scene>
  </Renderer>
</template>

<script>
import {
  Camera,
  PointLight,
  Renderer,
  Scene,
  GltfModel,
  AmbientLight,
} from "troisjs";
export default {
  name: "Car",
  components: { Camera, PointLight, Renderer, Scene, GltfModel, AmbientLight },
  mounted() {
    const renderer = this.$refs.renderer;
    const box = this.$refs.model;
    //var cam = this.$refs.cam
    //var scene = this.$refs.scene
    renderer.onBeforeRender(() => {
      console.log(box);
      box.rotation.y += 1;
    });
  },
};
</script>



<style >
canvas {
  width: 100%;
  height: 100%;
}
</style> 

[klevron]

You should try :

const renderer = this.$refs.renderer
const model = this.$refs.model
renderer.onBeforeRender(() => {
  if(model.o3d) model.o3d.rotation.y += 0.1
})