【Vue.js】テキストボックスもしくはHTMLの変化を検知したい

Question

前提・実現したいこと

Vue.jsでフォーム画面を作成しており、VeeValidateでバリデーションをかけております。
フォームが複数あり、いずれか1つのフォームにエラーがある場合に完了ボタンをdisableにしたいです。

発生している問題・エラーメッセージ

通常、ValidationObserverタグ内でv-slot="{invalid}"として、同フォーム内の送信ボタンタグに:disable="invalid"とすることで実現できますが、私が作成しているコンポーネント 設計上、完了ボタンが親コンポーネントに置かれており、他の方法で実現する必要があります。

試したこと

以下の方法で試しましたが、いずれも期待する動作を実現できませんでした。
①{invalid}を表示するinputタグを用意し、その中に@changeでtrueとfalseが切り替わる度にmethodを走らせる
②同様にinputタグを用意し、v-modelでdata()内の変数と同期させ、watchで監視する

inputもしくはHTMLの変化を検知できれば実現できると思うのですが、方法が見つからず。。。
何かヒント等ございましたら、ご教示頂けますと幸いです。

該当のソースコード

上記の①のパターンのソースコードです（一部抜粋しております）

<template>
　<ValidationObserver v-slot="{ valid }">
　　<input id="display-none-text" type="text" :value="valid" @change="changeStatus">
　　　<form class="form-row">
   　　<div class="form-group col-6">
　　　　　<label :for="'userName">ユーザー名</label>
　　　　　<ValidationProvider name="ユーザー名" rules="required|alpha_num">
　　　　　　<div slot-scope="ProviderProps">
　　　　　　　<input class="form-control" type="text" :id="userName">
   　　　　　<p class="error">{{ ProviderProps.errors[0] }}</p>
　　　　　  </div>
　　　　　</ValidationProvider>
     </div>
    </form>
 </ValidationObserver>
</template>
<script>
　export default {
　　methods: {
　　　changeStatus: function(){
       console.log('validステータスが変わりました。')
　　　}
　　}
　}
</script>

Answer 1

VeeValidateは使ったことがないですが、下の用法でvalidの値を普通に使えているのなら、単にwatchするだけで良い気がします。

<input id="display-none-text" type="text" :value="valid" @change="changeStatus">

たとえば、

<script>
　export default {
    watch: {
      valid: function(valid) {
        this.$emit('input', valid);
      }
    },
　　methods: {
　　　changeStatus: function(){
       console.log('validステータスが変わりました。')
　　　}
　　}
　}
</script>

親コンポーネントからは v-on:input='onChangeStatus' みたいな感じで受け取れます。

2.x系ならこの辺を理解できるとよいかも。

Comments

[sunuo55]

ご回答ありがとうございます！
ご回答頂いた内容で試しましたが、watchでvalidの状態変化を検知することができませんでした...。
watchは、propsかdataのみを監視するものかと思っておりました。
validの状態を同期的にdataに渡せれば良いのですが。。。

Answer 2

ちょっとイケてないかもしれませんが、以下のような形で解決することができました。
ご回答頂いた方、誠にありがとうございました。

<template>
　<ValidationObserver ref="form">
　　<input id="display-none-text" type="text" :value="valid" @change="changeStatus">
　　　<form class="form-row">
   　　<div class="form-group col-6" @mouseleave="getValidStatus"> 
　　　　　<label :for="'userName">ユーザー名</label>
　　　　　<ValidationProvider name="ユーザー名" rules="required|alpha_num">
　　　　　　<div slot-scope="ProviderProps">
　　　　　　　<input class="form-control" type="text" :id="userName">
   　　　　　<p class="error">{{ ProviderProps.errors[0] }}</p>
　　　　　  </div>
　　　　　</ValidationProvider>
     </div>
    </form>
 </ValidationObserver>
</template>
<script>
　export default {
　　methods: {
　　　getValidStatus() {
       this.$nextTick(() =>  {
        this.$refs.form.validate().then(res => {
        this.changeNextButtonDisable(res)
        })
       })
     },
     changeNextButtonDisable(res) {
       if(res === true) {
         this.$store.commit('undisable')
       } else {
        this.$store.commit('to_disable')
       }
     },
　　}
　}
</script>
```