How to re-render UI template base on condition vuejs
<template>
<text-box v-model="value" :rules="setValidate" />
</template
<script>
export default {
data() {
return {
setValidate : [],
}
},
watch: {
value(newValue){
if(newValue === 'Modern') {
this.setValidate = [(item) => !!item || 'This is required']
} else {
this.setValidate = [item => item]
}
}
}
}
</script>
I wanted to set the require rules base on watcher if input is Modern it will be required field otherwise it will be non require field. I am guessing it is not re-rendering template rule base on watcher, how can we fix it please guide
Thank you