JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://unpkg.com/vue@2.1.10"></script>
<script src="https://unpkg.com/vuex@2.1.2"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js"></script>
<div id="app">
  <remote-control></remote-control>
  <snowman></snowman>
</div>

CSS

#app{
  position:relative;
  width: 500px;
  height: 500px;
}
#remote-control{
  background-color: #ddd;
  padding:10px;
  border: 1px solid #000;
}
#snowman{
  font-size: 150px;
  position: absolute;
  top: 100px;
  left: 100px;
}
.green{
  color: green;
}
.blue{
  color: blue;
}

JavaScript

var store = new Vuex.Store({
  state: {
    color: 'green',
    isJumping: 0
  },
  mutations: {
    changeColor: function(state, pColor) {
      state.color = pColor;
    },
    jump: function(state){
      state.isJumping++;
    }
  }
})

Vue.component('remote-control', {

  template: '<div id="remote-control"><button @click="changeColor(\'green\')" >Green</button>&nbsp;<button @click="changeColor(\'blue\')" >Blue</button>&nbsp;<button @click="jumpClicked()" >Jump</button></div>',
  methods: {
    changeColor: function(pColor){
      this.$store.commit('changeColor', pColor)
    },
    jumpClicked: function(){
      this.$store.commit('jump')
    }
  }
})

Vue.component('snowman', {
  template: '<div id="snowman" :class="color">⛄</div>',
  computed: {
    color: function(){
      return this.$store.state.color;
    },
    isJumping: function(){
      return this.$store.state.isJumping;
    }
  },
  watch: {
    isJumping: function(){
      var tl = new TimelineMax();
      tl.set(this.$el,{'top':'100px'})
      tl.to(this.$el, 0.2, {'top':'50px'});
      tl.to(this.$el, 0.5, {'top':'100px', ease: Bounce.easeOut});
    }
  }
})

var app = new Vue({
  el: '#app',
  store
})