Unable to update component after setAttribute

Question

I am trying to change the point of view of the images with the object3D.lookAt attribute. Currently I am trying to change the orientation of the images with the update() method of the component. This by updating the lookat attribute of my component.

function initCameras(cameras) {                                  
  cameras.forEach(camera => {                                    
    let el = document.createElement('a-entity');                 
    el.setAttribute('vp-cam', 'position: ' + camera.position);   
    el.setAttribute('id', camera.id);                            
    sceneEl.appendChild(el);                                     
  });                                                            
} 

This is the code for initiating the components (is this the correct way, I am new to A-Frame)

This is the component code:

AFRAME.registerComponent('vp-cam', {                                                  
  schema: {                                                                           
    radius: {default: 1, min: 0},                                                     
    segments: {default: 32, min: 3, type: 'int'},                                     
    thetaLength: {default: 360, min: 0},                                              
    thetaStart: {default: 0},                                                         
    id: {type: 'string', default: 'camera'},                                          
    position: {type: 'vec3', default: {x: 0, y: 0, z: 0}},                            
    lookat: {type: 'vec3', default: {x: 0, y: 0, z: 0}},                              
  },                                                                                  

  /**                                                                                 
   * Initial creation and setting of the mesh.                                        
   */                                                                                 
  init: function() {                                                                  
    let data = this.data;                                                             
    let el = this.el;                                                                 

    //Camera Id                                                                       
    this.id = data.id;                                                                

    // Create geometry.                                                               
    this.geometry = new THREE.CircleGeometry(                                         
      data.radius,                                                                    
      data.segments,                                                                  
      degToRad(data.thetaStart),                                                      
      degToRad(data.thetaLength),                                                     
    );                                                                                

    // Create texture.                                                                
    this.texture = new THREE.TextureLoader().load('assets/img/cam.png');              

    // Create material.                                                               
    this.material = new THREE.MeshBasicMaterial({map: this.texture});                 

    // Create mesh.                                                                   
    this.mesh = new THREE.Mesh(this.geometry, this.material);                         

    // Set mesh on entity.                                                            
    el.setObject3D('mesh', this.mesh);                                                

    // Change position                                                                
    el.object3D.position.set(data.position.x, data.position.y, data.position.z);      

    //Look at camera                                                                  
    let camera = document.getElementById('cursor-main');                              
    let cameraPos = camera.object3D.position;                                         
    el.object3D.lookAt(cameraPos);                                                    
  },                                                                                  
  update: function(oldData) {                                                         
    console.log('updateFunction called: ', oldData);                                  
  },  

This is the code which should trigger the update in my current mind-set:

function adjustCameraRotations(target) {                           
  console.log('target: ', target);                                 
  let activeViewPoints = document.querySelectorAll('[vp-cam]');    
  activeViewPoints.forEach(camera => {                             
    console.log('target.position:', target.position);              
    camera.components.setAttribute('lookat', target.position);     
    console.log('iteration camera: ', camera);                     
  });                                                              
}     

Answer 1

Your code is not properly updating the component. The API as described in the docs is:

cameraEl.setAttribute('vp-cam', {lookat: target.position});

You also need to wait for the scene to load in order for the component to start triggering the update method as described in this question