Background
    
    <div v-random-color="{ event: 'mouseover' }">Mouseover</div>
    <div v-random-color="{ event: 'click' }">Click</div>
    <div v-random-color="{ event: 'dblclick' }">Double Click</div>
    
Mouseover
Click
Double click
Border Color
    
    <div v-random-color="{ event: 'mouseover', property: 'border' }">Mouseover</div>
    <div v-random-color="{ event: 'click', property: 'border' }">Click</div>
    <div v-random-color="{ event: 'dblclick', property: 'border' }">Double Click</div>
    
Mouseover
Click
Double click
Color
    
    <div v-random-color="{ event: 'mouseover', property: 'color' }">Mouseover</div>
    <div v-random-color="{ event: 'click', property: 'color' }">Click</div>
    <div v-random-color="{ event: 'dblclick', property: 'color' }">Double Click</div>
    
Mouseover
Click
Double click
Default Color for mouseout/mouseleave events
    
    <div v-random-color="{ event: 'mouseover', property: 'background', default: 'cccccc'}">Mouseover</div>
    <div v-random-color="{ event: 'mouseover', property: 'border', default: 'cccccc' }">Mouseover</div>
    <div v-random-color="{ event: 'mouseover', property: 'color', default: 'cccccc' }">Mouseover</div>
    
Mouseover
Mouseover
Mouseover
Custom list of colors
    
    <div v-random-color="{
      event: 'mouseover',
      property: 'background',
      default: 'ffffff',
      colors: ['ff0000', '00ff00', '0000ff']
    }">Mouseover</div>

    <div v-random-color="{
      event: 'mouseover',
      property: 'border',
      default: 'cccccc',
      colors: ['ff0000', '00ff00', '0000ff']
    }">Mouseover</div>

    <div v-random-color="{
      event: 'mouseover',
      property: 'color',
      default: '000000',
      colors: ['ff0000', '00ff00', '0000ff']
    }">Mouseover</div>
    
Mouseover
Mouseover
Mouseover
Transition
    
    <div v-random-color="{
      event: 'mouseover',
      property: 'background',
      default: 'ffffff',
      transition: 1
    }">Mouseover</div>

    <div v-random-color="{
      event: 'mouseover',
      property: 'border',
      default: 'cccccc',
      transition: 1
    }">Mouseover</div>

    <div v-random-color="{
      event: 'mouseover',
      property: 'color',
      default: '000000',
      transition: 1
    }">Mouseover</div>
    
Mouseover
Mouseover
Mouseover