<Motion tag="g" :values="selectedValues">
  <template slot-scope="values">
    <g v-for="(y, i) in values" class="bars">
      <rect
        :x="i * 10 + 20"
        :y="getMax - y * 10"
        width="10"
        :height="y * 10"
      />
    </g>
  </template>
</Motion>

<Promised :promise="promise">
  <h1 slot="pending">Loading</h1>
  <h1 slot="then" slot-scope="data">
    Success: {{ data }}
  </h1>
  <h1 slot="catch" slot-scope="error">
    Error: {{ error.message }}
  </h1>
</Promised>

export default {
  name: 'Promised',
  props: {
    promise: Promise
  },

  data () {
    return {
      resolved: false,
      data: null,
      error: null
    }
  },

  render (h) {
    if (this.error) {
      return this.$scopedSlots.catch(this.error)
    } else if (this.resolved) {
      return this.$scopedSlots.then(this.data)
    } else {
      return this.$slots.pending[0]
    }
  },

  watch: {
    promise: {
      handler (promise) {
        if (!promise) return
        this.resolved = false
        this.error = null
        promise
          .then(data => {
            if (this.promise === promise) {
              this.resolved = true
              this.data = data
            }
          })
          .catch(err => {
            if (this.promise === promise) this.error = err
          })
      },
      immediate: true
    }
  }
}

<Motion :value="desiredRate">
  <Sound
    slot-scope="{ value }"
    source="sandstorm.mp3"
    :rate="value"
  />
</Motion>

<Renderer :width="width" :height="height">
  <Scene>
    <Camera :position="camPos"/>
    <AmbientLight/>
    <SpotLight :position="lightPosition"/>
    <Cube
      v-for="cube in cubes"
      :key="cube.id"
      :position="cube.position"
    />
    <Ground/>
  </Scene>
</Renderer>

import { Scene } from 'three'
export default {
  inject: ['renderer'],
  provide () {
    this.scene = new Scene()
    return {
      scene: this.scene
    }
  },
  mounted () {
    this.renderer.scene = this.scene
  },
  render (h) {
    return h('div', this.$slots.default)
  }
}

import { BoxGeometry, MeshPhongMaterial, Mesh } from 'three'

export default {
  inject: ['scene'],
  mounted () {
    this.geometry = new BoxGeometry(1, 1, 1)
    this.material = new MeshPhongMaterial({
      color: 0xff0000,
      shininess: 150,
      specular: 0x222222
    })
    this.obj = new Mesh(this.geometry, this.material)
    this.obj.castShadow = true
    this.obj.receiveShadow = true
    this.scene.add(this.obj)
  },
  beforeDestroy () {
    this.scene.remove(this.obj)
  }
}

<Motion v-for="(cube, i) in cubes"
  :values="cube" :key="i"
>
  <Cube
    slot-scope="cube"
    :rotation="rotation"
    :scale="cubeScale"
    :position="cube.position"
    :color="cube.color"
  />
</Motion>