Shortly Vue

0. shortlyWatchers.js

import compose from './compose'

export default (watchers, method) => {
  const shorlty = compose(watchers,
    (_, watcher) => ({
      [watcher]: typeof method !== 'string' ? method : function () {
        this[method](...arguments)
      }
    })
  )
  return shortly
}

1. compose.js

/**
 * @param {Object.<string, A>} object
 * @param {function(string, A): Object.<string, B>} λ
 * @template A, B
 * @returns {Object.<string, B>}
 */
export default (object, λ) => {
  const entries = Object.entries(object)
  const composition = entries.reduce(
    (composition, [ property, value ]) => ({
      ...composition,
      ...λ(property, value) || {}
    }),
    {}
  )
  return composition
}

2. Example.vue

<template>
  <form>
    <fieldset>
      <label for="input-name">Name</label>
      <input v-model="user.name" id="input-name" />
    </fieldset>
    <fieldset>
      <label for="input-password">Password</label>
      <input
        v-model="user.password"
        id="input-password"
        type="password"
      />
    </fieldset>
    <blockquote v-if="error">
      <p>{{ error }}</p>
    </blockquote>
  </form>
</template>

<script>
  import shortlyWatchers from 'vue-shortly-watchers'

  export default {
    data () {
      return {
        error: '',
        user: {
          name: '',
          password: ''
        }
      }
    },
    watch: shortlyWatchers(['user.name', 'user.password'], 'check'),
    methods: {
      check () {
        this.error = (!this.user.name || !this.user.password)
          ? 'Empty name or password'
          : ''
      }
    }
  }
</script>