JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script src="https://unpkg.com/vuex/dist/vuex.min.js"></script>
<div id="app" :style='style'>
  <input v-model='computedColor' type="text" placeholder='Background Color'>
</div>

CSS

html, body {
  height: 100vh;
  width: 100vw;
  margin: 0;
  padding: 0;
}

#app {
  height: inherit;
  width: inherit;
}

Babel + JSX

'use strict'

Vue.use(Vuex)

const { mapGetters, mapActions, Store } = Vuex

new Vue({
	el: '#app',
  store: new Store({
    state: {
      color: 'red'
    },
    getters: {
      color({color}) {
        return color
      }
    },
    mutations: {
      setColor(state, payload) {
        state.color = payload
      }
    },
    actions: {
      setColor({commit}, payload) {
        commit('setColor', payload)
      }
    }
  }),
  methods: {
  	...mapGetters([
    	'color'
    ]),
    ...mapActions([
    	'setColor'
    ])
  },
  computed: {
  	computedColor: {
    	set(value) {
      	this.setColor(value)
      },
      get() {
      	return this.color()
      }
    },
  	style() {
    	return `background-color: ${this.computedColor};`
    }
  },
  watch: {
  	computedColor() {
    	console.log(`Watcher in use @${new Date().getTime()}`)
    }
  }
})