Vue.js Image Update by Mouse Event

handle mouse over, up, down and click

HTML

<div id="app">
  <div>
    <optional-image></optional-image>
  </div>
</div>

<template id="optional-button">
  <img :src="currentImage" 
        @mouseover="changeImageWhen('over')" 
        @mousedown="changeImageWhen('down')" 
        @mouseout="changeImageWhen('out')" 
      >
</template>

JavaScript

var OPTIONAL_IMAGE = {
	template: '#optional-button',
  data: function () {
	  return {
      images: {
        out: 'https://via.placeholder.com/300x300/abc',
        over: 'https://via.placeholder.com/300x300/eff',
        up: 'https://via.placeholder.com/300x300/eff',
        down: 'https://via.placeholder.com/300x300/ddd'
      },
      currentImage: 'https://via.placeholder.com/300x300/abc'
    }
  },
  created: function () {
		this.currentImage = this.images.out
  },
  methods: {
  	changeImageWhen: function (state) {
			this.currentImage = this.images[state]    
		}
  }
}

new Vue ({
	el: '#app',
  components: {
  	'optional-image': OPTIONAL_IMAGE
  }
})