VeeValidate で Validation Observer と data-vv-as を併用する

Validation Provider の name に data-vv-as に該当する指定をしたらよいようです。

Validation Provider - Examples - VeeValidate を fork したものが こちら

Vee-validate: Don’t get “data-vv-as” working with “observer/provider” こちらで同様の対応をしている人がいました。

Validation Provider への data-vv-as 指定

BTextInputWithValidation.vue について name への指定に $attrs['data-vv-as'] を $attrs['name'] の前に渡します。

BTextInputWithValidation.vue

<template>
  <ValidationProvider
    :vid="vid"
    :name="$attrs['data-vv-as'] || $attrs.name"
    :rules="rules"
    >

Validation Observer 使用箇所での data-vv-as 指定

BTextInputWithValidation.vue を使用している箇所で password の片側だけ data-vv-as を指定します。

RefactoredForm.vue

      <BTextInputWithValidation
        rules="required"
        data-vv-as="パッスワード"
        name="Password"
        vid="password"
        type="password"
        label="Password"
        v-model="password"
        description="We'll never share your password with anyone else"
        placeholder="Enter password"
      />

これでバリデーションの指定などは変更せずエラーメッセージの単語だけ変更することができました。