vee-validate No such validator 'required' exists. with regex

Question

I've made the following reusable input component for my app where I've added vee-validate for the validation.

Input.vue

      <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"
      />
      <span class="has-text-danger-dark">{{ errors.first(name) }}</span>
      
      
<script>
export default {
  inheritAttrs: false,
  props: ["label", "placeholder","name", "rules", "value", "type"],
  model: {
    prop: "value",
    event: "update",
  },
};
</script>

And I'm using this component as the following:

<Input
      placeholder="[phone]"
      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}$}"
    />

With the above parameter sent I'm getting an error message on the input field phone:

[vee-validate] No such validator '{required' exists.

I've used the component for other input with validation rules and it works. But with regex it doesn't.

    <Input
      placeholder="[email protected]"
      v-model.lazy="basics.email"
      label="Email"
      type="email"
      slot="field"
      name="email"
      rules="required|email"
    />

Answer 1

Just figured out that I need to escape \ in js.

regex: /^[\\+]?[(]?[0-9]{3}[)]?[-\s\\.]?[0-9]{3}[-\s\\.]?[0-9]{4,6}$/im