title: vee-validate No such validator 'required' exists. with regex
body: <p>I've made the following reusable input component for my app where I've added vee-validate for the validation.</p>
  <p><strong>Input.vue</strong></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>      &lt;input
          :type="type"
          v-on="$listeners"
          :value="value"
          :class="errors.first(name) ? 'input mt-2 is-danger' : 'input mt-2'"
          @input="$emit('update', $event.target.value)"
          :placeholder="placeholder"
          v-validate="rules"
          :name="name"
        /&gt;
        &lt;span class="has-text-danger-dark"&gt;{{ errors.first(name) }}&lt;/span&gt;
        
        
  &lt;script&gt;
  export default {
    inheritAttrs: false,
    props: ["label", "placeholder","name", "rules", "value", "type"],
    model: {
      prop: "value",
      event: "update",
    },
  };
  &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>And I'm using this component as the following:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;Input
        placeholder="(912) 555-4321"
        v-model.lazy="basics.phone"
        label="Phone"
        type="tel"
        slot="field"
        name="phone"
        rules="{required: true, regex: ^(\+\d{1,2}\s)?\(?\d{3}\)?[\s.-]\d{3}[\s.-]\d{4}$}"
      /&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>With the above parameter sent I'm getting an error message on the input field phone:</p>
  <p><strong>[vee-validate] No such validator '{required' exists.</strong></p>
  <p>I've used the component for  other input with validation rules and it works. But with regex it doesn't.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>    &lt;Input
        placeholder="john@gmail.com"
        v-model.lazy="basics.email"
        label="Email"
        type="email"
        slot="field"
        name="email"
        rules="required|email"
      /&gt;</code></pre>
  </div>
  </div>
  </p>