title: Aframe + vuejs - core:schema:warn Unknown property `color` for component/system `undefined`. +10ms aframe.js:327
body: <p>I'm trying to get Aframe and vuejs to work well with each other, however the console is returning warning messages. I'm guessing this is due to aframe checking the attribute values before vue gets a chance to change them.</p>
  
  <p><strong>Warning messages</strong></p>
  
  <pre><code>core:schema:warn Unknown property `color` for component/system `undefined`. +349ms 2aframe.js:327
  core:schema:warn Unknown property `color` for component/system `undefined`. +2ms aframe.js:327
  core:schema:warn Unknown property `color` for component/system `undefined`. +1ms aframe.js:327
  core:schema:warn Unknown property `height` for component/system `undefined`. +1ms aframe.js:327
  core:schema:warn Unknown property `color` for component/system `undefined`. +1s aframe.js:327
  </code></pre>
  
  <p>Here is the code:</p>
  
  <p><strong>App.vue</strong></p>
  
  <pre><code>&lt;template&gt;
      &lt;a-scene&gt;
          &lt;test-component v-for="block in blocks" :color="block.color" :position="block.pos"&gt;&lt;/test-component&gt;
          &lt;a-box :color="color" height="4"&gt;&lt;/a-box&gt;
          &lt;a-entity position="0 0 10" camera look-controls&gt;&lt;/a-entity&gt;
      &lt;/a-scene&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import TestComponent from './TestComponent.vue';
  require('aframe');
  
  export default {
      name: 'app',
      components:{
          TestComponent,
      },
      data(){
          return {
              color: 'green',
              blocks: [
                  {color: 'red', pos: "1 0 0"},
                  {color: 'orange', pos: "2 0 0"},
                  {color: 'yellow', pos: "3 0 0"}
              ]
          }
      },
      mounted(){
          //test to see if a-frame updates properly
          let that = this;
          setTimeout(function(){
              that.blocks.push({color: 'lime', pos: "4 0 0"})
          }, 1000)
          setTimeout(function(){
              that.blocks[3].pos = "5 0 0"
          }, 2000)
      }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>TestComponent.vue</strong></p>
  
  <pre><code>&lt;template lang="html"&gt;
      &lt;a-box :color="color" :position="position"&gt;&lt;/a-box&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
      props: ['color','position'],
  }
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>index.html</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;aframetest&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div id="app"&gt;&lt;/div&gt;
      &lt;script src="dist/build.js"&gt;&lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>main.js</strong></p>
  
  <pre><code>import Vue from 'vue'
  import App from './App.vue'
  
  new Vue({
    el: '#app',
    render: h =&gt; h(App)
  })
  </code></pre>