ページを読み込んだ時にグレーアウトしたボタンを表示

vue3でとあるフォームを作成。
同意するボタンにチェックが入力された時に送信できる。

やりたいこと

フォームを表示するときに、デフォルトで送信ボタンを非活性（グレーアウト）したい。
同意するにチェックを入れた時に送信ボタンを活性（グレーアウト解除）にする。
CSSで初期値として送信ボタンをグレーアウトするは、別の制御の関係で避けたい。

まず思いついたこと。

vueのライフサイクルを考慮して、mountedで送信ボタンをグレーアウトするようにすればいいのでは？

<template>
    <div>
    	<input type="checkbox" id="agree" value="agree" v-model="agree" />同意する
    </div>
    <button class="SendBtn" v-on:click="sendActionMethod" :disabled="disabledFlg">送信</button>
</template>

<script>
export default {
    props: {
        
    },
    data() {
        return {
            disabledFlg: false,
			agree: false,
        }
	},
	watch:{
    	agree: async function(){
			// 送信ボタンを活性にする
        }
	},
	mounted(){
        // ↓
        // 送信ボタンを非活性（グレーアウト）
    },
}
</script>

結果

DOMが有効になっておらず、送信ボタンのDOMが取得できないので、styleを動的に変更できない。

次に

this.$nextTickを使えばDOM更新後に実行されるらしい。

<template>
	<div>
    	<input type="checkbox" id="agree" value="agree" v-model="agree" />同意する
    </div>
    <button class="SendBtn" v-on:click="sendActionMethod" :disabled="disabledFlg">送信</button>
</template>

<script>
export default {
    props: {
        
    },
    data() {
        return {
            disabledFlg: false,
			agree: false,
        }
	},
	watch:{
		agree: async function(){
			// 送信ボタンを活性にする
        }
	},
	mounted() {
        // ↓
		this.$nextTick(() => {
			// 送信ボタンを非活性（グレーアウト）
		})
	}
}
</script>

やっぱり

状況変わらず。

もうだめだ

考え方を変えて、disableの時にグレーアウトにするだけなので、CSS側で制御するほうが良いのでは？
CSSでボタンがdisabledのときの記述を追加。

<style scoped>
.SendBtn:disabled {
  background-color:gray;
}
</style>

できました

無事にグレーアウトしたボタンが表示されました。
結果的にとてもシンプルな解決策でした。