<template>
  <div id="app">
    <fieldset>
      <legend>Dynamic validation with string (Working as expected)</legend>
      <input v-model="text" v-validate="rule('1')" autocomplete="off" type="text" :name="name1" />
      <span v-show="errors.has(name1)">{{ errors.first(name1) }}</span>
      <label>
        <input v-model="required" autocomplete="off" type="checkbox" />{{ required ? "" : "Not" }}
        Required
      </label>
    </fieldset>
    <fieldset>
      <legend>Dynamic validation with object (Working with issue)</legend>
      <input
        v-model="textObj"
        v-validate="ruleObj"
        autocomplete="off"
        type="text"
        name="inputObj"
      />
      <span v-show="errors.has('inputObj')">{{
        errors.first("inputObj")
      }}</span>
      <label>
        <input v-model="ruleObj.rules.required" autocomplete="off" type="checkbox" />{{
          ruleObj.rules.required ? "" : "Not"
        }}
        Required
      </label>
    </fieldset>
  </div>
</template>
<script>
export default {
  data: function () {
    return {
      name1: 'name11',
      text: '',
      required: true,
      textObj: '',
      ruleObj: {
        rules: {
          required: true,
        },
        arg: 'textObj',
      },
    };
  },
  methods: {
    rule: function (value) {
      console.log(value);
      return this.required ? 'required' : '';
    },
  },
};
</script>